TabItem中自定义SF Symbol失效：无法调整轮播指示器圆点尺寸

问题根源 #

TabView的tabItem内部视图会被UITabBar的系统样式接管，直接给Image添加的resizable、frame、font等修饰符不会生效，系统会统一控制图标尺寸与样式。

解决方案 #

通过UITabBarAppearance统一配置图标大小、颜色及间距，同时启用TabView的分页样式适配轮播场景：

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，移除无效修饰符
            Image(systemName: "circle")
        }
    }
}
// 启用分页样式，适配图片轮播场景
.tabViewStyle(.page)
.onAppear() {
    let appearance = UITabBarAppearance()
    
    // 调整指示器间距
    appearance.stackedItemPositioning = .centered
    appearance.stackedItemWidth = 10
    
    // 配置未选中状态图标：小型白色轮廓
    let normalAppearance = appearance.stackedLayoutAppearance.normal
    normalAppearance.iconSize = CGSize(width: 8, height: 8) // 设置图标大小
    normalAppearance.iconColor = .white // 未选中为白色空心
    
    // 配置选中状态图标：白色实心（可根据需求调整）
    let selectedAppearance = appearance.stackedLayoutAppearance.selected
    selectedAppearance.iconSize = CGSize(width: 8, height: 8)
    selectedAppearance.iconColor = .white
    // 若需要选中时切换为实心图标，可取消下方注释
    // selectedAppearance.image = UIImage(systemName: "circle.fill")?.withTintColor(.white, renderingMode: .alwaysOriginal)
    
    UITabBar.appearance().standardAppearance = appearance
    // 适配滚动时的样式
    UITabBar.appearance().scrollEdgeAppearance = appearance
}

额外优化方案 #

如果不需要自定义tabItem，也可以直接修改系统原生分页指示器的样式，代码更简洁：

TabView {
    // 轮播内容（原AsyncImage部分）
}
.tabViewStyle(.page(indexDisplayMode: .always))
.indexViewStyle(.page(backgroundDisplayMode: .never)) // 隐藏指示器背景
.onAppear {
    UIPageControl.appearance().currentPageIndicatorTintColor = .white
    UIPageControl.appearance().pageIndicatorTintColor = .white.withAlphaComponent(0.5)
    UIPageControl.appearance().transform = CGAffineTransform(scaleX: 0.8, y: 0.8) // 缩小指示器尺寸
}

内容的提问来源于stack exchange，提问作者Casey