梅科尔工作室-崔启凡-鸿蒙笔记3

list组件

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

基本代码

List(){//List大容器
ListItem(){//ListItem小容器，用来装饰内容
//编写内容
}
}

代码示例

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%")
}
}

效果

• 接口`List(value?:{space?: number | string, initialIndex?: number, scroller?: Scroller})
• 参数：
  `

父子组件（自定义组件）

• 在另一个文件夹中编写子组件（修饰器不用写@entry），子组件导出用export语句

@Component
export struct child{
  build(){
    Text('1')
      .fontSize(30)
    Button('按钮')
      .width(100).height(50)
  }
}

• 调用子组件的称为父组件，父组件导入用import {子组件文件名称} from “子组件文件相对路径”

import{子组件名字} from"路径"  //引入子组件

双向数据绑定

• 改变任何一方数据时，两方数据都会变为改变的一方数据
• 子组件中数据用@Link修饰

 @Link 子组件名字：string

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

@State fuzujiantext: string="父组件";

子组件名字({zizujiantext:$fuzujiantext})

if-else渲染

• 使用语法
  • if/else渲染可以改变组件的渲染状态，即决定组件是否在页面中被渲染。if括号内的变量是true的话，则对应下的组件都被渲染，否则都不被渲染。
• 注意事项
  • 必须在容器组件内使用。
  • 使用if/else可以使子组件的渲染依赖条件语句。
• 示例
  • 使用if条件语句：

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

• 使用if、else if、if语句

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(
  arr: any[], 
  itemGenerator: (item: any, index?: number) => void,
  keyGenerator?: (item: any, index?: number) => string 
)

• 说明

  • ForEach必须在容器组件内使用。

  • 生成的子组件应当是允许包含在ForEach父容器组件中的子组件。

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

  • itemGenerator函数的调用顺序不一定和数组中的数据项相同，在开发过程中不要假设itemGenerator和keyGenerator函数是否执行及其执行顺序。

• 代码示例

// 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())
    }
  }
}

案例

循环、列表

代码

@Entry
@Component
struct ListExample {
  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]  // 一个列表

  build() {
      Column() {
        Column() {
          List({ space: 20 }) {
            ForEach(this.arr, (item) => {    //for循环渲染出10个Listitem小列表
              ListItem() {
                Text(item.toString())  //使列表里面的元素转化为字符串出现到文本里
                  .width('100%')
                  .height(90)
                  .fontSize(36)  //文字大小
                  .textAlign(TextAlign.Center)  //文字居中
                  .backgroundColor("#007DEF")//背景颜色
                  .borderRadius(20)  //使ListItem出现圆角
              }
            })
          }
          .listDirection(Axis.Vertical) // 排列方向

        }
        .width("90%")  //宽高都设为90%便于居中美观
        .height('90%')
      }
      .width('100%') //宽高100%让容器沾满手机屏幕
      .height('100%')
      .justifyContent(FlexAlign.SpaceAround)//沿中心线对齐


  }
}

• 效果（可以动的）
  

父子组件、点击事件

子代码

@Component
export struct child{  //导出
  @Link childnum:number
  @Link childstatu:boolean
  build() {
    Column({space:10}) {  //容器，子组件间隔10
      if(this.childstatu){  //如果真执行，如果假不执行；真假由childststu的值决定
        Text(this.childnum.toString())  //文本组件，括号内是为了让内容转化为字符型
          .fontSize(80)  //字体大小
          .fontColor(Color.Red)// 字体颜色
      }
      Button('增加')   //这是一个按钮
        .width(200).height(90)
        .fontSize(30)  //按钮中文本大小
        .onClick(()=>{  //点击事件
          this.childnum++//点击后childnum的值加1
        })
      Button('减少')
        .width(200).height(90)
        .fontSize(30)
        .onClick(()=>{
          this.childnum--//点击后childnum的值减1
        })
      Button('归零')
        .width(200).height(90)
        .fontSize(30)
        .onClick(()=>{
          this.childnum = 0//点击后childnum的值变为零
        })
      Button('显示')
        .width(200).height(90)
        .fontSize(30)
        .onClick(()=>{
          this.childstatu =! this.childstatu//真假互换
        })
    }
  }
}

父代码

import{child} from"../common/child"  //引入子组件
@Entry
@Component
struct Index{
  @State fathernum:number = 0 //设fathernum为number类型值为0
  @State fatherstatu:boolean = true//设fatherstatu为boolean类型值为true
  build() {
    Row() {
      Column() {
        child({ childnum: $fathernum,childstatu:$fatherstatu})  //子组件
      }
      .width('100%')
    }
    .height('100%')
  }
}

效果图
开始运行

点击三次增加（点击一次数字加一）

点击一次减少数字就会减一

点击归零（即数字变为零）

点击显示可隐藏或显示数字