Flutter 颤振：如何为每个按钮的切换按钮着色

我有如下

切换按钮

：

Map listButton={'low'：true，'medium'：true，'high'：true}

我创建了
myColor
类，如下所示：

var myColor={“低”：Colors.green，“中”：Colors.amberAccent，“高”：Colors.red}

因此，如何通过属性显示
ToggleButtons
的颜色
fillColor
遵循
myColor
中的颜色，如下所示：


所以请帮助我，这是主文件：

import 'package:flutter/material.dart';

class ToggleButtonColor extends StatefulWidget {
  @override
  _ToggleButtonColorState createState() => _ToggleButtonColorState();
}

class _ToggleButtonColorState extends State<ToggleButtonColor> {
  Map<String, bool> listButton = {'low': true, 'medium': true, 'high': true};
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: Text('Toggle Button Color')),
        body: ToggleButtons(
            children: listButton.keys.map((e) => Text(e)).toList(),
            fillColor: myColor[listButton.keys], // I think this line needs to be corrected
            isSelected: listButton.values.toList(),
            onPressed: (int index) {
              String indexKey = listButton.keys.toList()[index];
              setState(() {
                listButton.update(indexKey, (value) => !value);
              });
            }));
  }
}

var myColor = {"low": Colors.green, "medium": Colors.amberAccent, "high": Colors.red};



导入“包装：颤振/材料.省道”；
类ToggleButtonColor扩展StatefulWidget{
@凌驾
_ToggleButtonColorState createState（）=>_ToggleButtonColorState（）；
}
类_ToggleButtonColorState扩展状态{
映射列表按钮={'low'：true，'medium'：true，'high'：true}；
@凌驾
小部件构建（构建上下文）{
返回脚手架(
appBar:appBar（标题：文本（“切换按钮颜色”），
主体：切换按钮(
子项：listButton.keys.map（（e）=>Text（e））.toList（），
fillColor:myColor[listButton.keys]，//我认为这行需要更正
isSelected:listButton.values.toList（），
onPressed：（int索引）{
String indexKey=listButton.keys.toList（）[index]；
设置状态（）{
更新（索引键，（值）=>！值）；
});
}));
}
}
var myColor={“低”：Colors.green，“中”：Colors.amberAccent，“高”：Colors.red}；
您可以通过不在公共属性中的每个子级执行此操作
fillColor
例如：

class ToggleButtonColor extends StatefulWidget {
  @override
  _ToggleButtonColorState createState() => _ToggleButtonColorState();
}

class _ToggleButtonColorState extends State<ToggleButtonColor> {
  Map<String, bool> listButton = {'low': true, 'medium': true, 'high': true};
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: Text('Toggle Button Color')),
        body: ToggleButtons(
            children: listButton.keys.map((e) => Container(color: myColor[e], child: Text(e))).toList(),
            //Not here            fillColor: myColor[listButton.keys], // I think this line needs to be corrected
            isSelected: listButton.values.toList(),
            onPressed: (int index) {
              String indexKey = listButton.keys.toList()[index];
              setState(() {
                listButton.update(indexKey, (value) => !value);
              });
            }));
  }
}

var myColor = {"low": Colors.green, "medium": Colors.amberAccent, "high": Colors.red};

class ToggleButtonColor扩展StatefulWidget{
@凌驾
_ToggleButtonColorState createState（）=>_ToggleButtonColorState（）；
}
类_ToggleButtonColorState扩展状态{
映射列表按钮={'low'：true，'medium'：true，'high'：true}；
@凌驾
小部件构建（构建上下文）{
返回脚手架(
appBar:appBar（标题：文本（“切换按钮颜色”），
主体：切换按钮(
children:listButton.keys.map（（e）=>Container（颜色：myColor[e]，children:Text（e）））.toList（），
//不在这里fillColor:myColor[listButton.keys]，//我认为这行需要更正
isSelected:listButton.values.toList（），
onPressed：（int索引）{
String indexKey=listButton.keys.toList（）[index]；
设置状态（）{
更新（索引键，（值）=>！值）；
});
}));
}
}
var myColor={“低”：Colors.green，“中”：Colors.amberAccent，“高”：Colors.red}；

如果需要，请正确设置大小
您也可以像这样创建自己的切换按钮

import 'package:flutter/material.dart';

class MyButtons {
  Color bgColor;
  String title;
  bool isSelected;

  MyButtons({
    this.bgColor,
    this.title,
    this.isSelected,
  });
}

class ToggleButtonWidget extends StatefulWidget {
  @override
  _ToggleButtonWidgetState createState() => _ToggleButtonWidgetState();
}

class _ToggleButtonWidgetState extends State<ToggleButtonWidget> {
  List<MyButtons> buttons = [
    MyButtons(
      bgColor: Colors.green,
      title: 'low',
      isSelected: false,
    ),
    MyButtons(
      bgColor: Colors.yellowAccent,
      title: 'medium',
      isSelected: false,
    ),
    MyButtons(
      bgColor: Colors.red,
      title: 'high',
      isSelected: false,
    ),
  ];

  var myColor = {
    'low': Colors.green,
    'medium': Colors.yellow,
    'high': Colors.red,
  };

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          'Toggle Button Colors',
        ),
      ),
      body: Row(
        children: buttons.map((btn) {
          return FlatButton(
            onPressed: () {
              setState(() {
                btn.isSelected = !btn.isSelected;
              });
            },
            child: Text(
              btn.title,
            ),
            color: btn.isSelected ? btn.bgColor : Colors.lightBlue[50],
          );
        }).toList(),
      ),
    );
  }
}

导入“包装：颤振/材料.省道”；
类MyButtons{
颜色；
字符串标题；
布尔当选；
我的按钮({
这种颜色，
这个名字，
这次选举，
});
}
类ToggleButtonWidget扩展StatefulWidget{
@凌驾
_ToggleButtonWidgetState createState（）=>\u ToggleButtonWidgetState（）；
}
类_ToggleButtonWidgetState扩展状态{
列表按钮=[
我的按钮(
bgColor:Colors.green，
标题:"低",，
选：错，
),
我的按钮(
bgColor:Colors.yellowAccent，
标题:"中",，
选：错，
),
我的按钮(
bgColor:Colors.red，
标题:"高",，
选：错，
),
];
var myColor={
“低”：颜色。绿色，
“中等”：颜色。黄色，
“高”：颜色。红色，
};
@凌驾
小部件构建（构建上下文）{
返回脚手架(
appBar:appBar(
标题：正文(
“切换按钮颜色”，
),
),
正文：世界其他地区(
子项：按钮.map（（btn）{
返回按钮(
已按下：（）{
设置状态（）{
btn.isSelected=！btn.isSelected；
});
},
子：文本(
btn.title，
),
颜色：btn.isSelected？btn.bgColor:颜色.浅蓝色[50]，
);
}).toList（），
),
);
}
}

希望这有助于解决您的问题。
属性
fillColor
，
selectedColor
，
disabledColor
有什么办法吗。。。？我认为它会更好地为每个孩子在切换按钮内的UINot定制。您需要为内部的每个孩子手动设置：（没有办法@Kel，您可以将
列表
添加到
颜色
对象中。请随意阅读此内容，以进一步了解每个
键的类型
：）。