SwiftUI ZStack内自定义滑出菜单动画遮挡按钮文字问题求解

问题原因 #

• 选中状态色值冲突：你设置按钮选中时文字/图标前景色为黄色，与选中状态的黄色背景完全同色，视觉上就会出现内容被遮挡的效果
• matchedGeometryEffect动画层级异常：SwiftUI执行匹配几何动画时，会临时将参与动画的视图提升到父容器的最上层，你把动画绑定在背景层的视图上，动画过程中背景视图会临时盖过按钮的内容层

修复方案 #

修改TabButton结构的代码即可，调整点如下：

1. 修正前景色逻辑，选中时文字使用深色避免和黄色背景撞色
2. 给按钮内容层设置更高的zIndex，保证永远显示在背景上方
3. 修正初始选中值匹配实际存在的按钮标题

修改后的核心代码 #

struct TabButton: View {
    //properties
    var image: String
    var title: String
    @Binding var selectedTab: String
    var animation: Namespace.ID
    
    var body: some View {
        Button(action: {
            withAnimation(.spring()){selectedTab = title}
        }, label: {
            HStack( spacing: 15){
                Image(systemName:  image)
                    .font(.title2)
                    .frame(width: 30)
                Text(title)
                    .fontWeight(.semibold)
            }
            // 可根据需求调整色值，这里避免选中时文字与背景同色
            .foregroundColor(selectedTab == title ? .black : .black)
            .padding(.vertical,12)
            .padding(.horizontal,10)
            // 给内容层设置更高层级，保证永远在背景上方
            .zIndex(1)
            .background(
                ZStack{
                    Color.white
                    if selectedTab == title{
                        Color.yellow
                            .opacity(1)
                            .clipShape(CustomCorners(corners: [.topRight,.topLeft], radius: 8))
                            .matchedGeometryEffect(id: "TAB", in: animation)
                    }
                }
            )
        })
    }
}

struct MnView: View {
    // 修正初始选中值为实际存在的按钮标题
    @State var selectedTab = "Settings"
    @Namespace var animation
    
    // 其余代码保持原有逻辑不变即可
}

如果需要适配暗色模式下未选中按钮的显示效果，你可以把按钮基础背景Color.white调整为半透明暗色，同时对应调整未选中状态的文字颜色为白色即可。

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