如何在 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

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

现在，要实现您正在寻找的内容，可以通过Column使用小部件包装IntrinsicWidth小部件并设置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),
          ],
        ),
      ),
    );
  }

Answer 2

由于ElevatedButton宽度根据小部件传递的子字符串的长度而变化Text，因此您可以在小部件中包含与所有“sizedbox”具有相同宽度的提升按钮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: () {}))

您可以选择宽度为您想要设置宽度的任何数字。