[英]SwiftUI Custom TabView Indicator
I cannot center the indicator on which the page is located.我无法将页面所在的指示器居中。 I cannot ignore the views on the left and right.我不能忽视左右的意见。 When the number of page increases, it is inevitable that the indicator of the page I am on will shift to the left when the indicator number on the right is more than the indicator number on the left.当页数增加时,当右边的指针数大于左边的指针数时,我所在页面的指针难免会向左偏移。
struct OnboardingView: View {
var pages: [Page] = [
Page(page: PageOne()),
Page(page: PageTwo()),
Page(page: PageThree()),
]
@State var offset: CGFloat = 0
var body: some View {
ScrollView(.init()) {
TabView {
ForEach(pages.indices, id: \.self) { item in
if item == 0 {
AnyView(_fromValue: pages[item].page)
.overlay(
GeometryReader { proxy -> Color in
let minX = proxy.frame(in: .global).minX
DispatchQueue.main.async {
withAnimation(.default) {
self.offset = -minX
}
}
return Color.clear
}
.frame(width: 0, height: 0)
,alignment: .leading
)
} else {
AnyView(_fromValue: pages[item].page)
}
}
}
.tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))
.overlay(
HStack(spacing: 15) {
ForEach(pages.indices, id: \.self) { item in
ZStack {
Capsule()
.foregroundColor(Color.white)
.frame(width: getCurrentPageIndex() == item ? 20 : 7, height: 20)
.frame(maxWidth: getCurrentPageIndex() == item ? .infinity : nil, alignment: .center)
}
}
}
.padding(.horizontal)
.padding(.bottom, UIApplication.shared.windows.first?.safeAreaInsets.bottom)
.padding(.bottom, 10)
,alignment: .bottom
)
}
.ignoresSafeArea()
}
func getCurrentPageIndex() -> Int {
let index = Int(round(Double(offset / getScreenWidth())))
return index
}
func getOffset() -> CGFloat {
let progress = offset / getScreenWidth()
return 22 * progress
}
}
struct OnboardingView_Previews: PreviewProvider {
static var previews: some View {
OnboardingView()
}
}
struct Page: Identifiable {
var id = UUID()
var page: Any
}
extension View {
func getScreenWidth() -> CGFloat {
return UIScreen.main.bounds.width
}
}
.overlay(
HStack(spacing: 15) {
ForEach(pages.indices, id: \.self) { item in
ZStack {
Capsule()
.foregroundColor(Color.white)
.frame(width: getCurrentPageIndex() == item ? 20 : 7, height: 20)
}
}
}
.padding(.horizontal)
.padding(.bottom, UIApplication.shared.windows.first?.safeAreaInsets.bottom)
.padding(.bottom, 10), alignment: .bottom
)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.