HarmonyOS NEXT ArkTS四种渲染控制能力

大家好，我是 V 哥。ArkTS 是 OpenHarmony 框架的一部分，提供了声明式 UI 渲染的能力。下面来对ArkTS中四种渲染控制能力： if/else、ForEach、LazyForEach 和 ContentSlot 详细介绍一下：

1. if/else 渲染控制

if/else 是 ArkTS 提供的基本逻辑控制语法，用于 基于条件动态控制组件的渲染。它的核心用途是根据某些条件，在运行时决定渲染哪些组件，以及组件的结构或内容。以下是它的主要特点和用途的详细介绍：

主要用途

  1. 动态显示或隐藏组件
  2. 实现多种状态的界面切换
  3. 响应用户交互或数据变化
  4. 个性化内容显示

详细讲解

语法基础：

  • if/else 语法与普通编程语言一致，可以嵌套其他 ArkTS UI 组件。
  • if 用于条件成立时渲染的组件，else 用于条件不成立时的渲染。

示例场景与代码

场景 1：登录状态控制

根据用户是否登录，显示欢迎信息或登录提示。

@Entry
@Component
struct LoginExample {
    private isLoggedIn: boolean = false;

    build() {
        Column() {
            // 根据用户登录状态显示不同的内容
            if (this.isLoggedIn) {
                Text("欢迎回来，用户！").fontSize(20).padding(10)
            } else {
                Text("您尚未登录，请登录继续操作").fontSize(16).padding(10)
                Button("登录") {
                    this.isLoggedIn = true; // 登录后更新状态
                }.padding(5)
            }
        }
    }
}

场景 2：加载状态切换

显示加载中的动画或加载完成后的内容。

@Entry
@Component
struct LoadingExample {
    private isLoading: boolean = true;

    build() {
        Column() {
            // 判断当前是否为加载状态
            if (this.isLoading) {
                Text("加载中，请稍候...").fontSize(18).padding(10)
            } else {
                Text("内容加载完成！").fontSize(18).padding(10)
            }

            // 模拟状态切换按钮
            Button("切换状态") {
                this.isLoading = !this.isLoading; // 切换加载状态
            }.padding(10)
        }
    }
}

场景 3：权限显示

根据用户权限等级展示不同的内容。

@Entry
@Component
struct PermissionExample {
    private userRole: string = "guest"; // 用户角色：guest, user, admin

    build() {
        Column() {
            if (this.userRole === "guest") {
                Text("欢迎游客，请注册以享受更多功能。").fontSize(16).padding(10)
            } else if (this.userRole === "user") {
                Text("欢迎普通用户，解锁更多高级功能升级为管理员。").fontSize(16).padding(10)
            } else if (this.userRole === "admin") {
                Text("欢迎管理员，您拥有最高权限！").fontSize(16).padding(10)
            }

            // 模拟权限切换按钮
            Row() {
                Button("设置为游客") { this.userRole = "guest" }.padding(5)
                Button("设置为普通用户") { this.userRole = "user" }.padding(5)
                Button("设置为管理员") { this.userRole = "admin" }.padding(5)
            }
        }
    }
}

if/else 使用时的注意事项

  1. 避免复杂嵌套：
  2. 性能优化：
  3. 配合状态管理：

if/else 是 ArkTS 中最基础的控制语法，通过动态切换组件的渲染路径，可以灵活应对各种场景下的界面需求，使开发者能够快速实现逻辑清晰、性能优异的动态 UI。

2. ForEach 渲染控制

ForEach 是 ArkTS 提供的一种迭代语法，专用于遍历固定或小规模的数据集合，并基于集合的每个元素动态生成 UI 组件。它在开发中扮演着重要角色，尤其是需要根据数组或列表生成界面内容时。

主要用途

  1. 动态渲染组件列表
  2. 数据驱动的视图更新
  3. 可配置的动态视图
  4. 清晰的逻辑分离

语法

基本语法：

ForEach(array, (item) => {
    // 渲染逻辑
})

参数：

  • array：要遍历的数组或集合。
  • (item)：当前元素的引用，可用于组件内容的动态生成。

示例与场景讲解

场景 1：简单列表渲染

示例：展示水果名称的简单列表。

@Entry
@Component
struct SimpleListExample {
    private fruits: string[] = ["苹果", "香蕉", "橘子", "葡萄"];

