【笔记】Flutter的Wrap包装组件

发表于 更新于 分类于 阅读次数：

前言

Flutter的Wrap包装组件学习笔记

Wrap包装组件

  • 单行的Wrap与Row相似，单列的Wrap与Column相似
  • Wrap超出屏幕部分会自动换行

direction：方向

Axis.horizontal：缺省值，水平方向
Axis.vertical：垂直方向

alignment：对齐方式

WrapAlignment.start：缺省值，从开始位置到结束位置
WrapAlignment.center：居中对其
WrapAlignment.end：从结束位置到开始位置
WrapAlignment.spaceBetween：分散显示，首尾距离边距无边距
WrapAlignment.spaceEvenly：分散显示，首尾距离边距有边距，中间间距是两边间距的1倍
WrapAlignment.spaceAround：分散显示，首尾距离边距有边距，中间间距是两边间距的2倍

spacing：水平间距
runSpacing：垂直间距

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
import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: const Text("文本内容"),
      ),
      body: Column(
        children: const [App()],
      ),
    ),
  ));
}

class App extends StatelessWidget {
  const App({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Wrap(
      direction: Axis.horizontal,
      alignment: WrapAlignment.start,
      spacing: 10,
      runSpacing: 10,
      children: [
        Icon(Icons.home),
      ],
    );
  }
}

完成

参考文献

哔哩哔哩——筱筱知晓