Grid 宫格
代码演示
基本用法
dart
const Grid(children: [
GridItem(icon: VanIcons.photo_o, text: "Text"),
GridItem(icon: VanIcons.photo_o, text: "Text"),
GridItem(icon: VanIcons.photo_o, text: "Text"),
GridItem(icon: VanIcons.photo_o, text: "Text"),
]),自定义列数
dart
Grid(
columnNum: 3,
children: List.generate(
6, (index) => const GridItem(icon: VanIcons.photo_o, text: "Text")),
),自定义内容
dart
Grid(columnNum: 3, children: [
GridItem(
child: Image.network(
"https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg")),
GridItem(
child: Image.network(
"https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg")),
GridItem(
child: Image.network(
"https://fastly.jsdelivr.net/npm/@vant/assets/apple-3.jpeg")),
]),正方形格子
dart
Grid(
columnNum: 4,
children: List.generate(
8,
(index) => const GridItem(
icon: VanIcons.photo_o,
text: "Text",
),
),
),格子间距
dart
const Grid(columnNum: 4, gutter: 10, children: [
GridItem(icon: VanIcons.photo_o, text: "Text"),
GridItem(icon: VanIcons.photo_o, text: "Text"),
GridItem(icon: VanIcons.photo_o, text: "Text"),
GridItem(icon: VanIcons.photo_o, text: "Text"),
GridItem(icon: VanIcons.photo_o, text: "Text"),
GridItem(icon: VanIcons.photo_o, text: "Text"),
GridItem(icon: VanIcons.photo_o, text: "Text"),
GridItem(icon: VanIcons.photo_o, text: "Text"),
]),内容横排
dart
Grid(
columnNum: 3,
children: List.generate(
3,
(index) => const GridItem(
direction: Axis.horizontal,
icon: VanIcons.photo_o,
text: "Text",
),
),
),点击触发事件
dart
Grid(
columnNum: 3,
children: List.generate(
3,
(index) => const GridItem(
clickable: true,
direction: Axis.horizontal,
icon: VanIcons.photo_o,
text: "Text",
),
),
),带徽标
dart
const Grid(columnNum: 2, children: [
GridItem(dot: true, icon: VanIcons.home_o, text: "Text"),
GridItem(badge: "99+", icon: VanIcons.search, text: "Text"),
]),API
| Props | 类型 | 描述 |
|---|---|---|
square | bool | 使用宽高一致 |
columnNum | int | 列数 |
gutter | double | 间距 |
children | List<GridItem> | - |