梅科尔工作室-张威-鸿蒙笔记三

list组件

由list容器组件和listitem容器组件构成,list是一个大容器,listitem是大容器里的小容器

代码
List(){
    ListItem(){
}
}
梅科尔工作室-张威-鸿蒙笔记三_第1张图片
示例
List( ) {
ListItem(){
    Text("示例1")
    .fontSize(30).width("90%").height("10%")
}
ListItem(){
    Text("示例2")
    fontSize(30).width("90%").height("10%")
}
ListItem(){
    Text("示例3")
    .fontSize(30) .width("90%").height("10%")
}
ListItem(){
    Text("示例4")
    .fontSize(30).width("90%").height("10%")
}
}
运行结果
梅科尔工作室-张威-鸿蒙笔记三_第2张图片

父子组件(自定义组件)

子组件在另一个文件夹中新建一个,导出用export语句

梅科尔工作室-张威-鸿蒙笔记三_第3张图片

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

梅科尔工作室-张威-鸿蒙笔记三_第4张图片

双向数据绑定

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

子组件中数据用@Link修饰

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

if-else渲染

使用语法

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

注意事项

必须在容器组件内使用。

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

示例

使用if条件语句:

Column(){
if(this.count>0){
    Text('count is positive')
}}

使用if、else if、else条件语句:

Column(){
if(this.count<0){
    Text('count is negative')
}
else if(this.count%2===0){
    Divider
    Text('even')
} else{
    Divider
    Text('odd')
}
}

for循环渲染

开发框架提供循环渲染(ForEach组件)来迭代数组,并为每个数组项创建相应的组件。ForEach定义如下:

使用语法

ForEach(
  arr: any[], 
  itemGenerator: (item: any, index?: number) => void,
  keyGenerator?: (item: any, index?: number) => string 
)
梅科尔工作室-张威-鸿蒙笔记三_第5张图片

注意事项

·必须在容器组件内使用;

·生成的子组件允许在ForEach的父容器组件中

·允许子组件生成器函数中包含if/else条件渲染

·同时也允许ForEach包含在if/else条件渲染语句中;

示例

简单类型数组示例:

// xxx.ets
@Entry
@Component
struct MyComponent {
  @State arr: number[] = [10, 20, 30]

  build() {
    Column({ space: 5 }) {
      Button('Reverse Array')
        .onClick(() => {
          this.arr.reverse()
        })

      ForEach(this.arr, (item: number) => {
        Text(`item value: ${item}`).fontSize(18)
        Divider().strokeWidth(2)
      }, (item: number) => item.toString())
    }
  }
}

运用

循环列表
代码
// @ts{child} from "../common/child"
@Entry
@Component
struct Index {
@State fathernum: string = '222'
@State numlist:number[] = [0,1,2,3,4,5,6,7,8,9]
  @State num:number=1
  build() {
      Column() {
        Text("你心目中的男神")
        .fontSize(40)
         List({space:20}){
           ForEach(this.numlist,(item,index)=>{
            ListItem(){
               Row() {
                Text(item.toString())
                   .fontSize(25).width("100%").height("10%")
                   .backgroundColor("#DCDCDC").textAlign(TextAlign.Center)
                  .borderRadius(25)
                }
             }
           })
        }
        }
      .width('100%').height('100%')

    .justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center)
  }
}
效果‘

梅科尔工作室-张威-鸿蒙笔记三_第6张图片

可滑动,有弹性

父子代码
子代码
@Component
export struct child {
  @Link childnum:number
  @Link childstatu:boolean
  build(){
    Column({space:10}) {
      if (this.childstatu) {
        Text(this.childnum.toString())
          .fontSize(30)
      }
      Button("增加")
        .width(100).height(50)
        .onClick(()=>{
        this.childnum++
        })
      Button("减少")
        .width(100).height(50)
        .onClick(()=>{
          this.childnum--
        })
      Button("显示")
        .width(100).height(50)
        .onClick(()=>{
          this.childstatu =! this.childstatu
        })

    }
  }
}
父代码
import {child} from "../common/child"

@Entry
@Component
struct Second{
  @State fathernum:number=0
  @State fatherstatu:boolean = true

  build(){
    Row(){
      Column(){
        child({childnum:$fathernum,childstatu:$fatherstatu})
      }
      .width('100%')
    }
    .height('100%')
  }
}
效果
梅科尔工作室-张威-鸿蒙笔记三_第7张图片

点增加数字+1,点减少数字-1,点显示可以切换数字是否显示

你可能感兴趣的:(开发语言)