在 tabItem 中自定義 SF Symbol

Question

我正在使用 SF Symbols 為圖像輪播創建點。 我希望這些點小而白/輪廓。 到目前為止，我已經能夠減少點之間的間距。 現在，所有修飾符都不會影響符號的大小。

            TabView {
                ForEach(shop.photos?[..<3] ?? [], id:\.self) { url in
                    AsyncImage(
                        url: URL(string: url),
                        content: { image in
                            image.resizable()
                                .scaledToFill()
                                .frame(width: 250, height: 250, alignment: .center)
                                .clipped()
                        },
                        placeholder: {
                            ProgressView()
                        }
                    ).tabItem {
                        Image(systemName: "circle") // Also tried with Label("", systemImage: "circle")
                            .renderingMode(.original) // None of these modifiers had any impact
                            .resizable(resizingMode: .stretch)
                            .aspectRatio(contentMode: .fit)
                            .frame(width: 1.0, height: 1.0)
                            .font(.system(size: 100))
                    }
                }
            }.onAppear() {
                let appearance = UITabBarAppearance()

                appearance.stackedItemPositioning = .centered
                appearance.stackedItemWidth = 10

                UITabBar.appearance().standardAppearance = appearance
            }

Answer 1

您可以添加前景色以更改圖標的顏色。

  Image(systemName: "circle") // Also tried with Label("", systemImage: "circle")
                             .renderingMode(.original) // None of these modifiers had any impact
                             .resizable(resizingMode: .stretch)
                             .aspectRatio(contentMode: .fit)
                             .frame(width: 100.0, height: 100.0)
                             .font(.system(size: 100))
                             .foregroundColor(.white)