零基础开始学习鸿蒙开发-自定义List_鸿蒙开发 二级列表

目录

1.介绍一下鸿蒙开发的 List即列表，从外到内的范围： List>ListItemGroup>ListItem，我们可以在LIst组件内部使用ListItemGroup和ListItem,而在ListItemGroup，只能使用ListItem组件。此外，我们还可以在ListItem内部嵌套如Column、Row、Text、Image等组件，这些组件只能嵌套在最小的组件ListItem中使用。

2.我们可以给列表进行分组，并且设置分组名称，通过@Builder构建分组名称，即分组的头部。

3.下面是我写的完整的自定义List。

4.运行效果 如下图所示

1.介绍一下鸿蒙开发的 List即列表，从外到内的范围： List>ListItemGroup>ListItem，我们可以在LIst组件内部使用ListItemGroup和ListItem,而在ListItemGroup，只能使用ListItem组件。此外，我们还可以在ListItem内部嵌套如Column、Row、Text、Image等组件，这些组件只能嵌套在最小的组件ListItem中使用。

代码示例:
 
1.我们可以这样使用List
 List(){
  ListItemGroup(){
};
 ListItem(){
};
}
2.可以这样使用ListItemGroup
 List(){
  ListItemGroup(){
 ListItem(){
};
 ListItem(){
};
};
 
}
3.可以这样的使用
 ListItem(){
Row(){
};
Text(){
}
};
.....等等以此类推。
 

2.我们可以给列表进行分组，并且设置分组名称，通过@Builder构建分组名称，即分组的头部。

代码示例:  
 
//用于构建分组名称的方法
  @Builder itemHeader(name:string){
    Text(name).fontSize(20).border({width:5}).backgroundColor(Color.Gray)
}

3.下面是我写的完整的自定义List。

@Entry
@Component
struct listView{
  //用于构建分组名称的方法
  @Builder itemHeader(name:string){
    Text(name).fontSize(20).border({width:5}).backgroundColor(Color.Gray)
}
  build(){
    //从外到内的范围： List>ListItemGroup>ListItem
    //列表
   List(){
     ListItemGroup({header:this.itemHeader("蔬菜"),space:5}){
       ListItem(){
         Text("萝卜").fontSize(20).width("80")
       };
       ListItem(){
         Text("黄瓜").fontSize(20).width("80")
       };
       ListItem(){
         Text("西红柿").fontSize(20).width("80")
       }
     };
     ListItem(){
       Text("------------------------分割线-----------------------").fontSize(12).fontColor(Color.Gray).width("80%").margin({left:20,right:20})
     }
     ListItemGroup({header:this.itemHeader("城市"), space:5}){
       ListItem(){
         Text("北京").fontSize(20).width("80")
       };
       ListItem(){
         Text("上海").fontSize(20).width("80")
       };
       ListItem(){
         Text("深圳").fontSize(20).width("80")
       }
     }
   }.alignListItem(ListItemAlign.Center)
    .margin({top:50})
  }
}

4.运行效果 如下图所示