SwiftUI：如何将图像更新为 TabView 中的填充/轮廓答案

【问题标题】：SwiftUI: How to update image to filled / outlined in TabViewSwiftUI：如何将图像更新为 TabView 中的填充/轮廓
【发布时间】：2021-10-10 06:45:27
【问题描述】：

我在选择时尝试使用填充图像，在取消选择时尝试使用轮廓图像。我尝试渲染图像但仍然填充

所以我认为这会起作用，但它没有：

struct ListTabView: View {

    @State private var selectedTab = 0

    var body: some View {

        NavigationView {

            TabView(selection: $selectedTab) {

                Text("Tab 1")
                    .onTapGesture {
                        self.selectedTab += 1
                    }
                    .tabItem {
                        selectedTab == 0 ? Image(systemName: "star.fill") : Image(systemName: "star")
                        Text("First")
                    }
                    .tag(0)

                Text("Tab 2")
                    .onTapGesture {
                        self.selectedTab -= 1
                    }
                    .tabItem {
                        selectedTab == 1 ? Image(systemName: "moon.stars.fill") : Image(systemName: "moon.stars")
                        Text("Second")
                    }
                    .tag(1)
            }
            .accentColor(.pink)
            .onAppear {
                UITabBar.appearance().barTintColor = .white
            }
        }
    }
}

struct ListTabView_Previews: PreviewProvider {
    static var previews: some View {
        ListTabView()
    }
}

【问题讨论】：

标签： swiftui swiftui-tabview

【解决方案1】：

您的代码确实有效。问题是我可以找到的其他未记录的问题。如果您使用 SF 字体的非 .fill 变体，.fill 变体将被替换。使用以下代码进行测试：

TabView(selection: $selectedTab) {
    VStack {
        Text("Tab 1")
        Text(Image(systemName: "star"))
    }
    .tabItem {
        selectedTab == 0 ? Image(systemName: "star") : Image(systemName: "sun.max")
        Text("First")
    }
    .tag(0)
    
    VStack {
        Text("Tab 2")
        Text(Image(systemName: "moon.stars"))
    }
    .tabItem {
        selectedTab == 1 ? Image(systemName: "moon.stars") : Image(systemName: "sun.max")
        Text("Second")
    }
    .tag(1)
}

您会注意到我使用了普通变体，但使用了填充变体。此外，您不需要.onTap()，但我怀疑您在图像似乎没有切换时添加了它。

【讨论】：

你是绝对正确的，因为当我尝试使用不同的符号来查看选择是否真的有效时，我有一个疑问。 @Yrb 非常感谢您的帮助。
我将使用 onTap() 在代码中的选项卡之间切换。 @Yrb

【解决方案2】：

您可以将其添加到图像/标签中：

Image(systemName: selectedTab == 0 ? "star.fill" : "star")
.environment(\.symbolVariants, selectedTabItemIndex == 0 ? .fill : .none)

它将允许您按预期设置符号变体。

【讨论】：