Flutter：如何使按钮扩展到其父按钮的大小？

Question

我正在尝试创建方形按钮，但 Expanded 的工作方式似乎与容器不同。以下面的代码为例

new Expanded(
 flex: 2,
   child: new Column(
     children: <Widget>[
       new Expanded(
         child:new Row(
           children: <Widget>[
             new Expanded(child: new MaterialButton(...)),
             new Expanded(child: new MaterialButton(....)),

             new Expanded(child: new Container(color: Colors.red)),
             new Expanded(child: new Container(color: Colors.green)),
           ]
         )
       )
     ],
   )
 )

 ....

它显示两个水平展开但不是垂直展开的按钮。同时，容器将水平和垂直扩展。如果我执行以下操作，则会出现相同的效果：

new Expanded(
 flex: 2,
   child: new Column(
     children: <Widget>[
       new Expanded(
         child:new Column(
           children: <Widget>[
             new Expanded(child: new MaterialButton(...)),
             new Expanded(child: new MaterialButton(....)),

             new Expanded(child: new Container(color: Colors.red)),
             new Expanded(child: new Container(color: Colors.green)),
           ]
         )
       )
     ],
   )
 )

 ....

我已将行更改为列。按钮会垂直展开，但不会水平展开，而容器会同时展开。

有没有办法让我的按钮展开以在垂直和水平方向上都适合它们的父按钮？

Answer 1

将 crossAxisAlignment 属性添加到您的 Row;

crossAxisAlignment: CrossAxisAlignment.stretch

Answer 2

用 ButtonTheme 和 minWidth: double.infinity 包装允许提供约束

ButtonTheme(
  minWidth: double.infinity,
  child: MaterialButton(
    onPressed: () {},
    child: Text('Raised Button'),
  ),
),

或https://github.com/flutter/flutter/pull/19416落地后

  MaterialButton(
    onPressed: () {},
    child: SizedBox.expand(
      width: double.infinity, 
      child: Text('Raised Button'),
    ),
  ),

Answer 3

你也可以试试

使用SizedBox

SizedBox(
  width: double.maxFinite, // set width to maxFinite
  child: RaisedButton(...),
)

使用 MaterialButton 的 minWidth 属性。

MaterialButton(
  minWidth: double.maxFinite, // set minWidth to maxFinite
  color: Colors.blue,
  onPressed: () {},
  child: Text("Button"),
)

Answer 4

我们可以在Container里面添加Button。

解法：

Container(
            width: double.infinity,
            child: RaisedButton(
              onPressed: null,
              child: Text('NEXT'),
            ),
          )

Answer 5

您可以在child:column

下插入

横轴对齐：CrossAxisAlignment.stretch

我的代码

我的结果

Answer 6

在 Flutter 2.+ 中考虑这个解决方案：


ElevatedButton(
  style: ElevatedButton.styleFrom(
    minimumSize: const Size(double.infinity, double.infinity), // <--- this line helped me
  ),
  onPressed: () {},
  child: Icon(
    Icons.keyboard_return
  ),
)

Answer 7

MaterialButton(
          minWidth: MediaQuery.of(context).size.width, // set minWidth to width of the device screen
          onPressed: () {},
          child: Text("Button"),
        )

供参考https://api.flutter.dev/flutter/widgets/MediaQuery-class.html

Answer 8

VisualDensity 就是您要找的东西。将其添加到 ButtonStyle 对象。

ElevatedButton(
  style: const ButtonStyle(
    visualDensity: VisualDensity(
      horizontal: VisualDensity.maximumDensity,
      vertical: VisualDensity.maximumDensity,
    ),
  ),
  ...
),

Flutter：如何使按钮扩展到其父按钮的大小？

Flutter: How to make a button expand to the size of its parent?

flutter

flutter-layout