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

部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！