Question

我尝试在容器内嵌套切换按钮，并为其自定义设置宽度，但没有成功

ToggleButtons(
            borderColor: Colors.deepOrangeAccent[100],
            fillColor: Colors.deepOrange[100],
            borderRadius: BorderRadius.circular(8.0),
            selectedBorderColor: Colors.deepOrange,

            children: <Widget>[
              new Row(children: <Widget>[new Icon(Icons.whatshot,size: 16.0,color: Colors.red,),new SizedBox(width: 4.0,), new Text("HOT",style: TextStyle(color: Colors.red),)],),
              new Row(children: <Widget>[new Icon(Icons.invert_colors,size: 16.0,color: Colors.yellow[800],),new SizedBox(width: 4.0,), new Text("WARM",style: TextStyle(color: Colors.yellow[800]))],),
              new Row(children: <Widget>[new Icon(Icons.ac_unit,size: 16.0,color: Colors.blue,),new SizedBox(width: 4.0,), new Text("COLD",style: TextStyle(color: Colors.blue))],),
            ],
            onPressed: (int index) {
              setState(() {
                EnquiryModel.instance.setStatus(index.toString());
                for (int buttonIndex = 0; buttonIndex < isSelected.length; buttonIndex++) {
                  if (buttonIndex == index) {
                    isSelected[buttonIndex] = true;
                  } else {
                    isSelected[buttonIndex] = false;
                  }
                }
              });
            },
            isSelected: isSelected,
          )

Answer 1

我知道我的答案不是很好的解决方案，但是可以。

children: <Widget>[
    Container(width: (MediaQuery.of(context).size.width - 36)/3, child: new Row(mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[new Icon(Icons.whatshot,size: 16.0,color: Colors.red,),new SizedBox(width: 4.0,), new Text("HOT",style: TextStyle(color: Colors.red),)],)),
    Container(width: (MediaQuery.of(context).size.width - 36)/3, child: new Row(mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[new Icon(Icons.invert_colors,size: 16.0,color: Colors.yellow[800],),new SizedBox(width: 4.0,), new Text("WARM",style: TextStyle(color: Colors.yellow[800]))],)),
    Container(width: (MediaQuery.of(context).size.width - 36)/3, child: new Row(mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[new Icon(Icons.ac_unit,size: 16.0,color: Colors.blue,),new SizedBox(width: 4.0,), new Text("COLD",style: TextStyle(color: Colors.blue))],)),
]

我减少了36，因为我的页面有页面填充。您可以通过设置进行更改。

结果：

Answer 2

要动态设置父窗口小部件的宽度，可以使用LayoutBuilder。在附件的链接中，您将找到更干净的解决方案。

Expand toggle buttons to parent container width

Answer 3

Eyupaltindal答案仅在Flutter beta版（我正在使用v1.12.13 + hotfix.3）中有效，在Flutter最新发行版1.9.1上，我无法更改ToggleButtons的子填充或大小。可能会在Flutter的下一个发行版中实现。

P.S .：对不起，我留下这条评论作为答案，只是因为我没有必要的声誉水平才能发表评论。

Answer 4

我写了一个这样的函数来计算宽度

  double _buttonWidth(BuildContext context) {
final maxWidth = 120.0;
final buttonCount = 3;

final width = (MediaQuery.of(context).size.width - 100) / buttonCount;
if (width < maxWidth) {
  return width;
} else {
  return maxWidth;
}

}

用法：

  ToggleButtons(
    children: <Widget>[
      Container(
        alignment: Alignment.center,
        width: _buttonWidth(context),
        child: Text('Yes'),
      ),
      Container(
        alignment: Alignment.center,
        width: _buttonWidth(context),
        child: Text('No'),
      ),
      Container(
        alignment: Alignment.center,
        width: _buttonWidth(context),
        child: Text('I dont know'),
      ),
    ],
    onPressed: (int index) {},
    isSelected: [false, true, false],
  ),

Answer 5

不要使用 Container，而是使用 BoxConstraints。

ToggleButtons(
    children: <Widget>[
        Row(children: <Widget>[Icon(Icons.whatshot, size: 16.0, color: Colors.red), SizedBox(width: 4.0), Text('HOT', style: TextStyle(color: Colors.red))]),
        Row(children: <Widget>[Icon(Icons.invert_colors, size: 16.0, color: Colors.yellow[800]), SizedBox(width: 4.0), Text('WARM', style: TextStyle(color: Colors.yellow[800]))]),
        Row(children: <Widget>[Icon(Icons.ac_unit, size: 16.0, color: Colors.blue), SizedBox(width: 4.0), Text('COLD', style: TextStyle(color: Colors.blue))]),
    ],
    constraints: BoxConstraints(minWidth: (MediaQuery.of(context).size.width - 36) / 3),
    isSelected: isSelected,
)

如何设置颤动切换按钮小部件的宽度

5 个答案: