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.