    build() {
        Column() {
            ForEach(this.fruits, (fruit) => {
                Text(fruit).fontSize(20).padding(5)
            })
        }
    }
}

解析：

  • 遍历 fruits 数组，动态生成每个 Text 组件。
  • 当 fruits 数组发生变化时（增删项），界面会自动更新。

场景 2：带索引的列表渲染

示例：显示带序号的城市列表。

@Entry
@Component
struct IndexedListExample {
    private cities: string[] = ["北京", "上海", "广州", "深圳"];

    build() {
        Column() {
            ForEach(this.cities, (city, index) => {
                Text(`${index + 1}. ${city}`).fontSize(18).padding(5)
            })
        }
    }
}

解析：

  • 使用 index 显示当前元素的序号。
  • 可以动态绑定索引值到 UI。

场景 3：复杂数据对象渲染

示例：渲染用户信息卡片。

interface User {
    name: string;
    age: number;
}

@Entry
@Component
struct UserListExample {
    private users: User[] = [
        { name: "张三", age: 25 },
        { name: "李四", age: 30 },
        { name: "王五", age: 28 }
    ];

    build() {
        Column() {
            ForEach(this.users, (user) => {
                Column() {
                    Text(`姓名：${user.name}`).fontSize(18)
                    Text(`年龄：${user.age}`).fontSize(16).padding(2)
                }.padding(10).border(Color.Gray, 1).margin(5)
            })
        }
    }
}

解析：

  • 遍历 users 数组，每个元素生成一个用户信息卡片。
  • 通过 Column 嵌套展示每个用户的属性信息。

场景 4：动态列表（增删项）

示例：实现可以增删项目的任务列表。

@Entry
@Component
struct DynamicListExample {
    private tasks: string[] = ["完成报告", "开会", "整理资料"];

    build() {
        Column() {
            // 渲染任务列表
            ForEach(this.tasks, (task, index) => {
                Row() {
                    Text(task).fontSize(18).padding(5)
                    Button("删除") {
                        this.tasks.splice(index, 1); // 删除对应任务
                    }.padding(5)
                }
            })

            // 添加新任务的输入框和按钮
            Row() {
                TextField({ placeholder: "输入新任务" }).onChange((value) => {
                    this.newTask = value;
                }).width('70%')
                Button("添加任务") {
                    if (this.newTask.trim() !== "") {
                        this.tasks.push(this.newTask.trim());
                    }
                }.padding(5)
            }.margin(10)
        }
    }

    private newTask: string = ""; // 输入的新任务内容
}

解析：

  • 使用 ForEach 渲染 tasks 列表。
  • tasks 数据更新时，UI 会同步变更。
  • 提供输入框和按钮以动态添加或删除任务。

注意事项

  1. 适用于小规模数据集合：
  2. 保持数据唯一性：
  3. 避免过深嵌套：

通过 ForEach 渲染控制，开发者能够快速生成基于数据的动态 UI，满足各种场景下的灵活需求，从静态内容到动态交互都可以轻松实现。

3. LazyForEach 渲染控制

LazyForEach 是 ArkTS 提供的一种高效迭代语法，专为 大规模、动态数据集合 设计，通过 延迟加载 的机制，按需渲染可见范围内的组件，从而显著提高性能。

主要用途

  1. 大规模数据的高效渲染
  2. 按需加载数据
  3. 支持动态增删数据
  4. 流畅的用户体验

语法

先来看一下基本语法：

LazyForEach(array, (item, index) => {
    // 渲染逻辑
})

参数：

  • array：需要遍历的大规模数据集合。
  • (item, index)：当前数据元素及其索引，传递给渲染逻辑。

示例与场景讲解

场景 1：大规模数据的列表渲染

示例：显示 1,000 条用户消息记录。

@Entry
@Component
struct LargeDataExample {
    private messages: string[] = Array.from({ length: 1000 }, (_, i) => `消息 ${i + 1}`);

    build() {
        LazyForEach(this.messages, (message) => {
            Text(message).fontSize(18).padding(5)
        })
    }
}

解析：

  • 数据集合 messages 包含 1,000 条消息。
  • LazyForEach 会根据可见范围按需渲染消息内容，减少一次性渲染的负担，保证性能流畅。

场景 2：动态加载商品列表

示例：实现商品列表的无限滚动加载。

@Entry
@Component
struct InfiniteScrollExample {
    private products: string[] = Array.from({ length: 20 }, (_, i) => `商品 ${i + 1}`);
    private pageCount: number = 1;

