swift 如何限制点指示器tabview

uqjltbpv  于 2023-11-16  发布在  Swift
关注(0)|答案(1)|浏览(112)

我有8页或数据要显示,我只想为3指示器。
我有8页或数据要显示,我只想为3指示器。

import SwiftUI

struct OnBoardingModel {
    let image: String
    let title: String
    let subTitle: String
}

struct OnBoardingView: View {
    @State private var currentStep = 0
    
    let datas = [
        OnBoardingModel(image: "onboard1", title: "OnBoard1", subTitle: "OnBoard1"),
        OnBoardingModel(image: "onboard1", title: "OnBoard2", subTitle: "OnBoard2"),
        OnBoardingModel(image: "onboard1", title: "OnBoard3", subTitle: "OnBoard3"),
        OnBoardingModel(image: "onboard1", title: "OnBoard4", subTitle: "OnBoard4"),
        OnBoardingModel(image: "onboard1", title: "OnBoard5", subTitle: "OnBoard5"),
        OnBoardingModel(image: "onboard1", title: "OnBoard6", subTitle: "OnBoard6"),
        OnBoardingModel(image: "onboard1", title: "OnBoard7", subTitle: "OnBoard7"),
        OnBoardingModel(image: "onboard1", title: "OnBoard8", subTitle: "OnBoard8")
    ]
    
    var body: some View {
        VStack {
            TabView(selection: $currentStep) {
                ForEach(0..<datas.count, id: \.self) { index in
                    VStack {
                        Image(datas[index].image)
                            .resizable()
                            .frame(width: 250, height: 250)
                        
                        Text(datas[index].title)
                            .font(.title)
                            .fontWeight(.bold)
                        
                        Text(datas[index].subTitle)
                            .font(.subheadline)
                    }
                    .tag(index)
                }
            }
            .tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))
            
            HStack {
                ForEach(0..<datas.count, id: \.self) { index in
                    if index == currentStep {
                        Rectangle()
                            .frame(width: 20, height: 10)
                            .clipShape(RoundedRectangle(cornerRadius: 10))
                            .foregroundStyle(Color("hanBlue"))
                    } else {
                        Circle()
                            .frame(width: 10, height: 10)
                            .foregroundStyle(Color.gray)
                    }
                }
            }
            
            Button(action: {
                if currentStep < datas.count - 1 {
                    currentStep += 1
                } else {
                    //Logic
                }
            }) {
                Text("Continue")
            }
        }
    }
}

#Preview {
    OnBoardingView()
}

字符串
我想使点指示器显示3点。像这样,用户可以滑动滑动,直到数据的结束。但它只显示3指示器。
https://i.stack.imgur.com/2PfHm.png

krcsximq

krcsximq1#

我会把点在一个滚动视图,使动画看起来顺利时,通过每个标签。

ScrollView(.horizontal) {
    HStack {
        ForEach(0..<datas.count, id: \.self) { index in
            
            Circle()
                .frame(width: index == currentStep ? 16 : 10, height: index == currentStep ? 16 : 10)
                .foregroundStyle(.white.opacity(index == currentStep ? 1 : 0.5))
        }
    }
    .padding()
    .scrollTargetLayout()
}
.background(.blue, in: RoundedRectangle(cornerRadius: 30))
.frame(width: 70) // found empirically to fit 3 dots
.scrollTargetBehavior(.viewAligned)
.scrollPosition(id: Binding($currentStep), anchor: .center)
.allowsHitTesting(false) // disallow manual scrolling

字符串
记住在标签视图中也执行.animation(),以使其动画化:

TabView(selection: $currentStep.animation())


请随意自定义圆点的外观。我试着让它与问题中的截图相似。

相关问题