如何创建用于显示一行按钮的按钮栏？

Question

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 new Padding(
    padding: new EdgeInsets.symmetric(
        vertical: 2.0 * paddingUnit,
        horizontal: paddingUnit
    ),
    child: new Row(
        mainAxisAlignment: alignment,
        mainAxisSize: mainAxisSize,
        children: children.map<Widget>((Widget child) {
          return new Padding(
              padding: new EdgeInsets.symmetric(horizontal: paddingUnit),
              child: child
          );
        }).toList()
    )
);
}
}

这只是按钮栏的一些代码。它不显示任何东西。也许我把 class 放在了错误的地方，或者我应该 return 一些东西到主应用程序。我是新手。有什么想法吗？

Answer 1

您可以使用 ButtonBar 多子布局小部件。

示例：

import 'package:flutter/material.dart';

void main() {
  runApp(new MaterialApp(
    title: 'title',
    home: new MyApp(),
  ));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new Center(
        child: new ButtonBar(
          mainAxisSize: MainAxisSize.min, // this will take space as minimum as posible(to center)
          children: <Widget>[
            new RaisedButton(
              child: new Text('Hello'),
              onPressed: null,
            ),
            new RaisedButton(
              child: new Text('Hi'),
              onPressed: null,
            ),
          ],
        ),
      ),
    );
  }
}

结果：

Answer 2

自 2021 年起，我想为按钮栏添加一个解决方案：

允许多行和每行中的多个按钮。
可以调整按钮的大小以填充所有可用的space。
可以使用 minimum raggedness 分发按钮。

ButtonBarSuper widget from my package assorted_layout_widgets 允许这些安排，具体取决于 WrapType 和 WrapFit 参数：

用法示例：

ButtonBarSuper(
   wrapType: wrapType,
   wrapFit: wrapFit,
   spacing: 2.0, // Horizontal spacing between buttons.
   lineSpacing: 10.0, // Vertical spacing between button lines.
   buttonHeight: 48,
   buttonMinWidth: 40,
   children: [
        RaisedButton(onPressed: () {...}, child: const Text('I am a blue button like you')),
        RaisedButton(onPressed: () {...}, child: const Text('Hey')),
        RaisedButton(onPressed: () {...}, child: const Text('I am a blue button, ok?')),
      ],
    );
  }

如何创建用于显示一行按钮的按钮栏？

How to create a button bar for displaying a row of buttons?

flutter

flutter-layout