    build() {
        Column() {
            LazyForEach(this.products, (product) => {
                Text(product).fontSize(16).padding(10)
            })

            Button("加载更多") {
                this.loadMoreProducts(); // 加载更多商品
            }.padding(10)
        }
    }

    private loadMoreProducts() {
        // 模拟每次加载 20 个商品
        this.pageCount += 1;
        const newProducts = Array.from({ length: 20 }, (_, i) => `商品 ${i + 1 + this.products.length}`);
        this.products.push(...newProducts);
    }
}

解析：

  • 初始数据为 20 个商品，点击按钮后动态加载更多商品。
  • LazyForEach 按需渲染新增的内容，保持性能稳定。

场景 3：聊天消息界面

示例：渲染实时更新的聊天消息。

@Entry
@Component
struct ChatExample {
    private messages: { sender: string; content: string }[] = [
        { sender: "用户A", content: "你好" },
        { sender: "用户B", content: "你好！有事吗？" }
    ];

    build() {
        LazyForEach(this.messages, (message) => {
            Column() {
                Text(`${message.sender}：`).fontSize(14).fontWeight(FontWeight.Bold).padding(2)
                Text(message.content).fontSize(16).padding(5)
            }.padding(10).border(Color.Gray, 1).margin(5)
        })
    }

    addMessage(sender: string, content: string) {
        this.messages.push({ sender, content });
    }
}

解析：

  • 聊天消息实时追加到数据集合 messages 中。
  • LazyForEach 仅渲染当前可见区域的消息，确保滚动和渲染的流畅性。

场景 4：渲染含图片的大规模数据

示例：展示 500 张商品图片列表。

@Entry
@Component
struct ImageGridExample {
    private images: string[] = Array.from({ length: 500 }, (_, i) => `https://example.com/image${i + 1}.jpg`);

    build() {
        LazyForEach(this.images, (imageUrl) => {
            Image(imageUrl).width(100).height(100).margin(5)
        })
    }
}

解析：

  • 渲染图片时内存消耗较高，LazyForEach 可以有效避免加载所有图片造成的卡顿。
  • 仅在用户滚动到图片所在位置时加载对应内容。

LazyForEach 的优势

  1. 性能优化：
  2. 按需更新：
  3. 适应动态数据：

注意事项

  1. 适用场景：
  2. 视图更新：
  3. 资源管理：

LazyForEach 是 ArkTS 中不可或缺的渲染工具，它以延迟加载的机制为大规模动态数据集合的显示提供了性能保障，同时保证用户交互的流畅体验。在开发长列表或大规模数据的应用时，它能显著提高开发效率和应用性能。

4. ContentSlot 渲染控制

ContentSlot 是 ArkTS 提供的一种 插槽渲染机制，用于在组件中动态插入子组件内容。它允许父组件定义占位区域，子组件可以通过插槽填充动态内容。类似于前端开发中的 slot 或 children 概念，ContentSlot 提高了组件的复用性和灵活性。

主要用途

  1. 组件内容动态填充
  2. 高复用性组件开发
  3. 父子组件的灵活传递
  4. 提升内容扩展能力

语法

定义插槽：

ContentSlot("slotName", defaultContent)

填充插槽：

Column() {
    CustomComponent {
        slotName: Text("我是WG")
    }
}
  • slotName：插槽的名称，父组件通过这个名称标识插槽位置。
  • defaultContent：默认显示的内容，如果未插入内容，将使用该内容。

示例与场景讲解

场景 1：动态按钮内容

示例：创建一个按钮组件，支持动态插入内容（如文本或图标）。

@Entry
@Component
struct ButtonWithSlot {
    build() {
        Column() {
            // 使用默认内容
            CustomButton()
            
            // 动态插入内容
            CustomButton {
                contentSlot: Text("提交").fontSize(18).fontWeight(FontWeight.Bold)
            }
        }
    }
}

@Component
struct CustomButton {
    build() {
        Row()
            .backgroundColor(Color.Blue)
            .padding(10)
            .alignItems(HorizontalAlign.Center)
            .borderRadius(5) {
            ContentSlot("contentSlot", Text(" 点我一下试试").fontSize(16).color(Color.White))
        }
    }
}

