Question

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

我对扩展标记知之甚少，但扩展了两个方向的扩展视图，我不知道该怎么做。如果你知道，请帮助我，先谢谢。

Answer 1

正确的解决方案是使用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(...),
)

Answer 2

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

Answer 3

    new Container {
         width: double.infinity,
         child: new RaisedButton(...),
    }

Answer 4

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

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: MedialQuery.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,
          ),
        ),

Answer 5

最简单的方法是使用包装在容器内的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,
                      ),
                    ),
                  ),
                )

上面的小部件产生以下输出

Answer 6

经过一番研究，我发现了一些解决方案，感谢@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,
                ),
              ],
            ),

Answer 7

这个对我有用。

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

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

Answer 8

在 Flutter 2.0 中，RaisedButton 已被弃用并由 ElevatedButton 取代。

minimumSize 小部件的

ElevatedButton 属性正是这样做的。

示例代码：

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

Answer 9

将您的RaisedButton(...)放在SizedBox

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

Answer 10

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

类似的东西对我有用。

Answer 11

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

path

Answer 12

您可以使用 MaterialButton

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

Answer 13

对于match_parent，您可以使用

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

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

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

Answer 14

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

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

Answer 15

用纸盘double.infinity调整尺寸框的宽度

new SizedBox(
  width: double.infinity,
  child: RaisedButton(...),
)

Answer 16

这个为我工作

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

Answer 17

这对我有用。

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

Answer 18

这对我来说是一个自包含的小部件。

  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.

Answer 19

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

Answer 20

@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控制器整个获取是否保持宽度和高度。

Answer 21

以下代码对我有用

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

Answer 22

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

Answer 23

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

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

按钮宽度匹配父级：颤动

23 个答案:

1）将宽度设置为 double.infinity ：

2）使用MediaQuery：