【HarmonyOS NEXT星河版开发学习】小型测试案例15-博客列表

前言

该案例主要是ForEach渲染的练习，ForEach可以基于数组的个数，渲染组件个数（简化代码） 在后续的学习中应用肯定也是十分是广泛。该案例难度不大，没有用到太多杂乱的知识点，只是单纯的ForEach的练习。

构建思路

整体分析

仔细观察不难看出，这是一个列表，并且每一行的格式相同。因此就要考虑ForEach循环渲染，这样的好处就是减少了重复代码的出现，使得代码的可读性更高。

样式分析

仔细观察每行文字的样式以及他们之间的间隔，思考用什么组件合适一些 。 别忘了下方的边框线

界面讲解

State

由于有大小标题，所以用到了状态管理和数组。接口的定义不要忘记，大小标题统一放到了boke这一数组中。

内容部分

内容部分的定义不必严格按照上述代码进行定义，可以自己适当的根据文本的长度来自行修改

知识点概述

概念：

鸿蒙星河版的ForEach知识点涵盖了基于数组的循环渲染机制，支持静态和动态数据的高效管理，并提供了优化渲染性能的键值生成规则。

鸿蒙星河版中的ForEach是针对开发者在应用开发过程中处理列表数据的核心工具之一。ForEach的设计旨在提供一种基于数组类型数据的循环渲染能力。具体来说，ForEach接口需要与容器组件配合使用，且返回的组件应当是允许包含在ForEach父容器组件中的子组件。例如，如果使用ListItem组件，则要求ForEach的父容器组件必须为List组件。

关于ForEach的具体参数和用法，它接受三个主要参数：数组类型的数据源arr、组件生成函数itemGenerator以及可选的键值生成函数keyGenerator。其中，数据源可以设置为空数组，此时不会创建子组件；组件生成函数负责为数组中的每个元素创建对应的组件；而键值生成函数则为每个数组项生成一个唯一且持久的键值，用于标识对应的组件，确保在数组项更新或重新排序时能够正确地识别和更新相应的组件。

ForEach还提供了一个名为keyGenerator的可选参数，这是一个函数，允许开发者自定义键值的生成规则。若未定义keyGenerator函数，则框架会使用默认的键值生成函数。键值的生成对于ForEach循环渲染过程中组件的管理至关重要，因为它标识了对应的组件实例。当键值变化时，ArkUI框架将视为该数组元素已被替换或修改，并基于新的键值创建一个新的组件。

综上所述，ForEach不仅提供了灵活的数据绑定和组件生成机制，还通过键值生成规则优化了组件的复用和更新，从而提升了大规模数据处理的性能。这些特性使得鸿蒙星河版中ForEach成为构建高效、响应式用户界面的重要工具。

用法：

基本用法

• ForEach 接受一个数组作为数据源，并对数组中的每个元素执行一次指定的操作。
• 通常与容器组件如 List、Stack 或 Column 配合使用。
• 在循环体内，你可以访问当前元素和它的索引（如果需要的话）。

属性说明

• arr: 循环的数据源，通常是一个数组。
• indexKey: 可选参数，用于指定生成的每个子组件的唯一标识符。
• itemGenerator: 回调函数，接收当前元素和索引作为参数，并返回要渲染的 UI 组件。

注意事项

• 确保为每个子组件设置唯一的 key，以提高性能并避免不必要的重绘。
• 如果数据源发生变化，需要确保更新 UI 时的性能优化。
• 有时需要结合条件渲染使用，例如使用 if 语句在某些条件下渲染不同的 UI 元素。

高级用法

• 动态渲染：根据数据源的变化动态添加或删除 UI 元素。
• 懒加载：对于大型列表，可以使用懒加载技术仅加载当前屏幕可视范围内的项。
• 性能优化：利用虚拟 DOM 技术减少不必要的重绘操作。

代码展示

interface BoKe{
  title:string
  content:string
}
@Entry
@Component
struct Index {
  @State boke:BoKe[]=[
    {
      title:'Nginx+Tomcat负载均衡、动静分离群集',
      content:'Nginx(解析静态资源)+Tomcat(解析动态JSP代码)'
    },
    {
      title:'[Git][多人协作][下]详细讲解',
      content:'[Git][多人协作][下]详细讲解'
    },
    {
      title:'Pycharm中重命名项目之后切换虚拟环境',
      content:'Pycharm中重命名项目之后切换虚拟环境'
    },
  ]
  build() {
    Column(){
      ForEach(this.boke,(item:BoKe,index:number)=>{
        Column({space:5}){
          Text(item.title)
            .width('100%')
            .fontSize(16)

          Text(item.content)
            .width('100%')
            .fontColor('#5a566b')
            .fontSize(12)
            .margin({bottom:10})
        }
        .margin({bottom:10})
        .border({width:{bottom:1},color:'#f0f0f2'})
      })
    }
    .padding(20)
    .width('100%')
  }
}