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

Question

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

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

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

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

App.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",
                  ),
                ],
              )
            ],
          ),
        ),
      ),
    );
  }
}

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',
      ),
    ),
  ],
)