Flutter-如何在單擊時更改按鈕顏色并禁用其他按鈕？

我有一個帶有幾個綠色按鈕的串列視圖，我需要在單擊時將按鈕的顏色更改為紅色。問題是，在這樣做時，所有其他按鈕都需要回傳到它們的基本顏色綠色。

在下面的這個例子中（作業版本在

創建新檔案并復制以下代碼并查看結果：

class TestPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: Colors.blue[800],
      ),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyButtonList(
            buttons: [
              ButtonData(text: 'Test'),
              ButtonData(text: 'Test'),
              ButtonData(text: 'Test'),
              ButtonData(text: 'Test'),
              ButtonData(text: 'Test'),
            ],
          ),
        ),
      ),
    );
  }
}

class MyButtonList extends StatefulWidget {
  const MyButtonList({Key? key, required this.buttons}) : super(key: key);

  final List<ButtonData> buttons;

  @override
  State<MyButtonList> createState() => _MyButtonListState();
}

class _MyButtonListState extends State<MyButtonList> {
  late List<bool> favoriateState;

  @override
  void initState() {
    favoriateState = List.generate(
        widget.buttons.length, (index) => widget.buttons[index].isFavorite);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: [
        for (var i = 0; i < widget.buttons.length; i  )
          MyWidget(
            text: widget.buttons[i].text,
            onPressed: () {
              for (var j = 0; j < favoriateState.length; j  ) {
                favoriateState[j] = false;
              }
              setState(() {
                favoriateState[i] = true;
                if (widget.buttons[i].onPressed != null) {
                  widget.buttons[i].onPressed!();
                }
              });
            },
            isFavourte: favoriateState[i],
          ),
      ],
    );
  }
}

class ButtonData {
  final String text;
  final Function()? onPressed;
  final bool isFavorite;

  ButtonData({required this.text, this.onPressed, this.isFavorite = false});
}

class MyWidget extends StatelessWidget {
  const MyWidget(
      {Key? key,
      required this.text,
      required this.onPressed,
      this.isFavourte = false})
      : super(key: key);

  final String text;
  final Function()? onPressed;
  final bool isFavourte;
  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
        style: ElevatedButton.styleFrom(
          primary: isFavourte ? Colors.red : Colors.green,
        ),
        onPressed: onPressed,
        child: Text(text));
  }
}

uj5u.com熱心網友回復：

您似乎想通過使用 TextButtons 來模擬 RadioButtons。

使用一組RadioListTile-s 只有一個可以處于活動狀態。如果我理解正確的話，這就是你想要實作的目標。

我可以建議使用RadioListTile-s 代替，然后根據需要設定（或主題）這些樣式：綠色用于非活動瓷磚，紅色用于活動瓷磚。

以下僅演示了 的用法RadioListTile，可以輕松找到有關設定 active-/nonactive-Tiles 樣式的更多資訊。

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

/// main application widget
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String _title = 'Flutter Application';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: const MyStatefulWidget(),
      ),
    );
  }
}

/// stateful widget that the main application instantiates
class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({Key? key}) : super(key: key);

  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}

enum Fruit { apple, banana }

/// private State class that goes with MyStatefulWidget
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  Fruit? _fruit = Fruit.apple;
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        children: <Widget>[
          RadioListTile<Fruit>(
            title: const Text('Apple'),
            value: Fruit.apple,
            groupValue: _fruit,
            onChanged: (Fruit? value) {
              setState(() {
                _fruit = value;
              });
            },
          ),
          RadioListTile<Fruit>(
            title: const Text('Banana'),
            value: Fruit.banana,
            groupValue: _fruit,
            onChanged: (Fruit? value) {
              setState(() {
                _fruit = value;
              });
            },
          ),
        ],
      ),
    );
  }
}

來源

https://googleflutter.com/flutter-radiolisttile/

標籤：扑 镖

上一篇：Dart語言，如何從字串中提取特定部分

下一篇：錯誤：沒有名為“顏色”的命名引數Flutter