swift 在活动选项卡选择和加载时设置TabView颜色

eivnm1vs  于 2022-10-31  发布在  Swift
关注(0)|答案(1)|浏览(127)

所以我正在构建我的TabView,我似乎在任何地方都找不到这个答案,所以我想看看是否有人能帮助我。
下面的代码是:

struct MainView: View {

    @EnvironmentObject var mainViewModel: MainViewModel
    @State var activeTab = 0

    var body: some View {
        VStack {
            TabView(selection: $activeTab) {
                MapView(activeTab: $activeTab)
                    .tabItem {
                        Label("Explore", systemImage: "location.magnifyingglass")
                            .environment(\.symbolVariants, .none)
                    }
                    .tag(0)
                ListView(activeTab: $activeTab)
                    .tabItem {
                        Label("List", systemImage: "list.bullet")
                            .environment(\.symbolVariants, .none)
                    }
                    .tag(1)
                FavoritesView(activeTab: $activeTab)
                    .tabItem {
                        Label("Favorite", systemImage: "heart")
                            .environment(\.symbolVariants, .none)
                    }
                    .tag(2)
                ProfileView(activeTab: $activeTab)
                    .tabItem {
                        Label("Profile", systemImage: "person")
                            .environment(\.symbolVariants, .none)
                    }
                    .tag(3)
            }
            .onChange(of: activeTab, perform: { value in
                print("User has selected tab: \(value)")
            })
        }
        .onAppear() {
            mainViewModel.fetchPlaces()
        }
    } //: body
} //: MainView

这会产生下列外观:

我想使用Color("ColorGreen"),但是我似乎不能弄清楚,如果我在任何元素上设置.foregroundcolor,它会抛出错误。
当应用程序加载时,默认情况下它会在.tab(0)上,所以我希望它能自动着色。

8yoxcaq7

8yoxcaq71#

默认情况下,选项卡视图使用应用的强调色,突出按钮、导航栏按钮等也会使用该颜色。因此,如果您希望对 * 所有 * 这些按钮使用自定义绿色阴影,您可以在资源中设置名为AccentColor的颜色。
如果您只想为选项卡视图图标使用自定义颜色,并且希望每个图标在被选中时都具有相同的颜色,则可以将.tint()修饰符应用于TabView

TabView(selection: $activeTab) {
  // list of tab views and tabItem modifiers
}
.tint(Color("CustomGreen"))

如果要为一个特定的选项卡图标使用不同的自定颜色,可以根据activeTab的值调整色调:

TabView(selection: $activeTab) {
  // list of tab views and tabItem modifiers
}
.tint(activeTab == 0 ? Color("CustomGreen") : .accentColor)

我想说,设置应用的强调色,并在任何地方使用它,可能是最安全的用户体验,而不是覆盖它。与你的颜色使用保持一致,使你的应用立即更符合标准的应用使用。这意味着用户选择信息和导航的方式不会有任何意外,这让他们能够专注于你的应用程序的真实的价值。但如果您需要以上下文方式更改颜色,则可以使用上述方法。

相关问题