梅科尔工作室E1-张冉-鸿蒙笔记3

list组件

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

代码

List(){

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

}

}

运行结果

父子组件（自定义组件）

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

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

双向数据绑定

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

子组件中数据用@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

)

注意事项

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

·生成的子组件允许在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)

}

}

效果‘

可滑动，有弹性

父子代码

子代码

@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%')

}

}

效果

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