flutter - 如何在 onPressed() 中动态更改按钮的背景颜色

标签 flutter flutter-layout setstate flutter-sliver

我有一个凸起按钮列表,我希望所选按钮的背景颜色在其 onPressed() 中发生变化

我尝试在 setState 中更改颜色,但它没有任何作用。

这是生成按钮列表的函数

List<Widget> _makeZoneList(List<Zone> zones) {
    List<Widget>Buttons = new List();
    for (int i = 0; i < zones.length; i++) {
      Buttons.add(RaisedButton(
        color: zones[i].isSelected ? AppColors.primaryColor : AppColors.white,
        onPressed: () {
          setState(() {
            if (zones[i].isSelected){
              zones[i].isSelected = false;
            }
            else{
              zones[i].isSelected = true;
            }
            print(zones[i].isSelected.toString());
          });
        },
        child: Text(zones.elementAt(i).text)
      ));
    }
    return Buttons;
  }

这是我调用函数的地方

Widget _zoneBody() {
    return Padding(
        padding: EdgeInsets.all(32),
        child: StreamBuilder<List<Zone>>(
            stream: GetterBloc.zonesStream,
            builder: (context, snapshot) {
              if (snapshot.connectionState == ConnectionState.waiting) {
                return new Container();
              } else {
                if (snapshot.hasData) {
                     return Wrap(
                          spacing: 6.0, // gap between adjacent chips
                          children: _makeZoneList(snapshot.data));

                } else {
                  return new Container();
                }
              }
            }));
  }

当我按下任何按钮时,它的 isSelected 值改变但背景没有相应改变

最佳答案

更新的答案(ElevatedButton)

由于 RaisedButton 现已弃用,请使用 ElevatedButton:

enter image description here

代码:

class _MyState extends State<MyPage> {
  bool _flag = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ElevatedButton(
          onPressed: () => setState(() => _flag = !_flag),
          child: Text(_flag ? 'Red' : 'Green'),
          style: ElevatedButton.styleFrom(
            backgroundColor: _flag ? Colors.red : Colors.teal, // This is what you need!
          ),
        ),
      ),
    );
  }
}

旧答案

由于未定义的类和变量,很难实现您的代码,但是我创建了一个小示例,可以帮助您找到所需的内容。

List<bool> _list = [true, false, true, false];

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: Text("Title")),
    body: ListView(children: _buildButtons()),
  );
}

List<Widget> _buildButtons() {
  List<Widget> listButtons = List.generate(_list.length, (i) {
    return RaisedButton(
      color: _list[i] ? Colors.green : Colors.red,
      onPressed: () {
        setState(() {
          _list[i] = !_list[i];
        });
      },
      child: Text("Button #${i}"),
    );
  });
  return listButtons;
}

输出:

enter image description here

关于flutter - 如何在 onPressed() 中动态更改按钮的背景颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55622088/

相关文章:

reactjs - TypeError : evt. 目标在功能 setState 中为空

Flutter GestureDetector,onTap自动触发,如何?

flutter - Flutter-无限容器

dart - Dart 中的 async 和 async* 有什么区别?

Flutter - 容器 onPressed?

dart - const 在 Flutter 中定义 EdgeInsets 中的作用

List [index +1] 有效 [index - 1] 无效(Flutter)

flutter - 在 Flutter 中使用 borderRadius 为容器添加边框

flutter - 停止音频循环(音频播放器包)

flutter - AppBar中的分隔线未出现