SwiftUI中如何为ActionSheet的AlertButton添加图标与文本

我懂你想给ActionSheet里的按钮配上图标的需求，默认用.default(Text("..."))确实只能显示纯文本，但其实SwiftUI的ActionSheet按钮支持传入任意View作为标签，咱们可以利用这一点来实现图标+文本的效果。

修改方案 #

只需要把原来的Text替换成HStack，将图标和文本组合在一起作为按钮的Label即可，具体修改如下：

struct NavigationAddItem: View {
    @State var showActionView = true
    var actionSheet: ActionSheet {
        ActionSheet(title: Text("Select an action"), message: nil, buttons: [
            // 组合图标和文本作为按钮标签
            .default(
                HStack(spacing: 8) {
                    Image(systemName: "folder") // 替换成你需要的图标
                    Text("Option A")
                },
                action: {
                    // TODO: Enter Option A action
                }
            ),
            .default(
                HStack(spacing: 8) {
                    Image(systemName: "pencil") // 替换成你需要的图标
                    Text("Option B")
                },
                action: {
                    // TODO: Enter Option B action
                }
            ),
            .cancel()
        ])
    }
    var body: some View {
        Button(action: { self.showActionView.toggle() }) {
            Image(systemName: "plus")
                .font(.system(size: 24))
        }
        .actionSheet(isPresented: $showActionView, content: { self.actionSheet })
    }
}
struct NavigationItems_Previews: PreviewProvider {
    static var previews: some View {
        NavigationAddItem()
    }
}

关键说明 #

• 用HStack把Image和Text组合起来，通过spacing参数调整图标和文本的间距，让布局更美观
• 你可以替换Image(systemName: "...")里的系统图标名称，或者使用自定义图片（比如Image("your-custom-icon")）
• 预览代码里我去掉了showActionView的初始化参数，因为它是@State属性，不需要外部传入

这样修改后，ActionSheet里的按钮就会显示你想要的图标+文本的样式啦～

内容的提问来源于stack exchange，提问作者sfung3