网络平台制作公司_html网页跳转代码到子网页_seo入门书籍推荐_女排联赛排名

List 和 Grid 是鸿蒙开发中的核心组件，用于展示动态数据。List 适合展示垂直或水平排列的数据列表，而 Grid 则适用于展示商品或图片的网格布局。本篇将展示如何封装组件，并通过按钮实现布局切换，提升界面的灵活性和用户体验。

---

关键词

• List 组件
• Grid 组件
• 数据展示
• 自定义列表项
• 布局切换
• 删除功能
• 动态加载

---

一、List 组件基础

1.1 基本用法

List 组件通过 @State 数据渲染一个基础的纵向列表。

@Entry
@Component
struct ListExample {@State items: string[] = ['Item 1', 'Item 2', 'Item 3']; // 初始化数据build() {Column() {List() {// 遍历数据并渲染每个列表项ForEach(this.items, (item: string) => {ListItem() {Text(item) // 显示文本.fontSize(28) // 设置字体大小.padding(20); // 设置内边距}});}}.width('100%') // 设置列宽为 100%.height('100%') // 设置列高为 100%.justifyContent(FlexAlign.Center); // 子项垂直居中对齐}
}

效果示例

---

1.2 设置列表方向

通过 listDirection 设置列表的滚动方向。

List() {ForEach(this.items, (item: string) => {ListItem