当列表与Tabbar接触时，SwiftUI Tabbar消失

Question

我试图使用TabView使用SwiftUI创建一个列表。但是，当列表接触到该选项卡时，该选项卡将变得透明。如果我使用".frame“来限制列表的大小，使列表不触及选项卡，它就会正常工作。

为什么条子变得透明？我怎样才能使制表栏变得不透明呢？

目标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"))

祝你有愉快的一天！