• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# 页面布局和连接
2
3### 简介
4
5本示例构建食物分类列表页面和食物详情页，包含：
6
71.List布局：创建食物数据模型，ForEach循环渲染ListItem。
8
92.Grid布局：展示食物分类信息，创建Tabs页签展示不同分类的食物。
10
113.路由机制：router接口、Navigator和页面间数据传递。
12
13实现效果如下：
14
15![](screenshots/device/FoodCategory.png)
16
17### 相关概念
18
19List：列表包含一系列相同宽度的列表项。适合连续、多行呈现同类数据，例如图片和文本。
20
21Grid：网格容器，由“行”和“列”分割的单元格所组成，通过指定“项目”所在的单元格做出各种各样的布局。
22
23### 相关权限
24
25不涉及。
26
27## 使用说明
28
291.点击首页的切换按钮，可切换List和Grid布局。
30
312.点击食物单元，可跳转到食物详情页。
32
33## 约束与限制
34
351.本示例仅支持在标准系统上运行。
36
372.本示例需要使用DevEco Studio 3.0 Beta4 (Build Version: 3.0.0.992, built on July 14, 2022)才可编译运行。