SwiftUI List 接触 Tabbar 时 Tabbar 消失

Question

我正在尝试使用 SwiftUI 从 TabView 创建一个列表。 但是当 List 接触到 tabbar 时，tabbar 变成透明的。 如果我使用“.frame”来限制列表的大小，以便列表不接触标签栏，它可以正常工作。

为什么tabbar会变透明？ 以及如何使标签栏不透明？

目标 ios 是 15.0 和 xcode 版本是 13.4

这是我的代码和图像。

struct HomeView: View {
    
    @State private var selection = 1
    
    init(){
        UITabBar.appearance().backgroundColor = UIColor(Color("mainColor"))//UIColor.white
        UITabBar.appearance().isTranslucent = false
        UITabBar.appearance().unselectedItemTintColor = UIColor.white
        UITabBar.appearance().isHidden = false

    }
    
    var body: some View {
        VStack {
            TabView (selection: $selection){
                FeedView()
                    .tabItem {
                        Image(systemName : "person.2.circle")
                            .environment(\.symbolVariants, selection == 1 ? .fill : .none)
                        Text("피드")
                    }.tag(1)
                
                NMapView()
                    .tabItem {
                        Image(systemName : "map.circle")
                            .environment(\.symbolVariants, selection == 2 ? .fill : .none)
                        Text("지도")
                    }.tag(2)
                
                SearchView()//text: "")
                    .tabItem {
                        Image(systemName : "magnifyingglass.circle")
                            .environment(\.symbolVariants, selection == 3 ? .fill : .none)
                        Text("검색")
                    }.tag(3)
                
                SettingView()
                    .tabItem {
                        Image(systemName : "ellipsis.circle")
                            .environment(\.symbolVariants, selection == 4 ? .fill : .none)
                        Text("설정")
                    }.tag(4)
            }
            .accentColor(.white)
        }
        //.ignoresSafeArea(edges: .top)
    }
}

struct SearchView: View {
    let array = [
        "1", "2", "3", "4", "5",
        "6", "7", "8", "9", "0", "one",
        "two", "three", "four", "five", "six"
    ]
    
    @State private var searchText = ""
    
    var body: some View {
        
        VStack {
            SearchBar(text: $searchText)
                .padding(EdgeInsets(top: 10, leading: 0, bottom: 10, trailing: 0))
            
            List {
                ForEach(array.filter{$0.hasPrefix(searchText)}, id:\.self) {
                    searchText in Text(searchText)
                }
            }
            .listStyle(PlainListStyle())
            .onTapGesture {
                hideKeyboard()
            }
        }
    }
}

Answer 1

一种可能的方法是用所有需要的状态显式地构造外观（所以要确保一切都被激活并且不与其他状态冲突），比如

init() {
    let appearance = UITabBarAppearance()
    appearance.configureWithOpaqueBackground()
    appearance.backgroundColor = UIColor.orange


    let itemAppearance = UITabBarItemAppearance(style: .stacked)
    itemAppearance.normal.iconColor = UIColor.white
    itemAppearance.normal.titleTextAttributes = [.foregroundColor: UIColor.white]
    appearance.stackedLayoutAppearance = itemAppearance

    UITabBar.appearance().scrollEdgeAppearance = appearance
    UITabBar.appearance().standardAppearance = appearance
}

使用 Xcode 13.4 / iOS 15.5 测试

Answer 2

你忘了添加这个:)

UITabBar.appearance().barTintColor = UIColor(Color("mainColor"))

祝你有美好的一天！