SwiftUI 中的自定义 ScrollView 指示器答案

【问题标题】：Custom ScrollView Indicator in SwiftUISwiftUI 中的自定义 ScrollView 指示器
【发布时间】：2020-12-02 21:33:44
【问题描述】：

是否可以创建一个具有空心和实心圆圈的自定义水平指示器来显示有多少图像和当前位置？

下面的尝试使用了lazyHStack 和OnAppear，但是，从控制台输出来看，它不能正常工作，因为来回滚动不会一致地调用onAppear。

import SwiftUI

struct ContentView: View {
    let horizontalScrollItems = ["wind", "hare.fill", "tortoise.fill", "rosette" ]
    
    var body: some View {
        GeometryReader { geometry in
            ScrollView(.horizontal, showsIndicators: false) {
                LazyHStack {
                    ForEach(horizontalScrollItems, id: \.self) { symbol in
                        Image(systemName: symbol)
                            .font(.system(size: 200))
                            .frame(width: geometry.size.width)
                            .onAppear(){print("\(symbol)")}
                            
                    }
                }
            }
        }
    }
}

这是所需的指标。当用户来回滚动时，我只是不确定如何正确填充和清空每个圆圈。感谢您的帮助！

【问题讨论】：

见Hacking With Swift。

标签： foreach swiftui scrollview indicator

【解决方案1】：

您可以使用TabView() 和PageTabViewStyle() 获得所需的结果

注意：这将适用于 SwiftUI 2.0

代码如下：

struct ContentView: View {
    let horizontalScrollItems = ["wind", "hare.fill", "tortoise.fill", "rosette" ]
    
    var body: some View {
        GeometryReader { geometry in
            TabView(){
                ForEach(horizontalScrollItems, id: \.self) { symbol in
                    Image(systemName: symbol)
                        .font(.system(size: 200))
                        .frame(width: geometry.size.width)
                }
            }
            .tabViewStyle(PageTabViewStyle())
            .indexViewStyle(PageIndexViewStyle(backgroundDisplayMode: .always))
        }
    }
}

结果：

【讨论】：