flutter - 水平模式下的 Flutter ButtonBar 似乎不尊重 MainAxisSize

Question

我想使用颤振的 ButtonBar，因为当设备的宽度不够时自动拥有一列的好功能。但是，我也想使用 MainAxisSize.min，但我无法让它在水平模式下使用 MainAxisSize.min（wrt 宽度）。请参见下面的示例。

Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Container(
              decoration: BoxDecoration(border: Border.all()),
              child: ButtonBar(
                mainAxisSize: MainAxisSize.min,
                children: <Widget>[
                  FlatButton(
                    child: Text('short'),
                    color: Colors.blueAccent,
                    onPressed: () => {},
                  ),
                  FlatButton(
                    child: Text('short'),
                    color: Colors.blueAccent,
                    onPressed: () => {},
                  ),
                ],
              ),
            ),
            Container(
              decoration: BoxDecoration(border: Border.all()),
              child: ButtonBar(
                mainAxisSize: MainAxisSize.min,
                children: <Widget>[
                  FlatButton(
                    child: Text('loooooooooooooooooong'),
                    color: Colors.blueAccent,
                    onPressed: () => {},
                  ),
                  FlatButton(
                    child: Text('loooooooooooooooooong'),
                    color: Colors.blueAccent,
                    onPressed: () => {},
                  ),
                ],
              ),
            ),
          ],
        ),

我得到了什么

我想要的是

标签： flutter

Answer 1

一个可能的解决方案是使用Wrap类而不是ButtonBar. 您必须使用 Center 小部件包装 Container 为布局添加一些填充，然后您就可以走了：

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    Container(
      decoration: BoxDecoration(border: Border.all()),
      child: ButtonBar(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          FlatButton(
            child: Text('short'),
            color: Colors.blueAccent,
            onPressed: () => {},
          ),
          FlatButton(
            child: Text('short'),
            color: Colors.blueAccent,
            onPressed: () => {},
          ),
        ],
      ),
    ),
    Center(
      child: Container(
        decoration: BoxDecoration(border: Border.all()),
        padding: EdgeInsets.all(10),
        child: Wrap(
          //alignment: MainAxisAlignment.center,
          //mainAxisSize: MainAxisSize.max,
          children: <Widget>[
            FlatButton(
              child: Text('looooooooooooooooooooooooong'),
              color: Colors.blueAccent,
              onPressed: () => {},
            ),
            FlatButton(
              child: Text('looooooooooooooooooooooooong'),
              color: Colors.blueAccent,
              onPressed: () => {},
            ),
          ],
        ),
      ),
    ),
  ],
),