介绍
实现下图界面：
代码
@Entry
@Component
struct Index {
@Builder
zhibo(imgPath1:string,text:string){
ListItem(){
Row(){
Image($r(imgPath1))
.width(25)
.margin({
right:10
})
Text(text)
Blank()
Image($r("app.media.startIcon"))
.width(25)
.margin({
right:10
})
}
.width("100%")
}
.height(50)
}
@Builder
pengYouQuan(imgPath1:string,text:string,imgPath2:string){
ListItem(){
Row(){
Image($r(imgPath1))
.width(25)
.margin({
right:10
})
Text(text)
Blank()
Image($r(imgPath2))
.width(25)
.margin({
right:10
})
Image($r("app.media.startIcon"))
.width(25)
.margin({
right:10
})
}
.width("100%")
}
.height(50)
}
@Styles
listItemGroupStyle(){
.margin({
bottom:10,
})
.padding({
left:10,
})
.backgroundColor("#fff")
}
build() {
List(){
ListItemGroup() {
this.pengYouQuan("app.media.startIcon", "视频号", "app.media.startIcon")
}
.listItemGroupStyle()
.divider({
strokeWidth:1,
color:"#eee",
startMargin:35,
})
ListItemGroup(){
this.pengYouQuan("app.media.startIcon","视频号","app.media.startIcon")
this.zhibo("app.media.startIcon","直播")
}
.listItemGroupStyle()
.divider({
strokeWidth:1,
color:"#eee",
startMargin:35,
})
ListItemGroup(){
this.zhibo("app.media.startIcon","扫一扫")
this.zhibo("app.media.startIcon","摇一摇")
}
.listItemGroupStyle()
.divider({
strokeWidth:1,
color:"#eee",
startMargin:35,
})
ListItemGroup(){
this.zhibo("app.media.startIcon","看一看")
this.zhibo("app.media.startIcon","搜一搜")
}
.listItemGroupStyle()
.divider({
strokeWidth:1,
color:"#eee",
startMargin:35,
})
}
.height("100%")
.backgroundColor("#eee")
}
}