HarmonyOS组件介绍续

目录

List组件

子组件

接口

语法 

父子组件

组件导出

双向数据绑定

if-else渲染

使用语法

注意事项

for循环渲染

使用语法

注意事项 

---

List组件

子组件：

Listitem 

接口：

List(value?:{space?: number | string, initialIndex?: number, scroller?: Scroller})

属性 

 

语法 

例

    List({space:20}) {
        ListItem(){
          Text(1)
            .fontSize(30).width("100%").height("10%")
            .backgroundColor("#FFC0CB").textAlign(TextAlign.Center)
            .borderRadius(20)
        }
        ListItem(){
          Text(2)
            .fontSize(30).width("100%").height("10%")
            .backgroundColor("#FFC0CB").textAlign(TextAlign.Center)
            .borderRadius(20)
        }
        ListItem(){
          Text(3)
            .fontSize(30).width("100%").height("10%")
            .backgroundColor("#FFC0CB").textAlign(TextAlign.Center)
            .borderRadius(20)
        }
    }

效果如下（上下拉有弹性）

 

在List组件外面用.edgeEffect(EdgeEffect.None) 就可以消除弹性

父子组件

父组件：

子组件 （自定义组件）

 子组件不能直接预览，必须导入父组件才行。

• 组件导出

子组件导出用export语句

export struct child{

父组件导入用import{子组件文件名称}from "子组件文件相对路径"

import {zidingyi} from "../common/component/child"

• 双向数据绑定

改变任何一方数据时：两方数据都会变为改变的一方数据

子组件中数据用@Link修饰：

@Link childnum:string

还要把子组件页面里的Text或者其他组件里的值写成  this.childnum

父组件中用@State修饰，在子组件接口中数据用$修饰:

@State fathernum:string = "父组件"

child({childnum:$fathernum})

if-else渲染

使用语法

if/else渲染可以改变组件的渲染状态，即决定组件是否在页面中被渲染，if括号内的变量是true的话，则对应下的组件都被渲染，否则都不被渲染。

if() {
    语句
}

注意事项

必须在容器组件内使用。

使用if/else可以使子组件的渲染依赖条件语句。

for循环渲染

开发框架提供循环渲染（ForEach组件）来迭代数组，并为每个数组创建相应的组件。

ForEach定义如下：

使用语法

@Entry
@Component
struct Index {
  @State numlist:number[]= [0,1,2,3,4,5,6,7,8,9]
  @State num:number = 1
  build() {
    Column() {
      Text("列表")
      .fontSize(30)
    List({space:20}) {
      ForEach(this.numlist,(item)=>{
        ListItem(){
          Text(item.toString())  //item是指数组里的数字，toString是把数字转化为字符
            .fontSize(30).width("100%").height("10%")
            .backgroundColor("#FFC0CB").textAlign(TextAlign.Center)
            .borderRadius(20)
        }
      })
    }
    }
    .height('100%').width("100%")
    .justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center)
  }
}

注意事项 

必须在容器组件内使用。

生成的子组件允许在ForEach的父容器组件中，允许子组件生成器函数中包含if/else条件渲染，同时也允许ForEach包含在if/else条件渲染语句中；