SwiftUI中如何从外部覆盖组件内置的Transition过渡效果

我实现了一个内置过渡效果的BadgeView组件：

public struct BadgeView: View {

    ...

    public var body: some View {
        Text(stringValue)
            .background(.red)
            .clipShape(RoundedRectangle(cornerRadius: sideLength/2.0))
            .transition(.scale)
    }
}

同时编写了一个Badge视图修饰器，用于将BadgeView作为叠加层添加到其他视图上：

struct Badge: ViewModifier {

    ...

    func body(content: Content) -> some View {
        content
            .overlay(alignment: .topLeading) {
                BadgeView(value: value)
                    .offset(x: -size/3.0, y: -size/3.0)
                    .background(
                        GeometryReader { geometry in
                            Color.clear.onAppear {
                                size = geometry.size
                            }
                            .onChange(of: geometry.size) { newValue in
                                size = newValue
                            }
                        }
                    )
                    .transition(.scale(scale: 0, anchor: UnitPoint(x: -0.3, y: -0.3)))
            }
    }
}

由于原组件的过渡效果会将徽章移动到其原始位置的中心，而非偏移后的位置，我尝试在修饰器中覆盖过渡效果，但发现操作无效——SwiftUI似乎只会应用最内层的过渡效果。现咨询：如何从外部覆盖SwiftUI组件的内置过渡效果？

解决方案 #

方法1：给BadgeView添加过渡可配置参数 #

直接在BadgeView的定义中开放过渡参数，允许外部传入自定义过渡，默认保留原有.scale效果，这是最直接可控的方式：

public struct BadgeView: View {
    let stringValue: String
    let sideLength: CGFloat
    // 新增可配置过渡参数，默认使用原有效果
    var transition: AnyTransition = .scale

    public var body: some View {
        Text(stringValue)
            .background(.red)
            .clipShape(RoundedRectangle(cornerRadius: sideLength/2.0))
            .transition(transition)
    }
}

在修饰器中使用时，直接传入自定义过渡即可覆盖：

struct Badge: ViewModifier {
    // ... 原有属性

    func body(content: Content) -> some View {
        content
            .overlay(alignment: .topLeading) {
                BadgeView(value: value, transition: .scale(scale: 0, anchor: UnitPoint(x: -0.3, y: -0.3)))
                    .offset(x: -size/3.0, y: -size/3.0)
                    .background(
                        GeometryReader { geometry in
                            Color.clear.onAppear {
                                size = geometry.size
                            }
                            .onChange(of: geometry.size) { newValue in
                                size = newValue
                            }
                        }
                    )
            }
    }
}

方法2：禁用内部过渡+外部组级过渡 #

如果无法修改BadgeView源码（比如是第三方组件），可以先禁用内部过渡，再将组件包裹进compositingGroup，在外部应用自定义过渡：

struct Badge: ViewModifier {
    // ... 原有属性

    func body(content: Content) -> some View {
        content
            .overlay(alignment: .topLeading) {
                BadgeView(value: value)
                    .transition(.identity) // 禁用内部过渡
                    .compositingGroup()
                    .offset(x: -size/3.0, y: -size/3.0)
                    .transition(.scale(scale: 0, anchor: UnitPoint(x: -0.3, y: -0.3)))
                    .background(
                        GeometryReader { geometry in
                            Color.clear.onAppear {
                                size = geometry.size
                            }
                            .onChange(of: geometry.size) { newValue in
                                size = newValue
                            }
                        }
                    )
            }
    }
}

方法3：将过渡移到容器层级 #

把过渡效果应用到overlay的容器上，而非直接加在BadgeView上，绕过内部过渡的优先级：

struct Badge: ViewModifier {
    // ... 原有属性
    @State private var isBadgeVisible = true // 控制徽章显示状态的变量

    func body(content: Content) -> some View {
        content
            .overlay(alignment: .topLeading) {
                if isBadgeVisible {
                    BadgeView(value: value)
                        .offset(x: -size/3.0, y: -size/3.0)
                        .background(
                            GeometryReader { geometry in
                                Color.clear.onAppear {
                                    size = geometry.size
                                }
                                .onChange(of: geometry.size) { newValue in
                                    size = newValue
                                }
                            }
                        )
                }
            }
            .transition(.scale(scale: 0, anchor: UnitPoint(x: -0.3, y: -0.3)))
    }
}

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