You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

iOS开发:如何实现类似通讯录App的多行ActionSheet?

嘿,这个问题我刚好研究过!iOS通讯录里的那种ActionSheet其实是用系统原生的UIAlertController(设置样式为.actionSheet)实现的,完全不是自定义界面——系统组件本身就支持添加多行操作选项,我们可以轻松复刻出类似的效果。

具体实现步骤

1. 创建ActionSheet实例

首先初始化一个UIAlertController,指定样式为.actionSheet,可以按需设置标题:

let contactActionSheet = UIAlertController(title: "联系人操作", message: nil, preferredStyle: .actionSheet)

2. 添加多行操作选项

每个操作选项都是一个UIAlertAction,你可以根据需求添加任意多个,系统会自动将它们排列成多行:

// 示例:添加"共享联系人"选项
let shareAction = UIAlertAction(title: "共享联系人", style: .default) { _ in
    // 这里编写点击该选项后的业务逻辑
}
contactActionSheet.addAction(shareAction)

// 添加"添加到收藏"选项
let favoriteAction = UIAlertAction(title: "添加到收藏", style: .default) { _ in
    // 点击逻辑
}
contactActionSheet.addAction(favoriteAction)

// 继续添加更多选项,比如"创建快捷指令"
let shortcutAction = UIAlertAction(title: "创建快捷指令", style: .default) { _ in
    // 点击逻辑
}
contactActionSheet.addAction(shortcutAction)

3. 添加取消按钮(必填)

系统要求ActionSheet必须包含取消按钮,否则在iPad上会出现崩溃问题:

let cancelAction = UIAlertAction(title: "取消", style: .cancel)
contactActionSheet.addAction(cancelAction)

4. 适配iPad(可选但推荐)

在iPad上,ActionSheet需要指定弹出的源视图/区域,否则无法正常显示:

if let popover = contactActionSheet.popoverPresentationController {
    // 假设你是通过某个按钮触发的ActionSheet,这里传入该按钮即可
    popover.sourceView = triggerButton
    popover.sourceRect = triggerButton.bounds
}

5. 展示ActionSheet

最后将创建好的ActionSheet展示出来:

present(contactActionSheet, animated: true)
进阶优化:贴近通讯录样式

如果想要更贴近iOS通讯录的视觉效果,比如给选项添加图标,可以通过setValue(_:forKey:)给UIAlertAction设置图标:

// 给"共享联系人"选项添加系统图标
shareAction.setValue(UIImage(systemName: "square.and.arrow.up"), forKey: "image")

这样设置后,你的ActionSheet就和通讯录里的样式几乎一致啦!

内容的提问来源于stack exchange,提问作者Mehul Thakkar

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.05.25 07:19:24