我想知道如何设置一个宽度，以匹配父布局宽度
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,
),
),
我知道一点点关于扩展小部件，但扩展扩展视图到两个方向，我不知道如何做到这一点。
当前回答
制作全宽按钮的方法有很多种。但我认为你应该理解在不同场景下制作全宽度小部件的概念:
当你使用嵌套小部件时，很难识别父小部件的宽度。简单地说，您不能在嵌套的小部件中指定宽度。所以你应该使用扩展或列与CrossAxisAlignment拉伸。
在其他情况下，您可以使用媒体查询宽度或double.infinity。
这里有一些嵌套小部件和单个小部件的例子:
第一:
Expanded( // This will work for nested widgets and will take width of first parent widget.
child: MaterialButton(
onPressed: () {},
child: const Text("Button Text"),
color: Colors.indigo,
textColor: Colors.white,
)
)
第二:
Column( // This will not work if parent widget Row.
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
MaterialButton(
onPressed: () {},
child: const Text("Button Text"),
color: Colors.indigo,
textColor: Colors.white,
)
]
)
第三:
ButtonTheme( // if use media query, then will not work for nested widgets.
minWidth: double.infinity, //Or use 'width: MediaQuery.of(context).size.width'
child: MaterialButton(
onPressed: () {},
child: const Text("Button Text"),
color: Colors.indigo,
textColor: Colors.white,
)
)
出:
SizedBox( // if use media query, then will not work for nested widgets.
width: double.infinity, //Or use 'width: MediaQuery.of(context).size.width'
child: MaterialButton(
onPressed: () {},
child: const Text("Button Text"),
color: Colors.indigo,
textColor: Colors.white,
)
)
第五:
Container( // if use media query, then will not work for nested widgets.
width: double.infinity, //Or use 'width: MediaQuery.of(context).size.width'
child: MaterialButton(
onPressed: () {},
child: const Text("Button Text"),
color: Colors.indigo,
textColor: Colors.white,
)
)
从我的角度来看，推荐的将是第一个。你也可以改变MaterialButton为ElevatedButton或TextButton或RaisedButton(折旧)或任何其他小部件。
干杯!
其他回答
你可以用MaterialButton来做
MaterialButton(
padding: EdgeInsets.all(12.0),
minWidth: double.infinity,
onPressed: () {},
child: Text("Btn"),
)
RaisedButton ( 孩子:行( mainAxisAlignment: MainAxisAlignment.center, 孩子们:文本(“提交”), ） ） 这对我很管用。
最简单的方法是使用一个包装在容器中的FlatButton，默认情况下，按钮接受其父的大小，并为容器分配所需的宽度。
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,
),
),
),
)
输出:
size属性可以使用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'),
),
),
对于match_parent，您可以使用
SizedBox(
width: double.infinity, // match_parent
child: RaisedButton(...)
)
对于任何可以使用的特定值
SizedBox(
width: 100, // specific value
child: RaisedButton(...)
)
