切换按钮的背景颜色

Question

我正在尝试更改未选定切换按钮的背景颜色。我猜背景颜色现在默认设置为透明，我无法更改它。我尝试用扩展的彩色容器填充按钮，但这不起作用

这是图片

这是代码

Container(
      child: ToggleButtons(
        borderRadius: BorderRadius.circular(5),
        selectedColor: Colors.white,
        fillColor: Colors.blue,
        //renderBorder: false,
        children: [Text('Option1'), Text('Option2'), Text('Option3')],
        isSelected: [true, false, false],
        onPressed: (d) {},
      ),
    )

Answer 1

确实，未选择的切换按钮是透明的...在官方文档中找不到有关为其设置背景颜色的任何内容。

那么，设置父容器的背景怎么样？

这个解决方案满足您的需求吗？

              Container(
                padding: EdgeInsets.zero,
                decoration: BoxDecoration(
                  color: Colors.yellow,
                  border: Border.all(color: Colors.black, width: 1.0),
                  borderRadius: BorderRadius.all(Radius.circular(5.0)),
                ),
                child: ToggleButtons(
                  selectedColor: Colors.white,
                  borderRadius: BorderRadius.circular(5),
                  fillColor: Colors.blue,
                  children: [Text('Option1'), Text('Option2'), Text('Option3')],
                  isSelected: [true, false, false],
                  onPressed: (d) {},
                ),
              ),

Answer 2

我刚刚找到了一种方法，您可以为切换按钮选择容器，您可以在其中设置文本，您可以设置每个切换按钮的项目的高度，并且容器也采用相同的大小。我已经添加了容器50*50尺寸

ToggleButtons(
          constraints: BoxConstraints.tight(Size(50, 50)),
          borderRadius: BorderRadius.circular(5),
          selectedColor: Colors.white,
          fillColor: Colors.blue,
          //renderBorder: false,
          children: [
            Text('Option1'),
            Container(
            height: 50,
            width: 50,
            color: Colors.white,
            child: Text('Option2'),
          ), Text('Option3')],
          isSelected: [true, false, false],
          onPressed: (d) {},
        )

Answer 3

对我来说，Uros 的解决方案不起作用，因为边框存在问题，因为背景的一小部分在侧面闪耀......也许是因为我拉伸了 TabButton 的大小以适应父组件的大小。

The following works for me - returning this kind of Tab...:

  Widget getTabWidget(String title, double padding, bool isTabSelected){
    return isTabSelected
    ? new Text(title)
    : Container(width: double.infinity, height: double.infinity, color: Colors.red, child: Center(child: new Text(title)));
  }

这样生成：

...     
LayoutBuilder(builder: (context, constraints) {
        return ToggleButtons(

          constraints: BoxConstraints.expand(width: (constraints.maxWidth / 4) - (5/4), height: 45),

          children: [
            getTabWidget("Text 1", 5, _selections[0]),
            getTabWidget("Text 2", 5, _selections[1]),
            getTabWidget("Text 3", 5, _selections[2]),
            getTabWidget("Text 4", 5, _selections[3]),
          ],
          onPressed: (int index) {
            setState(() {

              _...
            });
          },
          isSelected: _selections,
        );
      }
      ),

Answer 4

把这个留给那些现在面临这个问题的人。 Flutter 引入了 SegmentedButton，它被认为是 ToggleButton 的替代品。

您可以使用

backgroundColor

属性中的

foregroundColor

和

style

分别为未选中选项的背景和文本着色。同样，您可以使用

selectedForegroundColor

和

selectedBackgroundColor

设置所选选项的背景和文本颜色。

以下是根据 SegementedButton 文档修改的一些示例代码：

enum Options { option1, option2, option3 }    
SegmentedButton(
      style: SegmentedButton.styleFrom(
        backgroundColor: Colors.grey[200], //unselected background color
        foregroundColor: Colors.black, //unselected text color
        selectedForegroundColor: Colors.white, //selected background color
        selectedBackgroundColor: Colors.blue, //selected text color
        shape: RoundedRectangleBorder(borderRadius:BorderRadius.circular(4.0)),
      ),
      segments: const <ButtonSegment<Options>>[
        ButtonSegment<Options>(
            value: Options.option1,
            label: Text('Option 1'),
            ),
        ButtonSegment<Options>(
            value: Options.option2,
            label: Text('Option 2'),
            ),
        ButtonSegment<Options>(
            value: Options.option3,
            label: Text('Option 3'),
            ),],
      selected: <Options>{option},
      onSelectionChanged: (Set<Options> newSelection) {
        setState(() {
          // By default there is only a single segment that can be
          // selected at one time, so its value is always the first
          // item in the selected set.
          option = newSelection.first;
        });
      },
    );