如何让 Flutter 按钮尽可能宽到最大宽度？

Posted 2023-02-23

【中文标题】如何让 Flutter 按钮尽可能宽到最大宽度？

【英文标题】：How to have a Flutter button be as wide as possible up to a maximum width?

【发布时间】：2020-02-16 18:18:10

【问题描述】：

在以下布局中，我希望按钮能够在屏幕上尽可能宽，达到最大宽度。我尝试了以下方法，但不起作用（按钮总是尽可能宽）：

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 像素宽。

【参考方案1】：

您可以删除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',
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
      );

【讨论】：

我认为这行不通：按钮没有展开尽可能宽（例如，如果 maxWidth 设置为较大的值）。

什么意思？您可以将maxWidth 设置为任何值（甚至例如double.maxFinite），并且按钮将拉伸到该值（或拉伸到屏幕宽度）。

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

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

它看起来和你的截图一模一样。

【参考方案2】：

您可以将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 小部件将只占用与其自身大小相同的空间。

【讨论】：

这不允许我指定最大宽度 - 无论屏幕有多宽，按钮都会扩展为与屏幕一样宽。

在您修改后的答案中，按钮不再增长，无论您设置的值有多大maxWidth

尝试将 RaisedButton 包装在 Expanded 小部件中。这会给出正确的结果吗？

恐怕不行。

【参考方案3】：

解决方案非常简单，只需将ConstrainedBox 包装在Align 中，而不是使用maxWidth 使用minWidth。

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

输出：

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

如果屏幕宽度

【参考方案4】：

首先用容器包裹并添加宽度到无穷大以响应：

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

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