ArkUI ActionSheet：操作一多，就别塞进确认框
【摘要】 今天我们用 ActionSheet 做三组操作列表：分享、附件处理和更多操作。 ActionSheet 适合“用户要从一组动作里选一个”。如果只有一个确认动作，用 AlertDialog 更直；如果只是告诉用户结果，用 Toast 更轻。 分享操作 第一组是分享列表。 title 和 subtitle 先把场景说清楚，
ArkUI ActionSheet：操作一多，就别塞进确认框
今天我们用 ActionSheet 做三组操作列表：分享、附件处理和更多操作。
ActionSheet 适合“用户要从一组动作里选一个”。如果只有一个确认动作，用 AlertDialog 更直；如果只是告诉用户结果，用 Toast 更轻。
分享操作
第一组是分享列表。
this.getUIContext().showActionSheet({
title: '分享这篇笔记',
subtitle: '选择一个分享方式',
message: 'ActionSheet 适合把同一类操作集中起来。',
confirm: {
value: '取消',
action: () => {
console.info('ActionSheet cancel share')
}
},
sheets: [
{
title: '复制链接',
action: () => {
console.info('ActionSheet copy link')
}
}
]
})title 和 subtitle 先把场景说清楚，sheets 里再放具体动作。示例里没有记录用户点了哪一项，只在回调里打印日志。
附件处理
第二组换成文件场景。
sheets: [
{
title: '预览附件',
action: () => {
console.info('ActionSheet preview file')
}
},
{
title: '重命名',
action: () => {
console.info('ActionSheet rename file')
}
}
]预览、重命名、移动都围绕同一个附件展开，放在一个 ActionSheet 里很自然。页面上就不用硬塞一排按钮。
更多操作
第三组是低频动作。
this.getUIContext().showActionSheet({
title: '更多操作',
subtitle: '把低频操作收起来',
message: '危险项可以放进操作列表，但真正删除前通常还要再确认。',
confirm: {
value: '关闭',
action: () => {
console.info('ActionSheet close more')
}
},
sheets: [
{
title: '置顶',
action: () => {
console.info('ActionSheet pin item')
}
},
{
title: '删除',
action: () => {
console.info('ActionSheet delete item')
}
}
]
})这里有一个取舍：删除可以出现在操作列表里，但真正执行前一般还要再确认。我们这篇先把 ActionSheet 讲干净，不把它写成完整业务流程。
你自己的页面里有没有那种“按钮越堆越多”的地方？可以试着挑一个，把低频动作收进 ActionSheet。
完整代码
@Entry
@Component
struct ArkUIActionSheetDemo {
private showShareSheet(): void {
this.getUIContext().showActionSheet({
title: '分享这篇笔记',
subtitle: '选择一个分享方式',
message: 'ActionSheet 适合把同一类操作集中起来。',
confirm: {
value: '取消',
action: () => {
console.info('ActionSheet cancel share')
}
},
sheets: [
{
title: '复制链接',
action: () => {
console.info('ActionSheet copy link')
}
},
{
title: '发送给好友',
action: () => {
console.info('ActionSheet send friend')
}
},
{
title: '生成海报',
action: () => {
console.info('ActionSheet create poster')
}
}
]
})
}
private showFileSheet(): void {
this.getUIContext().showActionSheet({
title: '处理附件',
subtitle: '常用操作放在同一层',
message: '每一项都是独立动作，点击后这里只打印日志。',
confirm: {
value: '先不处理',
action: () => {
console.info('ActionSheet cancel file')
}
},
sheets: [
{
title: '预览附件',
action: () => {
console.info('ActionSheet preview file')
}
},
{
title: '重命名',
action: () => {
console.info('ActionSheet rename file')
}
},
{
title: '移到文件夹',
action: () => {
console.info('ActionSheet move file')
}
}
]
})
}
private showDangerSheet(): void {
this.getUIContext().showActionSheet({
title: '更多操作',
subtitle: '把低频操作收起来',
message: '危险项可以放进操作列表，但真正删除前通常还要再确认。',
confirm: {
value: '关闭',
action: () => {
console.info('ActionSheet close more')
}
},
sheets: [
{
title: '置顶',
action: () => {
console.info('ActionSheet pin item')
}
},
{
title: '复制一份',
action: () => {
console.info('ActionSheet duplicate item')
}
},
{
title: '删除',
action: () => {
console.info('ActionSheet delete item')
}
}
]
})
}
@Builder
sectionTitle(title: string, desc: string) {
Column({ space: 6 }) {
Text(title)
.fontSize(19)
.fontWeight(FontWeight.Bold)
.fontColor('#111827')
Text(desc)
.fontSize(13)
.fontColor('#6B7280')
.lineHeight(20)
}
.width('100%')
.alignItems(HorizontalAlign.Start)
}
@Builder
sheetCard(title: string, desc: string) {
Column({ space: 6 }) {
Column({ space: 6 }) {
Text(title)
.fontSize(17)
.fontWeight(FontWeight.Bold)
.fontColor('#111827')
Text(desc)
.fontSize(13)
.fontColor('#6B7280')
.lineHeight(20)
}
.width('100%')
.alignItems(HorizontalAlign.Start)
}
.width('100%')
.padding(16)
.borderRadius(14)
.backgroundColor('#FFFFFF')
.border({ width: 1, color: '#E5E7EB' })
.alignItems(HorizontalAlign.Start)
}
build() {
Scroll() {
Column({ space: 22 }) {
Column({ space: 8 }) {
Text('ArkUI ActionSheet')
.fontSize(28)
.fontWeight(FontWeight.Bold)
.fontColor('#111827')
Text('操作一多，就别塞进确认框')
.fontSize(16)
.fontColor('#4B5563')
Text('ActionSheet 更像一张操作清单。它适合“选一个动作去做”，不适合承载长说明。')
.fontSize(14)
.fontColor('#6B7280')
.lineHeight(22)
}
.width('100%')
.alignItems(HorizontalAlign.Start)
this.sectionTitle('分享操作：同类动作集中放', '复制、发送、生成海报都属于分享链路，放进同一个列表更清楚。')
this.sheetCard('分享笔记', 'title 和 subtitle 先说明场景，sheets 里放具体动作。')
Button('打开分享列表')
.fontSize(14)
.fontColor('#FFFFFF')
.backgroundColor('#2563EB')
.borderRadius(18)
.height(38)
.padding({ left: 18, right: 18 })
.onClick(() => this.showShareSheet())
this.sectionTitle('文件操作：让列表承担选择', '操作超过两个时，ActionSheet 比确认框更适合。')
this.sheetCard('附件处理', '预览、重命名、移动都是同一对象上的操作。')
Button('打开附件列表')
.fontSize(14)
.fontColor('#FFFFFF')
.backgroundColor('#0F766E')
.borderRadius(18)
.height(38)
.padding({ left: 18, right: 18 })
.onClick(() => this.showFileSheet())
this.sectionTitle('更多操作：低频动作别挤在页面上', '页面里只放高频按钮，低频动作收进列表里。')
this.sheetCard('更多菜单', '这里不记录用户选了哪一项，只演示 ActionSheet 的结构。')
Button('打开更多列表')
.fontSize(14)
.fontColor('#FFFFFF')
.backgroundColor('#C2410C')
.borderRadius(18)
.height(38)
.padding({ left: 18, right: 18 })
.onClick(() => this.showDangerSheet())
}
.width('100%')
.padding(24)
.alignItems(HorizontalAlign.Start)
}
.width('100%')
.height('100%')
.backgroundColor('#F8FAFC')
}
}
【版权声明】本文为华为云社区用户原创内容，未经允许不得转载，如需转载请自行联系原作者进行授权。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）