首页 > 建站教程 > APP开发,混合APP >  Flutter笔记16:ButtonBar末端对齐按钮容器正文

Flutter笔记16:ButtonBar末端对齐按钮容器

ButtonBar末端对齐按钮容器有点类似于CSS3中的flex容器,能够通过alignment对子元素进行排列。ButtonBar主要对按钮进行排列,当然,如果要对其他容器,如Container等进行排列,也可以
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'ButtonBar末端对齐按钮容器',
        home: Scaffold(
          appBar: AppBar(
            title: Text('ButtonBar末端对齐按钮容器'),
          ),
          body: Column(children: [
            ButtonBar(
              //排列方式
              alignment: MainAxisAlignment.end,
              mainAxisSize: MainAxisSize.min,
              children: [
                RaisedButton(
                    onPressed: () {},
                    child: Text('按钮'),
                    color: Colors.yellowAccent),
                RaisedButton(
                    onPressed: () {},
                    child: Text('按钮'),
                    color: Colors.yellowAccent),
                RaisedButton(
                    onPressed: () {},
                    child: Text('按钮'),
                    color: Colors.yellowAccent),
                RaisedButton(
                    onPressed: () {},
                    child: Text('按钮'),
                    color: Colors.yellowAccent),
              ],
            ),
            ButtonBar(
              alignment: MainAxisAlignment.end,
              mainAxisSize: MainAxisSize.max,
              children: [
                Container(
                  width: 50.0,
                  height: 50.0,
                  color: Colors.black,
                ),
                Container(
                  width: 50.0,
                  height: 50.0,
                  color: Colors.black,
                ),
                Container(
                  width: 50.0,
                  height: 50.0,
                  color: Colors.black,
                )
              ],
            )
          ]),
        ));
  }
}