Flutter快速上手6：基础布局之流式布局Wrap

属性名	类型	简介
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 ，文章会根据学习进度不定时更新，请多多指教~~