Flutter：如何為 ToggleButtons 的每個按鈕着色

Question

我有如下ToggleButtons ：

Map<String, bool> listButton = {'low': true, 'medium': true, 'high': true};

我像這樣創建了myColor class ：

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

那么如何通過屬性fillColor顯示ToggleButtons的顏色遵循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};

Answer 1

您可以通過不在公共屬性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};

如果需要，正確放置尺寸

Answer 2

您也可以像這樣創建自己的切換按鈕。

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(),
      ),
    );
  }
}

希望這有助於找出您的問題。