如何使按钮宽度与父级匹配？答案

【问题标题】：How to make button width match parent?如何使按钮宽度与父级匹配？
【发布时间】：2018-10-05 11:05:52
【问题描述】：

我想知道如何设置宽度以匹配父级布局宽度

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

我对@987654322@ 小部件了解一点，但Expanded 将视图扩展到两个方向，我不知道该怎么做。

【问题讨论】：

也许是一个列？
是的，我附加列而不是容器，但按钮的宽度是 Wrap Content 如何将宽度拉伸到父项
您可以简单地使用 FlatButton 并将其包装在容器中，然后使用 mediaquery 将容器的宽度添加到屏幕宽度，在下面查找我的答案

标签： flutter flutter-layout

【解决方案1】：

更新：

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

Flutter 低于 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(...),
)

【讨论】：

SizedBox.expand 将使按钮具有全宽和全高，这不是问题所在。问题是关于仅覆盖全宽而不是高度的按钮。
@RémiRousselet Vinoth 的评论有效。既然这是现在公认的答案，您能否为 SizedBox 添加正确的构造函数以专门仅扩展宽度？
我收到此错误Failed assertion: line 1645 pos 12: '!_debugDoingThisLayout': is not true.
为什么我们不能像这样改变容器的宽度：Container(width: double.infinity) 而不是用另一个像 SizedBox 这样的小部件来包装它。它更易于阅读并带来相同的结果。

【解决方案2】：

有很多方法可以制作全宽按钮。但我觉得你应该明白在不同场景下制作全宽小部件的概念：

当您使用嵌套小部件时，很难识别父小部件的宽度。只是您不能在嵌套小部件中指定宽度。所以你应该使用 Expanded 或 Column with CrossAxisAlignment 作为 Strech。

在其他情况下，您可以使用媒体查询宽度或 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) 或任何其他小部件。

干杯！

【讨论】：

【解决方案3】：

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

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

Live Demo

【讨论】：

【解决方案4】：

您可以使用 MaterialButton

做到这一点

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

【讨论】：

【解决方案5】：

在上面给定的代码中给出匹配父级宽度或高度的最简单方法。

...
width: double.infinity,
height: double.infinity,
...

【讨论】：

【解决方案6】：

您可以通过以下方式设置小部件的匹配父级

1) 将宽度设置为 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,
          ),
        ),

【讨论】：

您在“MediaLQuery”中有错字，我无法编辑单个字符 ;)

【解决方案7】：

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

【讨论】：

【解决方案8】：

用中心小部件包裹您的（具有固定宽度的子小部件）。这将使您的小部件居中：

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

【讨论】：

【解决方案9】：

Container(
  width: double.infinity,
  child: RaisedButton(...),
),

【讨论】：

【解决方案10】：

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

这样的东西对我有用。

【讨论】：

【解决方案11】：

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

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

    )
)

【讨论】：

【解决方案12】：

RaisedButton( child: Row( mainAxisAlignment: MainAxisAlignment.center, children: [Text('Submit')], ) ) 它对我有用。

【讨论】：

【解决方案13】：

这个对我有用

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

【讨论】：

【解决方案14】：

使用ListTile 也可以，因为列表会填满整个宽度：

ListTile(
  title: new RaisedButton(...),
),

【讨论】：

【解决方案15】：

最简单的方法是使用 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,
                      ),
                    ),
                  ),
                )

输出：

【讨论】：

【解决方案16】：

对于match_parent，您可以使用

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

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

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

【讨论】：

【解决方案17】：

这对我有用。

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

【讨论】：

【解决方案18】：

可以使用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'),
  ),
),

【讨论】：

【解决方案19】：

这在一个独立的小部件中对我有用。

  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.

【讨论】：

【解决方案20】：

@Mohit Suthar，

找到了 match parent 到 width 以及 height 的最佳解决方案之一，如下所示

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控制器acquire whole保持width和height。

【讨论】：

【解决方案21】：

以下代码对我有用

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

【讨论】：

【解决方案22】：

 new SizedBox(
  width: 100.0,
     child: new RaisedButton(...),
)

【讨论】：

【解决方案23】：

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

我用 column 而不是 Container 和

将属性设置为列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,
                ),
              ],
            ),

【讨论】：

Column/Row 不应用于单子布局。请改用单子选项。如Align、SizedBox 等。