Flutter中的Wrap组件实现热门区域选择布局

1:热门城市选择,搜索记录,热门商品选择往往会展示横向平铺的选择菜单按钮,在Flutter中只需要使用一个组件就能轻松搞定,它就是Wrap组件,用法如下

body: Wrap(

crossAxisAlignment: WrapCrossAlignment.center,//横向显示 (当然还有垂直方向)

spacing: 10,//间距

runSpacing: 10,

children: [//所有元素集合

ElevatedButton(

// style: ButtonStyle(

// ),

child: Text(

'${this.arguments == null ? 'search' : this.arguments['name']}'),

onPressed: () {}),

ElevatedButton(

// style: ButtonStyle(

// ),

child: Text('button1'),

onPressed: () {}),

ElevatedButton(

// style: ButtonStyle(

// ),

child: Text('button1'),

onPressed: () {}),

ElevatedButton(

// style: ButtonStyle(

// ),

child: Text('button1'),

onPressed: () {}),

ElevatedButton(

// style: ButtonStyle(

// ),

child: Text('button1'),

onPressed: () {}),

ElevatedButton(

// style: ButtonStyle(

// ),

child: Text('button1'),

onPressed: () {})

],

),