Flutter-流式布局

Widget—Wrap

Wrap（解决内容溢出）：在flutter中，默认不是流式布局，内容溢出不会自动换行，需要使用流式布局来进行自动换行。

  • spacing（主轴方向子组件之间的间距）
  • alignment（主轴方向的对齐方式）
  • runSpacing（纵轴方向子组件的间距）
  • runAlignment（纵轴方向的对齐方式）

Chip（标签）

CircleAvatar（圆形的“化身”）（圆形头像）

代码区

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
class MyPage extends StatelessWidget {
  const MyPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return  Column(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Row(//在线性布局中，不会自动换行，内容超出会报错
          children: const [
            Text(
              'hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh',
              style: TextStyle(
                fontSize: 40
              ),
            ),
          ],
        ),
        Wrap(//流式布局就换行了，莫得问题
          children: const [
            Text(
              'hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh',
              style: TextStyle(
                  fontSize: 40,
                  color: Colors.red
              ),
            ),
          ],
        ),
      ],
    );
  }
}

image-20220906210846453