在Flutter中创建2个并排的按钮。

huangapple
go评论65阅读模式
英文:

Create 2 side-by-side buttons in Flutter

问题

Sure, here's the translation of the code part you provided:

我有一个布局，想要构建以下布局：

```dart
+-------------------------------+ # 包装在 Scaffold 中
|           按钮 1             |
+-------------------------------+
SizedBox(height: 15)
+-------------------------------+
|           按钮 2             |
+-------------------------------+
SizedBox(height: 15)
+-------------------------------+
|           按钮 3             |
+-------------------------------+
SizedBox(height: 15)
+-------------+ +---------------+ # 包装在 Wrap 中
|   按钮 4    | |   按钮 5      |
+-------------+ +---------------+
Spacer()

所有的按钮都是 ElevatedButton。以下是相关的 Scaffold 正文部分（我只显示相关的部分）：

return Scaffold(
    appBar: AppBar(...), // 省略
    body: SafeArea(
        minimum: const EdgeInsets.all(16.0),
        child: Center(
            child: Column(
                mainAxisSize: MainAxisSize.max,
                mainAxisAlignment: MainAxisAlignment.start,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                    ElevatedButton(), // 按钮 1
                    SizedBox(height: 15),
                    ElevatedButton(), // 按钮 2
                    SizedBox(height: 15),
                    ElevatedButton(), // 按钮 3
                    SizedBox(height: 15),
                    Wrap(
                        children: [
                            ElevatedButton(style: ButtonStyle(
                                minimumSize: MaterialStateProperty.all<Size>(Size(MediaQuery.of(context).size.width * 0.5, 50)),
                            )), // 按钮 4
                            ElevatedButton(style: ButtonStyle(
                                minimumSize: MaterialStateProperty.all<Size>(Size(MediaQuery.of(context).size.width * 0.5, 50)),
                            )), // 按钮 5
                        ]
                    ),
                ]
            )
        )

目前，使用 Wrap 时，布局变成了：

+-------------------------------+
|           按钮 1             |
+-------------------------------+

+-------------------------------+
|           按钮 2             |
+-------------------------------+

+-------------------------------+
|           按钮 3             |
+-------------------------------+

+-------------+
|   按钮 4    |
+-------------+
+-------------+
|   按钮 5    |
+-------------+
Spacer()

我尝试用 Row 替换 Wrap，但它显示出 A RenderFlex overflowed by 32 pixels on the right.。我知道这是由于每一侧的 Safe Area 导致的。是否有一种方法可以让布局自动计算每个较小按钮的宽度（并在按钮 4 和按钮 5 之间留下小间隙）？

使用 Row 时，布局变成了：

+-------------------------------+
|           按钮 1             |
+-------------------------------+

+-------------------------------+
|           按钮 2             |
+-------------------------------+

+-------------------------------+
|           按钮 3             |
+-------------------------------+

+---------------+ +---------------+ # 包装在 Row 中
|   按钮 4      | |   按钮 5      |
+---------------+ +---------------+ # 右侧溢出 32px
Spacer()


<details>
<summary>英文:</summary>

I have a layout that would like to build the following layout:

+-------------------------------+ # wrapped in Scaffold
| Button 1 |
+-------------------------------+
SizedBox(height: 15)
+-------------------------------+
| Button 2 |
+-------------------------------+
SizedBox(height: 15)
+-------------------------------+
| Button 3 |
+-------------------------------+
SizedBox(height: 15)
+-------------+ +---------------+ # wrapped in Wrap
| Button 4 | | Button 5 |
+-------------+ +---------------+
Spacer()

All the buttons are `ElevatedButton`. Here are the codes (I only show the related Scaffold body part):

return Scaffold(
appBar: AppBar(...), // omitted
body: SafeArea(
minimum: const EdgeInsets.all(16.0),
child: Center(
child: Column(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
ElevatedButton(), // Button 1
SizedBox(height: 15),
ElevatedButton(), // Button 2
SizedBox(height: 15),
ElevatedButton(), // Button 3
SizedBox(height: 15),
Wrap(
children: [
ElevatedButton(style: ButtonStyle(
minimumSize: MaterialStateProperty.all<Size>(Size(MediaQuery.of(context).size.width * 0.5, 50)),
)), // Button 4
ElevatedButton(style: ButtonStyle(
minimumSize: MaterialStateProperty.all<Size>(Size(MediaQuery.of(context).size.width * 0.5, 50)),
)), // Button 5
]
),
]
)
)



Currently while using `Wrap`, the layout has become:

+-------------------------------+
| Button 1 |
+-------------------------------+

+-------------------------------+
| Button 2 |
+-------------------------------+

+-------------------------------+
| Button 3 |
+-------------------------------+

+-------------+
| Button 4 |
+-------------+
+-------------+
| Button 5 |
+-------------+
Spacer()


I tried to replace `Wrap` with `Row`, but it shows `A RenderFlex overflowed by 32 pixels on the right.`. I know it&#39;s due to the Safe Area on each side. Is there a way to let the layout calculate the width of each smaller button automatically (and leave a small gap between the Buttons 4 &amp; 5)?

while using `Row`, the layout has become:

+-------------------------------+
| Button 1 |
+-------------------------------+

+-------------------------------+
| Button 2 |
+-------------------------------+

+-------------------------------+
| Button 3 |
+-------------------------------+

+---------------+ +---------------+ # wrapped in Row
| Button 4 | | Button 5 |
+---------------+ +---------------+ # overflowed on the right by 32px
Spacer()


</details>


# 答案1
**得分**: 2

如果您希望行中的最后两个按钮具有相等的宽度并占据整个行的宽度，您可以使用 `Expanded` 小部件而不是 `ButtonStyle` 的 `minimumSize` 属性。

以下是更新后的代码：
```dart
Row(
  children: [
    Expanded(
      child: ElevatedButton(
        onPressed: () {},
        child: const Text('按钮 4'),
      ),
    ),
    const SizedBox(width: 10),
    Expanded(
      child: ElevatedButton(
        onPressed: () {},
        child: const Text('按钮 5'),
      ),
    ),
  ],
)
英文:

