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, ) ], ) ]), )); } }
Flutter笔记16:ButtonBar末端对齐按钮容器
ButtonBar末端对齐按钮容器有点类似于CSS3中的flex容器,能够通过alignment对子元素进行排列。ButtonBar主要对按钮进行排列,当然,如果要对其他容器,如Container等进行排列,也可以