梅科尔工作室-张启帆-鸿蒙笔记3

本节培训所学习的有list组件，父子组件和if-else/for循环渲染，以下从这些方面来介绍。

1.list组件

列表包含一系列相同宽度的列表项。适合连续、多行呈现同类数据，例如图片和文本。包含ListItem、ListItemGroup子组件。下方使一些有关的参数名和描述等。

 这是官方所举出来的一个案例，可以参考一下，动画效果可以去官网看下

// xxx.ets
@Entry
@Component
struct ListExample {
  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

  build() {
    Column() {
      List({ space: 20, initialIndex: 0 }) {
        ForEach(this.arr, (item) => {
          ListItem() {
            Text('' + item)
              .width('100%').height(100).fontSize(16)
              .textAlign(TextAlign.Center).borderRadius(10).backgroundColor(0xFFFFFF)
          }
        }, item => item)
      }
      .listDirection(Axis.Vertical) // 排列方向
      .divider({ strokeWidth: 2, color: 0xFFFFFF, startMargin: 20, endMargin: 20 }) // 每行之间的分界线
      .edgeEffect(EdgeEffect.Spring) // 滑动到边缘无效果
      .onScrollIndex((firstIndex: number, lastIndex: number) => {
        console.info('first' + firstIndex)
        console.info('last' + lastIndex)
      })
      .width('90%')
    }
    .width('100%')
    .height('100%')
    .backgroundColor(0xDCDCDC)
    .padding({ top: 5 })
  }
}

 2父子组件

简单来说呢，类似于c语言中的函数调用，父页面相当于使主的，子页面写的内容都可以在父页面呈现出来，这样子写的话，当我们所要对我i们的代码进行改动时，就不需要大范围改动了，哪里需要修改，寻找对应子页面即可。以下呢是自己所做的一个例子。

其中child.ets为所建立的子页面，里面export struct child 相当于把这个调出到父页面中运用

 

3.for循环渲染 

开发框架提供循环渲染（ForEach组件）来迭代数组，并为每个数组项创建相应的组件。当循环渲染的元素较多时，会出现页面加载变慢的情况，出于性能考虑，建议使用LazyForEach代替。ForEach定义如下：

 以下是一些具体描述和案例

 

 

 

 以上就是此次的一些笔记。