If you want the last two buttons in the row to have equal width and occupy the full width of the row, you can use Expanded widget instead of minimumSize property of ButtonStyle.

Here's the updated code:

Row(
  children: [
    Expanded(
      child: ElevatedButton(
        onPressed: () {},
        child: const Text(&#39;Button 4&#39;),
      ),
    ),
    const SizedBox(width: 10),
    Expanded(
      child: ElevatedButton(
        onPressed: () {},
        child: const Text(&#39;Button 5&#39;),
      ),
    ),
  ],
),

答案2

得分: 1

你可以使用Expanded小部件

SizedBox(
  height: 50,
  child: Row(
    children: [
      Expanded(
        child: ElevatedButton(
          child: Text("4"),
          onPressed: null,
        ),
      ),
      Expanded(
        child: ElevatedButton(
          child: Text("5"),
          onPressed: null,
        ),
      )
    ],
  ),
),

另外，尽量避免在响应式设计中使用MediaQuery，如果需要的话，可以使用LayoutBuilder。

更多关于layout/adaptive-responsive的信息。

英文:

You can use Expanded widget

SizedBox(
  height: 50,
  child: Row(
    children: [
      Expanded(
        child: ElevatedButton(
          child: Text(&quot;4&quot;),
          onPressed: null,
        ),
      ),
      Expanded(
        child: ElevatedButton(
          child: Text(&quot;5&quot;),
          onPressed: null,
        ),
      )
    ],
  ),
),

Also you should avoid using MediaQuery for response design when ever possible, Use LayoutBuilder if needed.

More about layout/adaptive-responsive.

答案3

得分: 1

以下是您的代码的翻译部分：

Column(
  mainAxisSize: MainAxisSize.max,
  mainAxisAlignment: MainAxisAlignment.start,
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    ElevatedButton(onPressed: () {  }, child: null,), // 按钮 1
    const SizedBox(height: 15),
    ElevatedButton(onPressed: () {  }, child: null,), // 按钮 2
    const SizedBox(height: 15),
    ElevatedButton(onPressed: () {  }, child: null,), // 按钮 3
    const SizedBox(height: 15),
    Row(
      children: [
        Expanded(
          child: ElevatedButton(style: ButtonStyle(
            minimumSize: MaterialStateProperty.all<Size>(Size(MediaQuery.of(context).size.width * 0.5, 50)),
          ), onPressed: () {  }, child: null,),
        ), // 按钮 4
        const SizedBox(width: 7), // 按钮 4 和按钮 5 之间的间距
        Expanded(
          child: ElevatedButton(style: ButtonStyle(
            minimumSize: MaterialStateProperty.all<Size>(Size(MediaQuery.of(context).size.width * 0.5, 50)),
          ), onPressed: () {  }, child: null,),
        ), // 按钮 5
      ]
    ),
  ]
)

希望这有助于您理解代码的翻译部分。

英文:

Replace your column with this :

Column(
                        mainAxisSize: MainAxisSize.max,
                        mainAxisAlignment: MainAxisAlignment.start,
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          ElevatedButton(onPressed: () {  }, child: null,), // Button 1
                          const SizedBox(height: 15),
                          ElevatedButton(onPressed: () {  }, child: null,), // Button 2
                          const SizedBox(height: 15),
                          ElevatedButton(onPressed: () {  }, child: null,), // Button 3
                          const SizedBox(height: 15),
                          Row(
                              children: [
                                Expanded(
                                  child: ElevatedButton(style: ButtonStyle(
                                    minimumSize: MaterialStateProperty.all&lt;Size&gt;(Size(MediaQuery.of(context).size.width * 0.5, 50)),
                                  ), onPressed: () {  }, child: null,),
                                ), //
                                const SizedBox(width: 7),// Button 4
                                Expanded(
                                  child: ElevatedButton(style: ButtonStyle(
                                    minimumSize: MaterialStateProperty.all&lt;Size&gt;(Size(MediaQuery.of(context).size.width * 0.5, 50)),
                                  ), onPressed: () {  }, child: null,),
                                ), // Button 5
                              ]
                          ),
                        ]
                    )

huangapple
  • 本文由 发表于 2023年4月17日 16:39:18
  • 转载请务必保留本文链接：https://go.coder-hub.com/76033211.html
  • dart
  • flutter
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定