Блог

Можно ли создать пользовательский горизонтальный индикатор с пустыми и заполненными кругами, чтобы показать, сколько изображений есть и текущее положение?

В приведенной ниже попытке используется 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)")}
                            
                    }
                }
            }
        }
    }
}
 

Это желаемый индикатор. Я просто не уверен, как правильно заполнять и опустошать каждый круг, когда пользователь прокручивает его вперед и назад. Спасибо за помощь!

Вы можете получить желаемый результат, используя 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))
        }
    }
}
 

Результат :