如何布局一列按钮的宽度等于 Flutter 中最宽的按钮的宽度？

Question

如何使以下按钮的宽度与最宽的按钮（在本例中为最后一个）相同？我不想硬编码以使所有都等于最后一个，因为例如，当切换到另一种语言时，它可能不是最后一个最宽的按钮。

我正在使用的代码：

Widget build(BuildContext context) {
return Scaffold(
  body: Center(
    child: Column(
      children: [
        Spacer(flex: 1),
        Text(
          'Flutter Test',
          style: Theme.of(context).textTheme.headline1,
        ),
        Spacer(flex: 2),
        Row(
          mainAxisSize: MainAxisSize.max,
          children: [
            Expanded(child: 
              Column(
                children: [
                  ElevatedButton(
                    onPressed: () {
                    },
                    child: Text('Apple'),
                  ),
                  ElevatedButton(
                    onPressed: () {
                    },
                    child: Text('Banana'),
                  ),
                  ElevatedButton(
                    onPressed: () {
                    },
                    child: Text('Chery'),
                  ),
                  ElevatedButton(
                    onPressed: () {
                    },
                    child: Text('Durian'),
                  ),
                  ElevatedButton(
                    onPressed: () {
                      Navigator.pop(context);
                    },
                    child: Text('Emu apple fruit'),
                  ),
                ],
              ),
            ),
          ],
        ),
        Spacer(flex: 3),
      ],
    ),
  ),
);
}

谢谢！

Answer 1

由于ElevatedButton 会根据Text 小部件传递的子字符串的长度更改其宽度，因此您可以在SizedBox 小部件中包含与所有“大小框”具有相同宽度的提升按钮以获得所有按钮的宽度相同。

SizedBox(width: 200, child: ElevatedButton(child: Text('Apple'), onPressed: () {})),
SizedBox(width: 200, child: ElevatedButton(child: Text('Orange'), onPressed: () {})),
SizedBox(width: 200, child: ElevatedButton(child: Text('Emu Apple fruit'), onPressed: () {}))

您可以将宽度选择为您希望将宽度设置为的任何数字。

Answer 2

尝试layoutBuilder，它会检测父窗口小部件的大小并提供可以被子窗口使用的constraints。

希望您知道最大宽度并可以使用constrains 设置宽度 这有帮助吗？

import 'package:flutter/material.dart';

class MaxWidthButton extends StatelessWidget {
  const MaxWidthButton({Key? key}) : super(key: key);

  Widget build(BuildContext context) {
    return Scaffold(
      body: LayoutBuilder(
        builder: (context, constraints) => Center(
          child: Column(
            children: [
              Spacer(flex: 1),
              Text(
                'Flutter Test',
                style: Theme.of(context).textTheme.headline1,
              ),
              Spacer(flex: 2),
              Row(
                mainAxisSize: MainAxisSize.max,
                children: [
                  Expanded(
                    child: Column(
                      children: [
                        ConstrainedBox(
                          constraints: BoxConstraints(
                            minWidth: constraints.maxWidth,
                          ),
                          child: ElevatedButton(
                            onPressed: () {},
                            child: Text('Apple'),
                          ),
                        ),
                        GestureDetector(
                          onTap: () {},
                          child: Container(
                            color: Colors.cyanAccent,
                            alignment: Alignment.center,
                            width: constraints.maxWidth *.6,
                            child: Text('Banana'),
                          ),
                        ),
                        ElevatedButton(
                          onPressed: () {},
                          child: Container(
                            alignment: Alignment.center,
                            width: constraints.maxWidth *.6,
                            child: Text('Chery'),
                          ),
                        ),
                        ElevatedButton(
                          onPressed: () {},
                          child: Text('Durian'),
                        ),
                        ElevatedButton(
                          onPressed: () {
                            Navigator.pop(context);
                          },
                          child: Text('Emu apple fruit'),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
              Spacer(flex: 3),
            ],
          ),
        ),
      ),
    );
  }
}

Answer 3

Widget build(BuildContext context) {
    double buttonWidth =100.0;
    double buttonHeight =20.0;
    return Scaffold(
      body: Center(
        child: Column(
          children: [
            Spacer(flex: 1),
            Text(
              'Flutter Test',
              style: Theme.of(context).textTheme.headline1,
            ),
            Spacer(flex: 2),
            Row(
              mainAxisSize: MainAxisSize.max,
              children: [
                Expanded(child:
                Column(
                  children: [
                    ElevatedButton(
                      onPressed: () {
                      },
                      child: Container(
                          width: buttonWidth,
                          height: buttonHeight,
                        alignment: Alignment.center,
                        child: Text('Apple')
                      ),
                    ),
                    ElevatedButton(
                      onPressed: () {
                      },
                      child: Container(
                          width: buttonWidth,
                          height: buttonHeight,
                        alignment: Alignment.center,
                        child: Text('Banana')
                      ),
                    ),
                    ElevatedButton(
                      onPressed: () {
                      },
                      child: Container(
                        width: buttonWidth,
                        height: buttonHeight,
                        alignment: Alignment.center,
                        child: Text('Cherry')
                      ),
                    ),
                    ElevatedButton(
                      onPressed: () {
                      },
                      child: Container(
                          width: buttonWidth,
                          height: buttonHeight,
                        alignment: Alignment.center,
                        child: Text('Durian')
                      ),
                    ),
                    ElevatedButton(
                      onPressed: () {
                      },
                      child: Container(
                          width: buttonWidth,
                          height: buttonHeight,
                        alignment: Alignment.center,
                        child: Text('Emu apple fruit')
                      ),
                    ),
                  ],
                ),
                ),
              ],
            ),
            Spacer(flex: 3),
          ],
        ),
      ),
    );

  }

Answer 4

首先，您不需要用于Column 小部件的Row 和Expanded 小部件，因为它们没有任何意义。

现在，要实现您正在寻找的内容，可以通过使用 IntrinsicWidth 小部件包装 Column 小部件并设置 Column(property: crossAxisAlignment: CrossAxisAlignment.stretch 来完成。

完整代码应为：

Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          children: [
            Spacer(flex: 1),
            Text(
              'Flutter Test',
              style: Theme.of(context).textTheme.headline1,
            ),
            Spacer(flex: 2),
            IntrinsicWidth(
                child: Column(
                    crossAxisAlignment: CrossAxisAlignment.stretch,
                    children: [
                  ElevatedButton(
                    onPressed: () {},
                    child: Text('Apple'),
                  ),
                  ElevatedButton(
                    onPressed: () {},
                    child: Text('Banana'),
                  ),
                  ElevatedButton(
                    onPressed: () {},
                    child: Text('Chery'),
                  ),
                  ElevatedButton(
                    onPressed: () {},
                    child: Text('Durian'),
                  ),
                  ElevatedButton(
                    onPressed: () {
                      Navigator.pop(context);
                    },
                    child: Text('Emu apple fruit'),
                  ),
                ])),
            Spacer(flex: 3),
          ],
        ),
      ),
    );
  }