swiftui - SwiftUI:动画在 Zstack 中覆盖文本
问题描述
我的应用程序看起来很暗,我不知道它是否真的很重要,但我正在我的应用程序上制作动画(复杂的 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()
}
}
解决方案
我认为这很简单,我注意到您在 TabButton 的.background
视图修饰符中将背景设置为白色。删除Color.white
ZStack 和 if 语句之间的行。另一个是foregroundColor
修饰符。我觉得颜色是反的。像这样切换:
.foregroundColor(selectedTab == title ? .black : .yellow)
我很确定这会解决的。
如果您想了解有关暗模式处理的更多信息,可以查看此博客文章以了解动态颜色以及 swiftui 如何支持它。
推荐阅读
- javascript - 存在 Express 会话问题的节点
- google-calendar-api - 客人可以修改的活动不会通过谷歌日历 API 更新
- php - DEVELOPER_TOKEN_NOT_APPROVED 由 Google Ads API for PHP
- javascript - 如何从服务器获取数据到浏览器
- amazon-s3 - S3 存储桶不更新来自 gitlab CI/CD 管道的更改
- qt - 选择 ListView 项目时触发计时器
- github - 使用 Github 和 Cloud Source Repository 的 Terraform GCP Cloud 功能
- c++ - 如何在 C++ 中合法地声明向量变量?
- kotlin - 有没有办法定义 kotlin 中缀函数优先级?
- three.js - 如何在 three.js 中更改 FBXModel 的位置