如何使按钮宽度匹配父母?

我想知道如何将宽度设置为匹配父布局宽度

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扩展视图到两个方向，我不知道如何做到这一点。

252819 次浏览
小开

经过一番研究，我找到了一些解决方案，感谢@Günter Zöchbauer，

我用了列而不是容器和

将属性设置为列CrossAxisAlignment.stretch，以填充匹配按钮的父属性

    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,
),
],
),
小开
最佳答案

更新:

在Flutter 2.0中，RaisedButton已弃用，并被ElevatedButton取代。你可以像这样使用minimumSize:

ElevatedButton(
style: ElevatedButton.styleFrom(
minimumSize: Size.fromHeight(40), // fromHeight use double.infinity as width and 40 is the height
),
onPressed: () {},
child: Text('Text Of Button'),
)

颤振小于2.0的旧答案:

正确的解决方案是使用SizedBox.expand小部件，它强制它的child与其父部件的大小匹配。

SizedBox.expand(
child: RaisedButton(...),
)

有很多选择，允许或多或少的定制:

SizedBox(
width: double.infinity,
// height: double.infinity,
child: RaisedButton(...),
)

或使用ConstrainedBox

ConstrainedBox(
constraints: const BoxConstraints(minWidth: double.infinity),
child: RaisedButton(...),
)
小开 
Container(
width: double.infinity,
child: RaisedButton(...),
),
小开

使用ListTile也可以，因为列表填充了整个宽度:

ListTile(
title: new RaisedButton(...),
),
小开 
 new SizedBox(
width: 100.0,
child: new RaisedButton(...),
)
小开

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

下面的代码为我工作

       ButtonTheme(
minWidth: double.infinity,
child: RaisedButton(child: Text("Click!!", style: TextStyle(color: Colors.white),), color: Colors.pink, onPressed: () {}))
小开

@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.
小开

最简单的方法是使用FlatButton包装在Container中，按钮默认接受其父按钮的大小，因此为Container分配所需的宽度。

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

输出:

enter image description here

小开

在上面给定的代码中给出match-parent宽度或高度的最简单方法。

...
width: double.infinity,
height: double.infinity,
...
小开

这对我很有用。

    SizedBox(
width: double.maxFinite,
child: RaisedButton(
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
child: new Text("Button 2"),
color: Colors.lightBlueAccent,
onPressed: () => debugPrint("Button 2"),
),
),
小开

对于match_parent，可以使用

SizedBox(
width: double.infinity, // match_parent
child: RaisedButton(...)
)

对于任何可以使用的特定值

SizedBox(
width: 100, // specific value
child: RaisedButton(...)
)
小开

这个方法对我很管用

width: MediaQuery.of(context).size.width-100,
小开

你可以用MaterialButton来实现

MaterialButton(
padding: EdgeInsets.all(12.0),
minWidth: double.infinity,
onPressed: () {},
child: Text("Btn"),
)
小开

您可以通过设置小部件的匹配父项

1)设置width为double.infinity: < / >强

new Container(
width: double.infinity,
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,
),
),

2)使用MediaQuery:

new Container(
width: MediaQuery.of(context).size.width,
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,
),
),
小开
< p > <代码> RaisedButton ( 孩子:行( mainAxisAlignment: MainAxisAlignment.center, 孩子们:文本(“提交”), ） ）

小开

最基本的方法是通过将容器的宽度定义为无穷大来使用容器。参见下面的代码示例

Container(
width: double.infinity,
child:FlatButton(
onPressed: () {
//your action here
},
child: Text("Button"),


)
)
小开 
         OutlineButton(
onPressed: () {
logInButtonPressed(context);
},
child: Container(
width: MediaQuery.of(context).size.width / 2,
child: Text(
“Log in”,
textAlign: TextAlign.center,
),
),
)

这样的东西对我很有用。

小开

用一个中心小部件包装您的(具有固定宽度的子小部件)。这将使你的小部件居中:

Center(child:Container(width:250,child:TextButton(child:Text("Button Name),),)
小开

在颤振2.0中，RaisedButton已弃用，并被ElevatedButton取代。

ElevatedButton小部件的minimumSize属性正是这样做的。

示例代码:

ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Colors.green,
onPrimary: Colors.white,
shadowColor: Colors.greenAccent,
elevation: 3,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0)),
minimumSize: Size(100, 40), //////// HERE
),
onPressed: () {},
child: Text('MyButton'),
)
小开

你可以将ButtonStyle的fixedSize.width设置为一个非常大的数字，比如double.maxFinite。如果你不想指定高度，你也可以使用Size.fromWidth()构造函数:

ElevatedButton(
child: const Text('Button'),
style: ElevatedButton.styleFrom(
fixedSize: const Size.fromWidth(double.maxFinite),
),
),

现场演示 .

小开

制作全宽按钮的方法有很多种。但我认为你应该理解在不同场景下制作全宽度小部件的概念:

当你使用嵌套小部件时，很难识别父小部件的宽度。简单地说，您不能在嵌套的小部件中指定宽度。所以你应该使用扩展或列与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 (Depreciated)或任何其他小部件。

干杯!

小开 
TextButton(
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(Colors.blue),
fixedSize: MaterialStateProperty.all(
Size(double.maxFinite, 50.0),
),
),
onPressed: () {},
child: Text('Upgrade to Premium'),
),
小开

试一试

Flexible(
child: Row(
children: [
ElevatedButton(
onPressed: () {},
child: Text("love you}"),
),
],
),
),

提交答案