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

一、功能说明

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 ?: ComponentContent<BuilderParams> = undefined; endBuilder ?: ComponentContent<BuilderParams> = 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%') } }

运行效果如图：

当向左边滑动：

当向右边滑动：

三、核心API：ComponentContent 基础说明

ComponentContent是官方推荐的UI内容动态封装工具，专门用于：

• 封装@Builder函数
• 向Builder传递自定义参数
• 运行时更新参数并刷新UI
• 在swipeAction中作为builderComponent使用

核心结构

newComponentContent(uiContext:UIContext,// 上下文builder:WrappedBuilder<Params>,// 被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 })

五、运行效果

1. 列表展示5个白色圆角列表项
2. 左滑：显示 StartDelete + Set 按钮
3. 右滑：显示 EndDelete + Set 按钮
4. 点击Set：关闭所有展开的滑动项
5. 滑动超过阈值：触发平滑删除动画
6. 所有列表项共用一套侧滑布局，实现高度复用

总结

ComponentContent是 HarmonyOS 6 为ListItem侧滑划出组件提供的高级官方方案，核心价值：

1. 解决传统builder无法传递参数的问题
2. 实现侧滑布局复用化、模块化、统一管理
3. 支持运行时动态更新侧滑按钮内容
4. 可传递复杂对象（控制器、自定义数据）
5. 是企业级项目中列表交互的标准实践

如果这篇文章对你有帮助，欢迎点赞、收藏、关注，你的支持是持续创作的动力！