SwiftUI中如何放大swipeActions内的圆形图标并保持可点击？

要实现带大尺寸圆形图标的swipeActions，核心是绕过SwiftUI对swipe按钮的默认布局约束，同时保证触摸区域正常响应。以下是可行的解决方案：

关键修改点 #

• 移除.tint(.clear)：该属性会破坏按钮的触摸区域响应，改用自定义按钮样式清除默认背景
• 自定义ButtonStyle：彻底去掉默认矩形背景，同时确保触摸区域覆盖整个圆形图标
• 调整图标布局：通过frame+padding组合放大图标，保证按钮可点击范围匹配图标大小

修改后的完整代码 #

import SwiftUI

struct SwipeActionsExample: View {
    @State private var items = ["Item 1", "Item 2", "Item 3"]

    var body: some View {
        NavigationView {
            List {
                ForEach(items, id: \.self) { item in
                    Text(item)
                        .padding()
                        .frame(maxWidth: .infinity, alignment: .leading)
                        .background(Color.gray.opacity(0.2))
                        .cornerRadius(10)
                        .foregroundColor(.white)
                        .padding(.vertical, 5)
                        .swipeActions(edge: .trailing) {
                            Button(role: .destructive) {
                                deleteItem(item)
                            } label: {
                                Image(systemName: "trash.circle.fill")
                                    .resizable()
                                    .scaledToFit()
                                    .frame(width: 50, height: 50)
                                    .foregroundStyle(.white, .red)
                            }
                            .buttonStyle(CircleSwipeButtonStyle())

                            Button {
                                renameItem(item)
                            } label: {
                                Image(systemName: "pencil.circle.fill")
                                    .resizable()
                                    .scaledToFit()
                                    .frame(width: 50, height: 50)
                                    .foregroundStyle(.white, .blue)
                            }
                            .buttonStyle(CircleSwipeButtonStyle())
                        }
                        .listRowBackground(Color.black)
                }
            }
            .listStyle(.plain)
            .background(Color.black)
            .navigationTitle("Swipe Actions")
        }
    }

    private func deleteItem(_ item: String) {
        items.removeAll { $0 == item }
    }

    private func renameItem(_ item: String) {
        print("Renaming \(item)")
    }
}

// 自定义按钮样式：清除默认背景，确保触摸区域匹配图标
struct CircleSwipeButtonStyle: ButtonStyle {
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .padding(10) // 扩展触摸区域，避免点击边缘无响应
            .background(Color.clear) // 完全清除默认背景
            .scaleEffect(configuration.isPressed ? 0.95 : 1.0) // 添加按压反馈提升体验
    }
}

方案说明 #

• CircleSwipeButtonStyle：通过background(Color.clear)彻底移除默认矩形背景，padding(10)扩展触摸区域，确保点击圆形图标边缘也能触发动作，同时添加按压缩放反馈提升交互体验
• 图标尺寸控制：frame(width:50, height:50)直接设置图标大小，配合.resizable()和.scaledToFit()保证SF Symbol图标不失真
• 颜色设置：.foregroundStyle(.white, .red)分别控制图标前景色和圆形背景色，完美实现带颜色的圆形图标效果

替代方案（更灵活） #

如果需要完全自定义swipe动作的布局（比如调整多个圆形按钮的间距），可以使用UIViewRepresentable封装UIKit的UISwipeActionsConfiguration，不过对于你的需求，上面的SwiftUI原生方案已经足够简洁高效。

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