如何创建用于展示一排按钮的按钮栏？附Flutter组件代码示例

在Flutter里实现一排按钮的按钮栏，最灵活的方式是自定义一个无状态组件，这样你可以根据需求自由调整布局细节。下面是我整理的NewBar组件，它支持自定义对齐方式、子组件以及主轴尺寸，完全适配各种场景：

class NewBar extends StatelessWidget {
  final MainAxisAlignment alignment;
  final List<Widget> children;
  final MainAxisSize mainAxisSize;

  const NewBar({
    Key? key,
    this.alignment = MainAxisAlignment.end,
    this.mainAxisSize = MainAxisSize.max,
    this.children = const <Widget>[],
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final double paddingUnit = ButtonTheme.of(context).padding.horizontal / 4.0;
    return Padding(
      padding: EdgeInsets.symmetric(
        vertical: 2.0 * paddingUnit,
        horizontal: paddingUnit,
      ),
      child: Row(
        mainAxisAlignment: alignment,
        mainAxisSize: mainAxisSize,
        children: children.map((Widget child) {
          return Padding(
            padding: EdgeInsets.symmetric(horizontal: paddingUnit),
            child: child,
          );
        }).toList(),
      ),
    );
  }
}

组件属性说明： #

• alignment：控制按钮在主轴上的对齐方式，默认值是MainAxisAlignment.end（按钮靠右排列），你可以改成MainAxisAlignment.center、MainAxisAlignment.start等实现不同布局
• mainAxisSize：决定按钮栏占据的主轴空间，默认MainAxisSize.max会占满父组件的可用宽度，改成MainAxisSize.min则只会占据按钮总宽度的空间
• children：传入你需要展示的按钮或其他Widget，比如ElevatedButton、TextButton都可以

使用示例： #

// 居中排列的确定/取消按钮栏
NewBar(
  alignment: MainAxisAlignment.center,
  children: [
    ElevatedButton(
      onPressed: () => print('点击确定'),
      child: const Text('确定'),
    ),
    TextButton(
      onPressed: () => print('点击取消'),
      child: const Text('取消'),
    ),
  ],
)

这个组件通过ButtonTheme获取系统默认的按钮间距单位，保证了和原生组件的风格一致性，同时通过Padding给按钮之间添加了合适的间隔，避免按钮挤在一起。

内容的提问来源于stack exchange，提问作者Taio