如何使按钮的宽度与父元素匹配？

15 浏览
0 Comments

如何使按钮的宽度与父元素匹配？

我想知道如何设置一个宽度来匹配父布局的宽度

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

admin 更改状态以发布 2023年5月22日
0

2 答案

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

（翻译成中文：粗体123）

0
0 Comments

更新：

使用 Flutter 2.0 之后，RaisedButton 被弃用并替换为 ElevatedButton，可以像这样使用 minimumSize：

ElevatedButton(
  style: ElevatedButton.styleFrom(
    minimumSize: Size.fromHeight(40), // fromHeight use double.infinity as width and 40 is the height
  ),
  onPressed: () {},
  child: Text('Text Of Button'),
)

对于 Flutter 2.0 以前的版本，正确的解决方案是使用 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(...),
)

0