SwiftUI 中的自定义 ScrollView 指示器

Question

是否可以创建一个自定义水平指示器，其中包含空心圆和实心圆以显示有多少图像和当前位置？

下面的尝试使用了 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)")}
                            
                    }
                }
            }
        }
    }
}

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

Answer 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))
        }
    }
}

结果：

SwiftUI 中的自定义 ScrollView 指示器

Custom ScrollView Indicator in SwiftUI

foreach

indicator

scrollview

swiftui