按钮宽度匹配父级:颤动

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

我对Expanded标签知之甚少,但Expanded扩展视图向两个方向,我不知道该怎么做.如果你知道,请帮助我,先谢谢你.

Answer 1

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

Answer 2

可以使用ButtonThemewith 提供size属性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'),
  ),
),

Answer 3

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

Answer 4

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

经过研究，我找到了解决方案，并感谢@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 6

为match_parent您可以使用

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

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

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

Answer 7

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

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）使用媒体查询：

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

Answer 8

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

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

Answer 9

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

当您使用嵌套小部件时，很难识别父小部件的宽度。只是您无法在嵌套小部件中指定宽度。因此，您应该使用 Expanded 或 Column，并使用 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)或任何其他小部件。

干杯!

Answer 10

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

在这里您可以检查ExpandedController 是否获得了整个剩余宽度和高度。