如何使 Flutter 按钮尽可能宽，但不超过最大宽度？

Question

在以下布局中，我希望按钮能够在屏幕上尽可能地扩展到最大宽度，但不超过最大宽度。我已经尝试了以下方式，但并没有成功（按钮始终尽可能宽）：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SafeArea(
          child: Center(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [
                TextFormField(),
                TextFormField(),
                ConstrainedBox(
                  constraints: BoxConstraints(maxWidth: 200),
                  child: RaisedButton(child: Text("button"), onPressed: () {}),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

关于我需要的布局，我希望按钮的宽度与以下两个数量中较小的一个相同：1）屏幕的宽度，2）给定的最大固定宽度。

示例场景：

A）屏幕宽度为1000像素，给定的最大固定宽度为600像素，则按钮的宽度将为600像素。

B）屏幕宽度为400像素，给定的最大固定宽度为600像素，则按钮的宽度将为400像素。

- Matt R

Answer 1

解决方案很简单，只需将你的ConstrainedBox包裹在Align中，而不是使用maxWidth，可以使用minWidth。

Align(
  child: ConstrainedBox(
    constraints: BoxConstraints(minWidth: 200),
    child: RaisedButton(child: Text("button"), onPressed: () {}),
  ),
)

输出：

• 如果屏幕宽度 > 200，按钮占用 200 的宽度

• 如果屏幕宽度 < 200，按钮占用屏幕宽度

- CopsOnRoad

Answer 2

你可以删除 crossAxisAlignment: CrossAxisAlignment.stretch，因为 TextFormField 已经自动拉伸了。这段代码会让按钮的宽度达到最大宽度，但不会超过屏幕宽度：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) => MaterialApp(
        home: Scaffold(
          body: SafeArea(
            child: Center(
              child: Column(
                children: [
                  TextFormField(),
                  TextFormField(),
                  Container(
                    width: 200,
                    child: RaisedButton(
                      onPressed: () {},
                      child: Text('button'),
                    ),
                  ),
                  Container(
                    width: 200,
                    child: RaisedButton(
                      onPressed: () {},
                      child: Text(
                        'Button with long text asf sadf sdf as df s df as '
                        'dfas dfsd f asfauhiusg isdugfisudgfi asudgk usgkdu'
                        'ksdfhk sudfhk sudhfk',
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
      );
}

- Kirill Bubochkin

---

我认为那样行不通：按钮不会扩展到尽可能宽（例如，如果将maxWidth设置为一个大值）。 - Matt R

你的意思是什么？你可以将 maxWidth 设置为任何值（甚至是 double.maxFinite），按钮将会延伸到这个值（或屏幕宽度）。 - Kirill Bubochkin

在您的代码中，即使使用了 double.maxFinite，按钮也不会拉伸。 - Matt R

你能分享一下它的截图吗？ - Kirill Bubochkin

它看起来与您的屏幕截图完全一样。 - Matt R

Answer 3

您可以将RaisedButton放在Row中：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SafeArea(
          child: Center(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [
                TextFormField(),
                TextFormField(),
                ConstrainedBox(
                  constraints: BoxConstraints(maxWidth: 250),
                  child: Row(
                    children: <Widget>[
                      Expanded(
                        child: RaisedButton(child: Text('test')),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Row会创建一行水平布局，而RaisedButton小部件只会占用自身大小的空间。

- jurrdb

---

这并不允许我指定最大宽度 - 按钮将扩展为屏幕的宽度，无论屏幕有多宽。 - Matt R

在你修改过的答案中，无论你将maxWidth设置为多大的值，按钮都不会再继续增长了。 - Matt R

尝试将RaisedButton包装在Expanded小部件中。这样是否会得到正确的结果？ - jurrdb

很抱歉，不行。 - Matt R

Answer 4

首先用容器包装并将宽度设置为无限以实现响应式：

Container(
  width: double.infinity,
  child: ElevatedButton(
  child: Text("button"), 
  onPressed: (){}
),
),

你也可以添加填充..已知RaisedButton已被弃用并迁移到ElevatedButton..

- Yusuf Amr