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

Posted 2023-02-23

【中文标题】如何设置颤动切换按钮小部件的宽度

【英文标题】：How to set width of the flutter togglebuttons widget

【发布时间】：2020-01-25 15:48:39

【问题描述】：

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

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,
          )

【参考方案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，因为我的页面有页面填充。你可以用你的设置来改变它。

这里的结果：

【参考方案2】：

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

Expand toggle buttons to parent container width

【参考方案3】：

Eyupaltindal 的答案仅在 Flutter beta 版（我使用的是 v1.12.13+hotfix.3）中对我有用，在 Flutter 最新版本 1.9.1 上，我无法更改 ToggleButtons 的子级填充或大小。可能在下一个 Flutter 版本中它会成为可能。

P.S.：对不起，我留下这条评论作为答案，只是因为我没有制作 cmets 所需的声誉级别。

【参考方案4】：

不要使用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】：

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

  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],
  ),

【参考方案6】：

一个干净的方法是使用BoxConstraints 属性为ToggleButtons。

要实现适合屏幕的方形按钮：

    // get your children to be displayed. Use 1 to compensate empty list case.
    final width = MediaQuery.of(context).size.width * 0.9 / max(1, children.length);

    return ToggleButtons(
      constraints: BoxConstraints(maxWidth: width, minWidth: width, minHeight: width, maxHeight: width),
      children: children,
      isSelected: selections,
    );

使用精确值调用 minWidth 和 maxWidth 将强制 Flutter 以所需宽度渲染项目。 minHeight 和 maxHeight 相同。

如果您不想要方形按钮，您可以为minHeight 和maxHeight 设置其他值（相同）。