我有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)
1条答案
按热度按时间krcsximq1#
我会把点在一个滚动视图,使动画看起来顺利时,通过每个标签。
字符串
记住在标签视图中也执行
.animation()
,以使其动画化:型
请随意自定义圆点的外观。我试着让它与问题中的截图相似。