首页 文章

按钮宽度匹配父级：颤动

提问于
浏览 次
6

我是 Flutter 的新手，所以我想知道如何设置宽度为 match parent 布局宽度

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 标签知之甚少，但扩展了两个方向的扩展视图，我不知道该怎么做 . 如果你知道，请帮助我，先谢谢你 .

dart flutter flutter-layout

9 回答

  • 0

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

    可以使用 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: SidedBox.expand(
      width: double.infinity, 
      child: Text('Raised Button'),
    ),
  ),
    回复于
  • 1
    new Container {
         width: double.infinity,
         child: new RaisedButton(...),
    }
    回复于
  • 5

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

    new ListTile(
              title: new RaisedButton(...),
),
    回复于
  • 1
    new SizedBox(
  width: 100.0,
     child: new RaisedButton(...),
)
    回复于
  • 0

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

    以下代码适合我

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

    @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 Controller acquire whole 是否为 width 和 height .

    回复于
  • 4

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

    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.
    回复于

相关问题