| 属性名 | 类型 | 简介 |
|---|---|---|
| direction | Axis | 主轴的方向。默认是 Axis.horizontal |
| alignment | WrapAlignment | 子Widget 在主轴上的对齐方式，默认值为WrapAlignment.start |
| runAlignment | WrapAlignment | 纵轴对齐方式，默认值为WrapAlignment.start |
| runSpacing | double | 纵轴间距，默认是0.0 |
| crossAxisAlignment | WrapCrossAlignment | 交叉轴上的对齐方式 |
| textDirection | TextDirection | 子Widget 在主轴方向上的排列顺序 |
| verticalDirection | VerticalDirection | 子Widget 在交叉轴方向上的排列顺序 |
| children | List< Widget> | 子控件列表 |
static const bgColors = [
Colors.yellow,
Colors.green,
Colors.purple,
Colors.blue,
Colors.red
];
List<String> names = [
'张三-昵称',
'李四-很很多潘李潘',
'王五-王五加油',
'是生气-若果很长会换行吗回妈妈妈妈妈妈妈妈妈妈妈妈妈妈妈妈吗',
'小栗子-世上无难事，只怕有心人'
];
Wrap(
direction: Axis.horizontal,
children: List.generate(5, (index) {
return Container(
padding: const EdgeInsets.all(5),
margin: const EdgeInsets.all(5),
// height: 60,
// color: bgColors[index],
// alignment: Alignment.center,
child: Text(
names[index],
textAlign: TextAlign.center,
style: const TextStyle(color: Colors.white, fontSize: 19),
),
decoration: BoxDecoration(
border: Border.all(color: Colors.white, width: 2),
borderRadius:
const BorderRadius.all(Radius.circular(15.0)),
color: bgColors[index],
gradient: LinearGradient(
colors: [bgColors[index], bgColors[4 - index]])),
);
}),
),
20220420095845.jpg
本地Flutter 2.10.1，Mac版Android Studio Bumblebee | 2021.1.1 Patch 2
我是小栗子，初学Flutter ，文章会根据学习进度不定时更新，请多多指教~~
网友评论