解析：

  • CustomButton 是一个通用按钮组件，使用 ContentSlot 定义插槽 contentSlot。
  • 默认插槽内容为 "默认按钮"，外部可以动态插入不同的内容，如 "提交"。

场景 2：可扩展的弹窗组件

示例：实现一个通用弹窗，支持动态插入标题和内容。

@Entry
@Component
struct PopupWithSlotExample {
    private isVisible: boolean = true;

    build() {
        if (this.isVisible) {
            Popup {
                titleSlot: Text("弹窗标题：点了又能怎样").fontSize(20).fontWeight(FontWeight.Bold),
                contentSlot: Text("这是弹窗的内容：不怎么样，你赢了").fontSize(16).padding(10)
            }
        }
    }
}

@Component
struct Popup {
    build() {
        Column()
            .backgroundColor(Color.White)
            .padding(20)
            .borderRadius(10) {
            ContentSlot("titleSlot", Text("默认标题").fontSize(18).color(Color.Black))
            Divider().backgroundColor(Color.Gray).height(1).margin(10, 0)
            ContentSlot("contentSlot", Text("默认内容").fontSize(14).color(Color.Gray))
        }
    }
}

解析：

  • Popup 是一个弹窗组件，定义了 titleSlot 和 contentSlot 两个插槽。
  • 父组件 PopupWithSlotExample 通过插槽填充标题和内容，外部组件可以灵活调整弹窗内容。

场景 3：动态卡片组件

示例：实现一个支持自定义图片和文字内容的卡片组件。

@Entry
@Component
struct CardSlotExample {
    build() {
        Card {
            imageSlot: Image("https://xxxxx.com/image.jpg").width(100).height(100),
            textSlot: Text("自定义卡片内容").fontSize(18).padding(10)
        }
    }
}

@Component
struct Card {
    build() {
        Column()
            .backgroundColor(Color.LightGray)
            .padding(10)
            .borderRadius(8)
            .alignItems(HorizontalAlign.Center) {
            ContentSlot("imageSlot", Image("").width(50).height(50))
            ContentSlot("textSlot", Text("默认卡片内容").fontSize(16).color(Color.Black))
        }
    }
}

解析：

  • Card 定义了 imageSlot 和 textSlot，允许父组件动态插入图片和文字内容。
  • 父组件通过填充插槽，自定义卡片的具体显示内容。

ContentSlot 的优势

  1. 灵活性：
  2. 高复用性：
  3. 内容解耦：
  4. 默认内容支持：

注意事项

  1. 插槽命名：
  2. 默认内容设置：
  3. 复杂嵌套场景：

ContentSlot 为 ArkTS 的组件设计提供了高度的扩展能力，开发者可以通过它实现动态化和模块化的组件设计。无论是按钮、弹窗，还是复杂的卡片组件，ContentSlot 都能让内容的插入变得简单而高效。

小结一下

控制方式

功能

典型应用场景

if/else

条件控制渲染组件的显示与隐藏

动态显示状态内容（如登录/未登录状态）

ForEach

遍历小规模数据集合渲染组件

渲染固定数量的列表

LazyForEach

延迟渲染大规模数据集合

动态加载的长列表（如消息、数据流）

ContentSlot

支持动态插入子组件

插槽设计，实现组件内容的动态拓展

我们可以充分利用 ArkTS 提供的声明式渲染控制能力，提升应用的灵活性与性能。关注威哥爱编程，鸿蒙千帆起。

#鸿蒙#
全部评论

相关推荐

