HarmonyOS6 ArkTS ListItem通过ComponentContent设置划出组件

文章目录一、功能说明二、完整标准代码三、核心APIComponentContent 基础说明核心结构四、关键用法逐行解析1. 定义参数类传递数据2. 创建可复用Builder侧滑布局3. 初始化ComponentContent生命周期4. 动态更新参数高级能力5. ListItem绑定划出组件builderComponent6. 封装自定义ListItem组件五、运行效果总结一、功能说明ComponentContent是 HarmonyOS 提供的高级UI内容封装容器用于在swipeAction中替代普通builder实现向侧滑划出组件动态传递参数侧滑布局高度复用、统一管理运行时动态更新侧滑按钮文字/样式父子组件、列表控制器ListScroller无缝传递二、完整标准代码// xxx.ets import { ComponentContent } from kit.ArkUI; class BuilderParams { text: string | Resource; scroller: ListScroller; constructor(text: string | Resource, scroller: ListScroller) { this.text text; this.scroller scroller; } } Builder function itemBuilder(params: BuilderParams) { Row() { Button(params.text).margin(4vp) Button(Set).margin(4vp).onClick(() { params.scroller.closeAllSwipeActions() }) }.padding(4vp).justifyContent(FlexAlign.SpaceEvenly) } Component struct MyListItem { scroller: ListScroller new ListScroller(); State arr: number[] [0, 1, 2, 3, 4]; State project ?: number 0; startBuilder ?: ComponentContentBuilderParams undefined; endBuilder ?: ComponentContentBuilderParams undefined; builderParam new BuilderParams(delete, this.scroller); aboutToAppear(): void { this.startBuilder new ComponentContent(this.getUIContext(), wrapBuilder(itemBuilder), this.builderParam); this.endBuilder new ComponentContent(this.getUIContext(), wrapBuilder(itemBuilder), this.builderParam); } GetStartBuilder() { this.startBuilder?.update(new BuilderParams(StartDelete, this.scroller)); return this.startBuilder; } GetEndBuilder() { this.endBuilder?.update(new BuilderParams(EndDelete, this.scroller)); return this.endBuilder; } build() { ListItem() { Text(item this.project) .width(100%) .height(100) .fontSize(16) .textAlign(TextAlign.Center) .borderRadius(10) .backgroundColor(0xFFFFFF) } .transition(TransitionEffect.OPACITY) .swipeAction({ end: { builderComponent: this.GetEndBuilder(), onAction: () { this.getUIContext()?.animateTo({ duration: 1000 }, () { let index this.arr.indexOf(this.project); this.arr.splice(index, 1); }); }, actionAreaDistance: 56 }, start: { builderComponent: this.GetStartBuilder(), onAction: () { this.getUIContext()?.animateTo({ duration: 1000 }, () { let index this.arr.indexOf(this.project); this.arr.splice(index, 1); }); }, actionAreaDistance: 56 } }) .padding(5) } } Entry Component struct ListItemExample { State arr: number[] [0, 1, 2, 3, 4]; private scroller: ListScroller new ListScroller(); build() { Column() { List({ space: 10, scroller: this.scroller }) { ListItemGroup() { ForEach(this.arr, (project: number) { MyListItem({ scroller: this.scroller, project: project, arr: this.arr }) }, (item: string) item) } } } .padding(10) .backgroundColor(0xDCDCDC) .width(100%) .height(100%) } }运行效果如图当向左边滑动当向右边滑动三、核心APIComponentContent 基础说明ComponentContent是官方推荐的UI内容动态封装工具专门用于封装Builder函数向Builder传递自定义参数运行时更新参数并刷新UI在swipeAction中作为builderComponent使用核心结构newComponentContent(uiContext:UIContext,// 上下文builder:WrappedBuilderParams,// 被wrap的Builderparams:Params// 自定义参数)四、关键用法逐行解析1. 定义参数类传递数据创建BuilderParams统一管理侧滑组件需要的按钮文字和滚动控制器class BuilderParams { text: string | Resource; // 按钮显示文本 scroller: ListScroller; // 列表滑动控制器 constructor(text: string | Resource, scroller: ListScroller) { this.text text; this.scroller scroller; } }2. 创建可复用Builder侧滑布局使用Builder定义通用侧滑按钮布局接收外部参数Builder function itemBuilder(params: BuilderParams) { Row() { Button(params.text) // 动态按钮文字 Button(Set).onClick(() { params.scroller.closeAllSwipeActions() // 关闭滑动 }) }.justifyContent(FlexAlign.SpaceEvenly) }3. 初始化ComponentContent生命周期在aboutToAppear中创建ComponentContent实例绑定Builder和参数aboutToAppear(): void { this.startBuilder new ComponentContent( this.getUIContext(), wrapBuilder(itemBuilder), // 包装Builder this.builderParam // 传入参数 ); }4. 动态更新参数高级能力通过update()方法运行时修改侧滑按钮显示内容GetStartBuilder() { this.startBuilder?.update( new BuilderParams(StartDelete, this.scroller) ); return this.startBuilder; }5. ListItem绑定划出组件builderComponent在swipeAction中使用builderComponent绑定ComponentContent.swipeAction({ end: { builderComponent: this.GetEndBuilder(), // 绑定ComponentContent onAction: () { /* 删除逻辑 */ }, actionAreaDistance: 56 }, start: { builderComponent: this.GetStartBuilder(), } })6. 封装自定义ListItem组件将完整ListItem侧滑逻辑封装为MyListItem支持外部传入数据MyListItem({ scroller: this.scroller, project: project, arr: this.arr })五、运行效果列表展示5个白色圆角列表项左滑显示 StartDelete Set 按钮右滑显示 EndDelete Set 按钮点击Set关闭所有展开的滑动项滑动超过阈值触发平滑删除动画所有列表项共用一套侧滑布局实现高度复用总结ComponentContent是 HarmonyOS 6 为ListItem侧滑划出组件提供的高级官方方案核心价值解决传统builder无法传递参数的问题实现侧滑布局复用化、模块化、统一管理支持运行时动态更新侧滑按钮内容可传递复杂对象控制器、自定义数据是企业级项目中列表交互的标准实践如果这篇文章对你有帮助欢迎点赞、收藏、关注你的支持是持续创作的动力