按钮宽度匹配父项


119

我想知道如何设置宽度以匹配父版面宽度

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将视图扩展到两个方向,我不知道该怎么做。


1
也许改为专栏?
君特Zöchbauer

是的,我附加了列而不是容器,但是按钮的宽度是自动换行内容如何将宽度拉伸到父对象
Mohit Suthar'Aug

您可以简单地使用FlatButton并将其包装在容器中,然后使用mediaquery在下面找到我的答案的方式将容器的宽度增加到屏幕宽度
maheshmnj

Answers:


263

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

31
SizedBox.expand将使按钮具有完整的宽度和高度,这不是问题。问题是关于一个仅覆盖全宽度而不覆盖高度的按钮。
Vinoth Kumar

3
@RémiRousseletVinoth的评论有效。由于这是现在公认的答案,您可以为SizedBox添加正确的构造函数以专门扩展宽度吗?
user823447 '19

我收到此错误Failed assertion: line 1645 pos 12: '!_debugDoingThisLayout': is not true.
kapsid

寻求解决方案的人
Ajay Kumar

我喜欢双向回答,它更完整。
雷电核心



24

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

输出:

在此处输入图片说明


17

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

8
Column/ Row不应用于单子布局。请改用单子代。比如AlignSizedBox和类似。
罗米·罗素(RémiRousselet)

4

@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是否获得整个剩余的宽度高度


1
到目前为止,这是最好的解决方案
M David

4

这个工作对我来说。

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

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

4

match_parent您使用

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

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

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

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

1

以下代码对我有用

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

1

这在一个自包含的小部件中为我工作。

  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.

1

这对我有用。

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

1

ListTile由于列表填充了整个宽度,因此也可以使用a :

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

1

你可以用MaterialButton做到这一点

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


0

这个为我工作

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

0

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


0

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

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

    )
)

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

这样的事情对我有用。


0

将您RaisedButton(...)放在SizedBox

SizedBox(
  width: double.infinity,
  child: RaisedButton(...),
)
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.