SwiftUI：在 Zstack 中动画覆盖文本

Question

我的应用程序看起来很暗，我不知道它是否真的很重要，但我正在我的应用程序上制作动画（复杂 UI - 自定义滑出菜单）然后在我完成所有操作后很好，我的深色外观的布局似乎很好，每次我出于某种原因按下按钮时，它都会用动画覆盖按钮，尽管使用背景和 zstack 让它在背景中显示但从不显示..请帮我找到问题..

我的代码

import SwiftUI

struct CustomCorners: Shape {
    var corners : UIRectCorner
    var radius: CGFloat
    func path(in rect: CGRect) -> Path {
        let path = UIBezierPath(roundedRect: rect, byRoundingCorners: corners, cornerRadii: CGSize(width: radius, height: radius))
        
        return Path(path.cgPath)
        
    }
    
}

struct TabButton: View {

//properties
var image: String
var title: String

// selected tab..
@Binding var selectedTab: String
//hero animation slide
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 ? Color("yellow") : .black)
            .padding(.vertical,12)
            .padding(.horizontal,10)
        .background(
        ZStack{
            Color.white
                if selectedTab == title{
                    Color.yellow
                    .opacity(selectedTab == title ? 1 : 0 )
                    .clipShape(CustomCorners(corners: [.topRight,.topLeft], radius: 8))
                        .matchedGeometryEffect(id: "TAB", in: animation)
                
                }
                
       }
    )
    
    })
        
    
}
}

struct MnView: View {
    //selected tab
    @State var selectedTab = "Home"
    //animation namespace
    @Namespace var animation
    
    var body: some View {
        ZStack {
            Color("black")
                .ignoresSafeArea()
            
            //slide menu
        
            VStack(alignment: .leading, spacing: 15, content: {
                
                //profile file:
                Image("profile")
                    .resizable()
                    .aspectRatio(contentMode: .fill)
                    .frame(width: 70, height: 70)
                    .cornerRadius(10)
                
                //padding for top close button
                    .padding(.top,50)
                
                VStack(alignment: .leading, spacing: 6, content: {
                    Text("profile")
                        .font(.title)
                        .fontWeight(.heavy)
                        .foregroundColor(.white)
  
                    Button(action: {}, label: {
                        Text("View Profile")
                            .fontWeight(.semibold)
                            .foregroundColor(.yellow)
                            .opacity(0.7)
                    })
                
                })//vtsack
                
                
                //tab button
        
                
                VStack(alignment: .leading, spacing: 10){
                    
                    TabButton(image: "gearshape.2", title: "Settings", selectedTab: $selectedTab, animation: animation)
                        
                TabButton(image: "info.circle.fill", title: "About us", selectedTab: $selectedTab, animation: animation)
                    
                    TabButton(image: "books.vertical.fill", title: "refernce", selectedTab: $selectedTab, animation: animation)
                    
                    TabButton(image: "phone", title: "Contact Us", selectedTab: $selectedTab, animation: animation)
                    
                    TabButton(image: "star.circle.fill", title: "Consult a Specialist ", selectedTab: $selectedTab, animation: animation)
                    
                    
                }//vstack
                .padding(.leading, -15)
                .padding(.top,50)
                
                Spacer()
            
                
            })//vstack
            .padding()
            .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .topLeading)
            
            
            
        }//zstack
    }
}

struct MnView_Previews: PreviewProvider {
    static var previews: some View {
        MnView()
            
    }
}

Answer 1

我认为这很简单，我注意到您在 TabButton 的 .background 视图修饰符中将背景设为白色。删除 ZStack 和 if 语句之间的行 Color.white。另一件事是 foregroundColor 修饰符。我认为颜色是倒退的。像这样切换它：

.foregroundColor(selectedTab == title ? .black : .yellow)

我很确定它会处理好。

如果您想了解有关深色模式处理的更多信息，可以查看此 blog article 以了解动态颜色以及 swiftui 如何支持它。

SwiftUI：在 Zstack 中动画覆盖文本

SwiftUI: Animation covers text while in Zstack

swiftui

swiftui-environment

swiftui-animation

我的代码