颤动:如何使按钮扩展到它的父级大小？

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

 ....

我把Row改为Column的地方.按钮将垂直展开,但不会水平展开,而容器将同时展开.

有没有办法让我的按钮扩展到垂直和水平适合他们的父母？

Answer 1

将crossAxisAlignment属性添加到您的Row;

crossAxisAlignment: CrossAxisAlignment.stretch

Answer 2

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

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

Answer 3

包装用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 4

你也可以尝试一下

1. 使用SizedBox

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

2. 使用MaterialButton的minWidth财产。

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

Answer 5

我们可以添加 Button insider Container。

解决方案：

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

Answer 6

您可以在 child:column 下插入

crossAxisAlignment：CrossAxisAlignment.stretch

我的代码

我的结果