限制按钮宽度

Question

下面是显示 body 下方按钮的代码的一部分。

  ......
                Padding(
              padding: const EdgeInsets.all(8.0),
              child: Row(
                children: [
                  Expanded(
                    child: OutlinedButton(
                      onPressed: () {},
                      child: Text("One button"),
                    ),
                  ),
                  SizedBox(
                    //space between button
                    width: 5,
                  ),
                  Expanded(
                    child: OutlinedButton(
                      onPressed: () {},
                      child: Text("Two button"),
                    ),
                  ),
                ],
              ),
            )
 ......

但问题是按钮的宽度是为整个页面获取的。我希望它的宽度限制在 body BoxConstraints(maxWidth: 800).

在照片中，我用红色边框标记了按钮的所需宽度。我怎样才能做到这一点。

Answer 1

您用 ConstrainedBox 包装了完整的按钮小部件。

  ConstrainedBox(
          constraints: BoxConstraints(maxWidth: 800),
          child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: Row(
              children: [
                Expanded(
                  child: OutlinedButton(
                    onPressed: () {},
                    child: Text("One button"),
                  ),
                ),
                SizedBox(
                  //space between button
                  width: 5,
                ),
                Expanded(
                  child: OutlinedButton(
                    onPressed: () {},
                    child: Text("Two button"),
                  ),
                ),
              ],
            ),
          ),
        )

如果您想避免填充，可以删除它或在 Row 上使用 ConstrainedBox。

Answer 2

您可以添加 2 个扩展小部件并使用 flex 属性。 Expanded, flex

            Padding(
              padding: const EdgeInsets.all(8.0),
              child: Row(
                children: [
                  Expanded(
                    flex: 10,
                    child: Container(),
                  ),
                  Expanded(
                    flex: 40,
                    child: OutlinedButton(
                      onPressed: () {},
                      child: Text("One button"),
                    ),
                  ),
                  SizedBox(
                    //space between button
                    width: 5,
                  ),
                  Expanded(
                    flex: 40,
                    child: OutlinedButton(
                      onPressed: () {},
                      child: Text("Two button"),
                    ),
                  ),
                  Expanded(
                    flex: 10,
                    child: Container(),
                  ),
                ],
              ),
            )

限制按钮宽度

Limit button width

dart

flutter

flutter-layout