flutter - 如何创建一个按钮栏来显示一行按钮？

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()
    )
);
}
}

这只是按钮栏的一些代码。但它不显示任何内容。也许我把课程放在了错误的地方，或者我应该将一些东西返回到主应用程序。我是新来的。有任何想法吗？

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 年，我想为按钮栏添加一个解决方案：

• 允许多行和每行中的许多按钮。
• 可以调整按钮的大小以填充所有可用空间。
• 可以分发具有最小粗糙度的按钮。

我的包assorted_layout_widgets中的ButtonBarSuper小部件允许这些安排，具体取决于和参数：WrapTypeWrapFit

使用示例：

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