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

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

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

结果: