在List组件详解(一) 中我们已经将基础的框架搭建好了。 接下来为了方便, 我们在子组件编写一个返回的按钮 ,代码如下
/**
* @Author: 若城
* @Description:
*/
import router from '@ohos.router';
@Entry
@Component
struct ListBasics {
@State labelName:string = router.getParams()['labelStr']
build() {
Row() {
Column() {
// 返回按钮
Row(){
Button('<', {type:ButtonType.Circle}).fontSize(20).margin(10).fontWeight(900)
Text(this.labelName).fontSize(30).textOverflow({overflow:TextOverflow.Ellipsis}).width(200).maxLines(1)
}.width('100%')
.height(50)
.onClick(()=>{
router.back()
})
Divider().color('#999').strokeWidth(3)
}
.width('100%')
.height('100%')
}
.height('100%')
.width('100%')
}
}
listDirection的默认值就是 Axis.Vertical 因此无需进行额外设置
效果图
代码如下:
List(){
ForEach(this.directionData, (item)=>{
ListItem(){
Column(){
Text(item).backgroundColor('#000').fontSize(20).fontColor('#fff').padding(10)
}
}
})
}.height(100)
效果图
代码如下: 在list组件上添加 listDirection(Axis.Horizontal) 即可
List(){
ForEach(this.directionData, (item)=>{
ListItem(){
Column(){
Text(item).backgroundColor('#000').fontSize(20).fontColor('#fff').padding(10)
}
}
})
}.height(100).listDirection(Axis.Horizontal)
效果图
代码如下: 在List 组件上添加 divider 来实现
List(){
ForEach(this.directionData, (item)=>{
ListItem(){
Column(){
Text(item).backgroundColor('#000').fontSize(20).fontColor('#fff').width('100%').height(50)
}
}
})
}.height(200)
.divider({
strokeWidth:3,
color:"#fff",
})
根据List的特性结合swipeAction 属性可以完成一个简单的列表滑出选择的案例
通过 private 来创建我们所需的数据
private ListData:object[]=[
{
label:"丙辰中秋,欢饮达旦,大醉,作此篇,兼怀子由",
value:"rc1"
},{
label:"明月几时有?把酒问青天。不知天上宫阙,今夕是何年。",
value:"rc2"
},{
label:"我欲乘风归去,又恐琼楼玉宇,高处不胜寒。起舞弄清影,何似在人间。",
value:"rc3"
},{
label:"转朱阁,低绮户,照无眠。不应有恨,何事长向别时圆?",
value:"rc4"
},{
label:"人有悲欢离合,月有阴晴圆缺,此事古难全。但愿人长久,千里共婵娟。",
value:"rc5"
}
]
通过foreach 遍历数据 展示list 列表
List(){
ForEach(this.ListData, (item)=>{
ListItem(){
Column({space:10}){
Row(){
Text(item.label).fontSize(25).lineHeight(30).maxLines(3).margin({top:10, bottom:10})
}.borderStyle({bottom:BorderStyle.Solid}).borderWidth({left:0, top:0, bottom:3,right:0}).borderColor('#989').borderRadius(3)
.width('100%')
.padding({left:10, right:10})
}
}
})
}
滑出的内容需要一个自定义的组件, 而在arkts 中 通过 @Builder 来创建组件, 关于组件的创建,以及传值等内容后面的章节中会有讲到, 本次的案例可以只做了解
// 自定义滑出组件
@Builder DelItem(){
Row(){
Button('删除').type(ButtonType.Capsule).backgroundColor('#f00')
}.padding(10)
}
在ListItem 中 可以通过 swipeAction 属性来设置ListItem的划出组件, 完整代码如下
/**
* @Author: 若城
* @Description: 实现List 左滑 删除或修改 案例
*/
@Entry
@Component
struct ListCase {
private ListData:object[]=[
{
label:"丙辰中秋,欢饮达旦,大醉,作此篇,兼怀子由",
value:"rc1"
},{
label:"明月几时有?把酒问青天。不知天上宫阙,今夕是何年。",
value:"rc2"
},{
label:"我欲乘风归去,又恐琼楼玉宇,高处不胜寒。起舞弄清影,何似在人间。",
value:"rc3"
},{
label:"转朱阁,低绮户,照无眠。不应有恨,何事长向别时圆?",
value:"rc4"
},{
label:"人有悲欢离合,月有阴晴圆缺,此事古难全。但愿人长久,千里共婵娟。",
value:"rc5"
}
]
// 自定义滑出组件
@Builder DelItem(){
Row(){
Button('删除').type(ButtonType.Capsule).backgroundColor('#f00')
}.padding(10)
}
build() {
Row() {
Column() {
List(){
ForEach(this.ListData, (item)=>{
ListItem(){
Column({space:10}){
Row(){
Text(item.label).fontSize(25).lineHeight(30).maxLines(3).margin({top:10, bottom:10})
}.borderStyle({bottom:BorderStyle.Solid}).borderWidth({left:0, top:0, bottom:3,right:0}).borderColor('#989').borderRadius(3)
.width('100%')
.padding({left:10, right:10})
}
}
.swipeAction({end:this.DelItem})
})
}
}
.width('100%')
.height('100%')
}
.height('100%')
.width('100%')
}
}
注意: start和end对应的@builder函数中顶层必须是单个组件,不能是if/else、ForEach、LazyForEach语句。