我正试图模糊显示在标签栏后面的内容,使其具有半透明/玻璃形态效果。
这就是我想要实现的(来自Figma):
类似于Twitter中的标签栏是透明的,但标签栏后面的所有内容都变得模糊。
这是我的自定义标签栏的代码:
import SwiftUI
struct CustomTabBar: View {
@Binding var currentTab: Tab
var body: some View {
GeometryReader{proxy in
HStack(spacing: 0){
ForEach(Tab.allCases,id: \.rawValue){tab in
Button{
withAnimation(.easeInOut(duration: 0.2)){
currentTab = tab
}
} label: {
Image(tab.rawValue)
.renderingMode(.template)
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: 30, height: 30)
.frame(maxWidth: .infinity)
.foregroundColor(currentTab == tab ? Color.white : Color.white.opacity(0.75))
}
}
}
.frame(maxWidth: .infinity)
}
.frame(height: 30)
.padding(.bottom, 10)
.padding([.horizontal, .top])
.background{
Color.white.opacity(0.50)
.ignoresSafeArea()
}
//END OF VAR BODY
}
//END OF STRUCT
}
struct CustomTabBar_Previews: PreviewProvider {
static var previews: some View {
MainTabView()
}
}
这是我的主标签视图的代码,它是一个ZStack,带有我的不同视图和底部的自定义标签栏:
import SwiftUI
struct MainTabView: View {
//HIDING NATIVE TAB BAR
init(){
UITabBar.appearance().isHidden = true
}
@State var currentTab: Tab = .dashboard
var body: some View {
ZStack(alignment: Alignment(horizontal: .center, vertical: .bottom)) {
TabView(selection: $currentTab){
ContentView()
.tag(Tab.dashboard)
Text("Analytics")
.applyBG()
.tag(Tab.analytics)
Text("Settings")
.applyBG()
.tag(Tab.settings)
}
//CUSTOM TAB BAR
CustomTabBar(currentTab: $currentTab)
}
//END OF VAR BODY
}
//END OF STRUCT
}
struct MainTabView_Previews: PreviewProvider {
static var previews: some View {
MainTabView()
}
}
//BACKGROUND COLOR OF EACH TAB -- CAN REMOVE ONCE YOU BUILD OUT THE VIEWS
extension View{
func applyBG()->some View{
self
.frame(maxWidth: .infinity, maxHeight: .infinity)
.background{
Color("BG")
.ignoresSafeArea()
}
}
}
我尝试使用this overflow question的解决方案
但是当我这样做时,它会模糊标签栏后面的整个视图,而不仅仅是标签栏后面的内容:
这里的颜色不同,但原理相同。
任何想法,我如何才能实现这种模糊的外观背后只是标签栏?
1条答案
按热度按时间vdzxcuhz1#
看起来你当前的标签栏背景是半透明的白色,但是对于模糊效果,你需要一种材质,比如
.ultraThinMaterial