ios SwiftUI更改选项卡项目背景色，选中时不显示前景

iovurdzv 于 2023-05-30 发布在 iOS

关注(0)|答案(1)|浏览(248)

在SwiftUI中，TabView在被选中时会更改TabItem的前景色。但我需要保持TabItem前景一种颜色（选择或不选择），并改变了背景色。下面是一个例子：
TabView with TabItem background color changes
似乎SwiftUI的TabView只希望改变前景色。我试过使用UITabBar.appearance()，但是我没有发现动态更改TabItem的背景颜色的方法。下面是一个例子：

struct ContentView: View {
var body: some View {
    TabView {
        FirstView()
            .tabItem {
                Label(title: {Text("First")}, icon: {Image(systemName: "1.lane")})
            }
        SecondView()
            .tabItem{
                Label(title: {Text("Second")}, icon: {Image(systemName: "2.lane")})
            }
        ThirdView()
            .tabItem{
                Label(title: {Text("Third")}, icon: {Image(systemName: "3.lane")})
            }
        FourthView()
            .tabItem{
                Label(title: {Text("Fourth")}, icon: {Image(systemName: "4.lane")})
            }
    }
    .tint(Color.white)
    .onAppear() {
        let appearance = UITabBar.appearance()
        appearance.isTranslucent = false
        appearance.backgroundColor = UIColor(.gray)
        appearance.tintColor = UIColor.white
        appearance.unselectedItemTintColor = UIColor.white
    }
}

SwiftUI的TabView是否可以实现这一点，或者我需要创建一个新的完全自定义的TabView？

ios

来源：https://stackoverflow.com/questions/76341785/swiftui-change-tabitem-background-color-not-foreground-when-selected

1条答案

按热度按时间

hfwmuf9z1#

请接受这只是一个概念的证明。这段代码应该与生产应用程序相差甚远。您在设置选项卡背景颜色时遇到问题的原因很简单：没有背景。选项卡后面的视图位于安全区域中，您可以从该选项卡中包含的视图控制该安全区域：

struct TabviewBkgdColor: View {
    
    var body: some View {
        TabView {
            ZStack {
                HStack {
                    VStack {
                        Spacer()
                        Rectangle()
                            .fill(.yellow)
                            .frame(width: 100, height:  100)
                    }
                    Spacer()
                }
                Text("FirstView()")
            }
            .edgesIgnoringSafeArea(.bottom)
            .tabItem {
                Label(title: {Text("First")}, icon: {Image(systemName: "1.lane")})
            }
            ZStack {
                HStack {
                    Spacer()
                        .frame(width: 100)
                    VStack {
                        Spacer()
                        Rectangle()
                            .fill(.purple)
                            .frame(width: 100, height:  100)
                    }
                    Spacer()
                }
                Text("SecondView()")
            }
            .edgesIgnoringSafeArea(.bottom)
            .tabItem{
                Label(title: {Text("Second")}, icon: {Image(systemName: "2.lane")})
            }
            ZStack {
                HStack {
                    Spacer()
                    VStack {
                        Spacer()
                        Rectangle()
                            .fill(.pink)
                            .frame(width: 100, height:  100)
                    }
                    Spacer()
                        .frame(width: 100)
                }
                Text("ThirdView()")
            }
            .edgesIgnoringSafeArea(.bottom)
            
            .tabItem{
                Label(title: {Text("Third")}, icon: {Image(systemName: "3.lane")})
            }
            ZStack {
                HStack {
                    Spacer()
                    VStack {
                        Spacer()
                        Rectangle()
                            .fill(.gray)
                            .frame(width: 100, height:  100)
                    }
                }
                Text("FourthView()")
            }
            .edgesIgnoringSafeArea(.bottom)
            
            .tabItem{
                Label(title: {Text("Fourth")}, icon: {Image(systemName: "4.lane")})
            }
        }
    }
}

我会考虑使用一个GeometryReader并计算你想要的背景的确切尺寸，但是，正如你所看到的，你可以把任何你想要的标签后面。

赞(0）回复(0）举报 2023-05-30

我来回答

ios SwiftUI更改选项卡项目背景色，选中时不显示前景

1条答案

相关问题

热门标签

最新问答