按钮宽度匹配父级

Question

我想知道，如何才能将宽度设置为 匹配父母 版面宽度

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 我不知道怎么做，我想知道如何设置一个宽度来匹配父布局的宽度new Container( width: 200.0, padding: const EdgeInsets.only(top: 16.0, child: new ...

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

大小属性可以使用 ButtonTheme 与 minWidth: double.infinity

ButtonTheme(
  minWidth: double.infinity,
  child: MaterialButton(
    onPressed: () {},
    child: Text('Raised Button'),
  ),
),

或之后 https:/github.comflutterflutterpull19416 落地

MaterialButton(
  onPressed: () {},
  child: SizedBox.expand(
    width: double.infinity, 
    child: Text('Raised Button'),
  ),
),

Answer 3

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

输出。

Answer 4

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

Answer 5

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

Answer 6

这个 奏效 对我来说。

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

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

Answer 7

对于 match_parent 你可以用

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

对于任何一个特定的值，你可以使用

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

Answer 8

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

1) 设置宽度为 双.无穷大 :

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 9

@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 10

以下代码对我有用

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

Answer 11

在一个自带的小部件中，这对我来说是有效的。

  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 12

这对我来说是可行的。

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

Answer 13

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

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

Answer 14

这个对我很有用

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

Answer 15

你可以这样做 材料按钮

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

Answer 16

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

Answer 17

RaisedButton(
  child: Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [Text('Submit')],
  )
)

对我来说是可行的。

Answer 18

最基本的方法是使用Container，将其宽度定义为无限大。请看下面的代码示例

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

    )
)

Answer 19

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

这样的东西对我来说很有用。

Answer 20

把你的 RaisedButton(...) 在...中 SizedBox

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