Flutter:如何使按钮扩展到其父级的大小?

Posted

技术标签:

【中文标题】Flutter:如何使按钮扩展到其父级的大小?【英文标题】:Flutter: How to make a button expand to the size of its parent? 【发布时间】:2018-09-16 09:06:13 【问题描述】:

我正在尝试创建方形按钮,但 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)),
           ]
         )
       )
     ],
   )
 )

 ....

我将行更改为列的位置。按钮将垂直扩展,但不会水平扩展,而容器将同时进行。

有没有办法让我的按钮在垂直和水平方向上展开以适应其父级?

【问题讨论】:

【参考方案1】:

VisualDensity 是您正在寻找的东西。将其添加到 ButtonStyle 对象。

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

【讨论】:

【参考方案2】:
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

【讨论】:

【参考方案3】:

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


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

【讨论】:

【参考方案4】:

你可以在 child:column 下插入

crossAxisAlignment: CrossAxisAlignment.stretch

我的代码

我的结果

【讨论】:

【参考方案5】:

我们可以添加Button insider Container。

解决方案:

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

【讨论】:

首先,如果您不打算使用除widthheight 之外的任何Container 属性,则应始终使用SizedBox 而不是Container。其次,不要直接跳到double.infinity,你应该试试double.maxFinite,我暂时想不出例子,但是double.infinity有时会给你带来麻烦。 查看这个关于差异的信息。我认为应该使用 double.infinite。 ***.com/questions/61706455/…【参考方案6】:

你也可以试试

    使用SizedBox

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

    使用MaterialButtonminWidth 属性。

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

【讨论】:

【参考方案7】:

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

【讨论】:

【参考方案8】:

crossAxisAlignment 属性添加到您的Row

crossAxisAlignment: CrossAxisAlignment.stretch

【讨论】:

同时考虑 SizedBox

以上是关于Flutter:如何使按钮扩展到其父级的大小?的主要内容,如果未能解决你的问题,请参考以下文章

如何在我的 Android 应用程序中使视图填充其父级的整个宽度?

iOS 自动布局 - 当您想让视图拉伸到其父级的完整大小时,正确的方法是啥?

如何使用 Tailwind 在 Flexbox 中阻止子 div 扩展以适应其父级的宽度

响应式布局:调整 SVG 大小以填充其父级的剩余空间

如何使 SingleChildScrollView 中的 Wrap 小部件子级在 Flutter 中扩展到全高?

跨浏览器方法使子 div 适合其父级的宽度