简体   繁体   中英

Customize SF Symbol within tabItem

I am using SF Symbols to create dots for an image carousel. I would like these dots to be small and white/outline. So far, I have been able to reduce spacing between the dots. Now, all modifiers have no effect on the symbol's size.

            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
            }

You can add foreground color to change the color of the icon.

  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)

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM