在 Flutter 中将多个小部件连续扩展到全宽？

Question

我试图在 Flutter 中获取一个按钮以扩展到其父宽度并随着添加更多小部件而动态扩展。例如，如果一行中有两个按钮，它们将每个扩展到 50% 的宽度，三个按钮扩展到 33% 等。

我试过width: Double.infinite哪个适用于单个按钮。可以理解，这不适用于多个按钮，因为宽度不受限制，而且 Flutter 不知道如何调整元素的大小。

我尝试了各种属性，SizedBox, crossAxisAlignment，Expanded但它们似乎不起作用。

我想要实现的目标类似于：https : //bulma.io/documentation/columns/basics/ - 基于 flex 的列布局。

应用程序.dart

class App extends StatelessWidget {
  Widget build(BuildContext context) {
    return MaterialApp(
      // theme: WhisperyTheme,
      // theme: ThemeData(fontFamily: "Overpass"),
      home: Scaffold(
        body: Center(
          child: Column(
            children: <Widget>[
              LongButton(
                onTap: () => null,
                text: "Primary Button",
              ),
              Row(
                children: <Widget>[
                  LongButton(
                    onTap: () => null,
                    text: "Secondary Button",
                  ),
                  LongButton(
                    onTap: () => null,
                    text: "Secondary Button",
                  ),
                ],
              )
            ],
          ),
        ),
      ),
    );
  }
}

按钮.dart

  @override
  Widget build(BuildContext context) {
    return Container(
      constraints: BoxConstraints(maxHeight: 40.0),
      margin: EdgeInsets.all(15),
      height: 40.0,
      decoration: BoxDecoration(border: Border.all(width: 1.5)),
      child: Material(
        color: Colors.transparent,
        child: InkWell(
          onTap: _onTap,
          child: Center(
            child: Text(_text),
          ),
        ),
      ),
    );
  }

Answer 1

你可以用Flexible小部件包裹你的按钮，它的默认flex参数是1，所以空间将在所有小部件之间平均分配：

Row(
  children: <Widget>[
    Flexible(
      child: LongButton(
        onTap: () => null,
        text: 'Secondary Button',
      ),
    ),
    Flexible(
      child: LongButton(
        onTap: () => null,
        text: 'Secondary Button',
      ),
    ),
  ],
)