昨天 11:05
西安科技大学 Java
缓解焦虑的根本方法就是关闭牛客
好吧标题党了。在我来到牛客以前，从来没有想过自己会陷入绝望的海洋里，我不是一个很卷的人，也就是到时候了，想想自己干啥，从来都不会打提前量的p人。来到牛客以后才发现，什么大一有实习，大二进大厂，大三进暑期，大四收到大厂offer，感觉都是非常常见的，什么双非年包四十万，也不过只是众多大佬中的一位。所以果然人焦虑的原因还是因为看到了太多人通过自己的努力过上了自己想要的生活吧。人生本来就没有一条既定的道路，或许我们会迟到，会走弯路，会发现自己努力走到的终点只是别人唾手可得的起点，但是这就是人生吧，就算你走的这条路在别人看起来是别人根本不屑于选择的路，那也是自己一步一个脚印走出来的，是独属于自己人生的路。我有个高中同班同学，特别优秀，本硕985，但是她不想读博，他爸让她读，说如果她不读博士的话她的人生就毁掉了，她就没用了。我说那在你爸看来，我是不是从本科就毁掉了。她说是的，在她爸看起来，没用的人多了。那时我忽然觉得，不用让自己太焦虑自己是不是按照既定的路线走，自己是不是优秀的，是不是拿到了被所有人都认可甚至羡慕的offer。走好自己的路就好，哪怕是一个废物。逃避虽然可耻，但有用。女朋友镇楼
野猪不是猪🐗：七海可爱捏
你有哪些缓解焦虑的方法？
点赞 评论 收藏
分享
06-10 10:40
西安电子科技大学 Java
大厂面试题：MySQL 5.x和8.0有什么区别？
MySQL 5.x 和 MySQL 8.0 主要区别MySQL 8.0 相比 MySQL 5.7 进行了大量改进，涵盖了性能优化、SQL 功能增强、索引优化、JSON 支持、安全性提升等多个方面。1. 性能优化✅ MySQL 8.0 性能比 5.7 提高 2 倍MySQL 8.0 在以下方面优化了性能：更好的读/写并发性能（改进 InnoDB 并发控制）。改进 IO 密集型工作负载（减少磁盘 IO，优化 Buffer Pool）。热点竞争优化（降低全局锁争用，提高事务处理能力）。📌 结论：MySQL 8.0 对高并发、高 IO 负载的场景优化明显。2. NoSQL 支持✅ 提供更完善的 JS...
牛客在线求职答疑中心
点赞 评论 收藏
分享
05-16 03:51
中山大学 C++
点赞 评论 收藏
分享
06-09 16:22
运营
茅台不值2000块，这个公仔就值吗？
不是2000块的茅台买不起，而是2000块的labubu更有性价比。2025年6月，北京通州一间不起眼的酒商仓库里，茅台堆积，标签上2000元的批发价，比之前的高点2600元已经跌了23%。酒商老李揉着太阳穴，叹了口气：“一天亏6万都算少的，这价卖出去，血本无归。”市场上的茅台投资潮仍在消退。黄牛撤退，散户清仓，有投资者计算，全国库存可能超过1亿瓶。曾经的“液体黄金”，如今不灵了。然而与此同时，一群年轻人却炒作出了另一个比茅台还疯狂的产品。Labubu，这个来自泡泡玛特的“丑萌”小公仔，正在掀起一场全球消费狂潮。原价599元的限量款二手价可以飙到1.4万元，隐藏款从100元涨到3000元以上也...
点赞 评论 收藏
分享
06-12 22:32
中山大学 C++
点赞 评论 收藏
分享
评论
点赞
收藏
分享

招聘动态

查看更多

26届投递链接合集

华泰Fintech星战营

全站热榜

更多

创作者周榜

更多
正在热议
更多
# 考研对你找工作产生了哪些影响？ #
11434次浏览 119人参与
# 找实习你看重大厂光环还是业务方向 #
5505次浏览 49人参与
# 聊聊这家公司值得去吗 #
250501次浏览 2311人参与
# 摸鱼被leader发现了怎么办 #
57603次浏览 342人参与
# 职场捅娄子大赛 #
365594次浏览 3748人参与
# 大家实习每天都在干啥 #
81024次浏览 499人参与
# 实习想申请秋招offer，能不能argue薪资 #
139711次浏览 889人参与
# 我是XXX，请攻击我最薄弱的地方 #
28231次浏览 278人参与
# 打杂的实习你会去吗？ #
110822次浏览 966人参与
# kpi面有什么特征 #
39107次浏览 320人参与
# 机械人晒出你的简历 #
76090次浏览 635人参与
# 我发现一个规律 #
7986次浏览 70人参与
# 电信求职进展汇总 #
9266次浏览 79人参与
# 你有哪些缓解焦虑的方法？ #
6763次浏览 231人参与
# 海康威视求职进展 #
79101次浏览 457人参与
# 没有合适的工作，你会先找个干着，还是考公考研 #
112022次浏览 1114人参与
# 为了找工作你投递了多少公司？ #
16262次浏览 239人参与
# 校招第一份工作你干了多久？ #
75341次浏览 367人参与
# 机械只有读研才有出路吗？ #
20174次浏览 230人参与
# 硬件开发岗知多少 #
11447次浏览 116人参与
牛客网
牛客网在线编程
牛客网题解
牛客企业服务