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'),
),
)
【讨论】:
首先,如果您不打算使用除width
和height
之外的任何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(...),
)
使用MaterialButton
的minWidth
属性。
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 扩展以适应其父级的宽度