SwiftUI中如何处理List行内多个Button的动画问题？

在SwiftUI的List行内HStack中使用多个Button时，会遇到异常的动画行为。已知需使用非.automatic的按钮样式才能让单行内的两个按钮正常工作，但添加动画后问题依然存在。需求是在行的两侧各放置一个按钮，第二个按钮仅在点击第一个按钮切换flag1为true时显示。

初始代码及问题 #

struct TestView: View {
    @State
    private var flag1 = true
    @State
    private var flag2 = false
    
    var body: some View {
        NavigationStack {
            List {
                HStack {
                    Button {
                        withAnimation {
                            flag1.toggle()
                        }
                    } label: {
                        Image(systemName: flag1 ? "checkmark.circle" : "circle")
                    }
                    Text("Some text")
                    if flag1 {
                        Spacer()
                        Button {
                            withAnimation {
                                flag2.toggle()
                            }
                        } label: {
                            Image(systemName: flag2 ? "checkmark.circle" : "circle")
                        }
                    }
                }
                .buttonStyle(.borderless)
            }
        }
    }
}

这段代码的动画表现异常：第二个按钮的显示/隐藏会出现错位、闪烁的问题。

移除.buttonStyle(.borderless)后动画有所改善，但仍存在问题：第二个按钮隐藏时有动画，出现时动画不稳定（有时有有时无），且两个按钮会同时触发点击事件。

替代方案（用.onTapGesture） #

struct TestView: View {
    @State
    private var flag1 = true
    @State
    private var flag2 = false

    var body: some View {
        NavigationStack {
            List {
                HStack {
                    Image(systemName: flag1 ? "checkmark.circle" : "circle")
                        .onTapGesture {
                            withAnimation {
                                flag1.toggle()
                            }
                        }
                    Text("Some text")
                    if flag1 {
                        Spacer()
                        Image(systemName: flag2 ? "checkmark.circle" : "circle")
                            .onTapGesture {
                                withAnimation {
                                    flag2.toggle()
                                }
                            }
                    }
                }
            }
        }
    }
}

但此方案丢失了Button的默认样式，且第二个按钮的出现动画仍随机异常。

疑问 #

1. 能否让List行内的两个Button拥有正常的动画效果？
2. 为何使用.buttonStyle(.borderless)或.onTapGesture时，第二个按钮的出现动画随机异常？
3. 使用.onTapGesture替代Button会有哪些损失？如何让组件外观保持与正常Button一致？

解答 #

1. 可以实现List行内多Button的正常动画 #

核心是避免List行的默认Button样式冲突，同时给动态显示的按钮添加明确的过渡动画。修改后的代码如下：

struct TestView: View {
    @State private var flag1 = true
    @State private var flag2 = false
    
    var body: some View {
        NavigationStack {
            List {
                HStack(spacing: 16) {
                    Button {
                        withAnimation {
                            flag1.toggle()
                        }
                    } label: {
                        Image(systemName: flag1 ? "checkmark.circle" : "circle")
                            .foregroundColor(.accentColor)
                    }
                    .buttonStyle(.plain)
                    
                    Text("Some text")
                    
                    Spacer()
                    
                    // 给动态按钮添加明确的过渡
                    if flag1 {
                        Button {
                            withAnimation {
                                flag2.toggle()
                            }
                        } label: {
                            Image(systemName: flag2 ? "checkmark.circle" : "circle")
                                .foregroundColor(.accentColor)
                        }
                        .buttonStyle(.plain)
                        .transition(.opacity.combined(with: .scale))
                    }
                }
                // 禁用行本身的默认Button行为，避免点击冲突
                .listRowBackground(Color.clear)
                .contentShape(Rectangle())
            }
        }
    }
}

关键改动：

• 使用.plain按钮样式，彻底隔离List行的默认按钮交互
• 给动态显示的按钮添加明确的transition，替代系统默认的隐式过渡
• 给HStack设置.contentShape和透明背景，避免行内点击区域冲突

2. 动画异常的原因 #

• .buttonStyle(.borderless)：List的行本身会默认应用Button样式，.borderless虽然允许多个按钮共存，但会导致SwiftUI的布局系统在动态更新时，无法正确计算按钮的布局变化。尤其是当按钮从无到有时，布局优先级的冲突会导致动画错位或丢失。
• .onTapGesture：手势识别器的优先级和List行的内置交互存在冲突，当List行的布局发生变化时，手势的命中测试区域会动态调整，导致动画帧计算异常，出现随机的动画失效。另外，.onTapGesture没有Button的内置动画反馈（如按压缩放），视觉上会显得动画不连贯。

3. .onTapGesture替代Button的损失及修复 #

损失点：

• 丢失Button的内置交互反馈：如按压时的缩放、高亮效果
• 丢失系统默认的可访问性支持：Button会自动适配VoiceOver、键盘导航等，而.onTapGesture需要手动添加
• 无法直接使用系统提供的Button样式，需要手动实现视觉效果

修复方案（保持Button外观）：

如果一定要用.onTapGesture，可以手动模拟Button的样式和交互：

@State private var isPressed = false

// ...

Image(systemName: flag1 ? "checkmark.circle" : "circle")
    .foregroundColor(.accentColor)
    .onTapGesture {
        withAnimation {
            flag1.toggle()
        }
    }
    // 模拟Button按压效果
    .scaleEffect(isPressed ? 0.95 : 1.0)
    .simultaneousGesture(
        DragGesture(minimumDistance: 0)
            .onChanged { _ in isPressed = true }
            .onEnded { _ in isPressed = false }
    )
    // 添加可访问性支持
    .accessibilityLabel(flag1 ? "已选中" : "未选中")
    .accessibilityAddTraits(.isButton)

但更推荐使用Button配合正确的样式和过渡，这样能最大程度利用SwiftUI的内置系统能力，减少手动维护成本。

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