我是Flutter的新手,所以我想知道如何设置宽度以匹配父布局宽度
new Container(
width: 200.0,
padding: const EdgeInsets.only(top: 16.0),
child: new RaisedButton(
child: new Text(
"Submit",
style: new TextStyle(
color: Colors.white,
)
),
colorBrightness: Brightness.dark,
onPressed: () {
_loginAttempt(context);
},
color: Colors.blue,
),
),
我对Expanded标签知之甚少,但Expanded扩展视图向两个方向,我不知道该怎么做。如果你知道,请帮助我,先谢谢你。
正确的解决方案是使用SizedBox.expand
小部件,该小部件强制执行其child
以匹配其父级的大小。
new SizedBox.expand(
child: new RaisedButton(...),
)
有许多替代方案,允许或多或少的定制:
new SizedBox(
width: double.infinity,
// height: double.infinity,
child: new RaisedButton(...),
)
或使用ConstrainedBox
new ConstrainedBox(
constraints: const BoxConstraints(minWidth: double.infinity),
child: new RaisedButton(...),
)
对于match_parent
你可以使用
SizedBox(
width: double.infinity, // match_parent
child: RaisedButton(...)
)
对于您可以使用的任何特定值
SizedBox(
width: 100, // specific value
child: RaisedButton(...)
)
new SizedBox(
width: 100.0,
child: new RaisedButton(...),
)
@ Mohit Suthar,
找到了匹配父级到宽度以及高度的最佳解决方案之一,如下所示
new Expanded(
child: new Container(
padding: EdgeInsets.all(16.0),
margin: EdgeInsets.all(16.0),
decoration: new BoxDecoration(
color: Colors.white,
borderRadius:
const BorderRadius.all(const Radius.circular(8.0)),
border: new Border.all(color: Colors.black, width: 1.0)),
child: new Text("TejaDroid")),
),
在这里你可以检查Expanded
控制器获得整个保持宽度和高度。
这对我来说是一个自包含的小部件。
Widget signinButton() {
return ButtonTheme(
minWidth: double.infinity,
child: new FlatButton(
onPressed: () {},
color: Colors.green[400],
textColor: Colors.white,
child: Text('Flat Button'),
),
);
}
// It can then be used in a class that contains a widget tree.
托盘double.infinity
宽度大小的盒子
new SizedBox(
width: double.infinity,
child: RaisedButton(...),
)
可以使用ButtonTheme
和minWidth: double.infinity
提供size属性
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'),
),
),
最简单的方法是使用包装在容器内的FlatButton,默认情况下,Button采用其父级的大小,因此为容器指定所需的宽度。
Container(
color: Colors.transparent,
width: MediaQuery.of(context).size.width,
height: 60,
child: FlatButton(
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(30.0),
),
onPressed: () {},
color: Colors.red[300],
child: Text(
"Button",
style: TextStyle(
color: Colors.black,
fontFamily: 'Raleway',
fontSize: 22.0,
),
),
),
)
上面的小部件产生以下输出
new Container {
width: double.infinity,
child: new RaisedButton(...),
}
经过一番研究,我发现了一些解决方案,感谢@GünterZöchbauer,
我使用了列而不是容器和
将属性设置为CrossAxisAlignment.stretch列以填充Button的匹配父级
new Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
new RaisedButton(
child: new Text(
"Submit",
style: new TextStyle(
color: Colors.white,
)
),
colorBrightness: Brightness.dark,
onPressed: () {
_loginAttempt(context);
},
color: Colors.blue,
),
],
),
这对我有用。
在上面给定代码中给出match-parent宽度或高度的最简单方法。
...
width: double.infinity,
height: double.infinity,
...
使用ListTile也可以工作,因为列表填充整个宽度:
new ListTile(
title: new RaisedButton(...),
),
以下代码适合我
ButtonTheme(
minWidth: double.infinity,
child: RaisedButton(child: Text("Click!!", style: TextStyle(color: Colors.white),), color: Colors.pink, onPressed: () {}))
这对我有用。
SizedBox(
width: double.maxFinite,
child: RaisedButton(
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
child: new Text("Button 2"),
color: Colors.lightBlueAccent,
onPressed: () => debugPrint("Button 2"),
),
),