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%')
}
}
效果图
开始运行
点击三次增加(点击一次数字加一)
点击一次减少数字就会减一
点击归零(即数字变为零)
点击显示可隐藏或显示数字