标签：轮播 self padding width swiftui 切换 var page view
import SwiftUI
struct Banner: View {
@State var cat = 0
@State var page = 0
var body: some View {
ZStack {
Color.gray.edgesIgnoringSafeArea(.all)
VStack {
ZStack {
HStack {
Button {
}label: {
Image(systemName: "menucard")
.renderingMode(.original)
.padding()
}
.background(Color.white)
.cornerRadius(10)
Spacer()
Image("cat1")
.resizable()
.frame(width: 40, height: 40)
.cornerRadius(12)
}
.padding(.horizontal)
Text("Cat")
.font(.system(size: 22))
}
HStack(spacing: 15) {
Button {
self.cat = 0
}label: {
Text("LinQiYe")
.foregroundColor(self.cat == 0 ? .white : .black)
.padding(.vertical, 10)
.padding(.horizontal, 20)
}
.background(self.cat == 0 ? Color.black : Color.white)
.clipShape(Capsule())
Button {
self.cat = 1
}label: {
Text("TuTu")
.foregroundColor(self.cat == 1 ? .white : .black)
.padding(.vertical, 10)
.padding(.horizontal, 20)
}
.background(self.cat == 1 ? Color.black : Color.white)
.clipShape(Capsule())
Button {
self.cat = 2
}label: {
Text("YouYou")
.foregroundColor(self.cat == 2 ? .white : .black)
.padding(.vertical, 10)
.padding(.horizontal, 20)
}
.background(self.cat == 2 ? Color.black : Color.white)
.clipShape(Capsule())
}
.padding(.top, 30)
GeometryReader { geo in
// List()
Carousel(width: UIScreen.main.bounds.width, height: geo.frame(in: .global).height, page: self.$page)
}
PageControl(page: self.$page)
.padding(.top, 10)
}
.padding(.vertical)
}
}
}
struct Banner_Previews: PreviewProvider {
static var previews: some View {
Banner()
}
}
struct List: View {
@Binding var page: Int
var body: some View {
HStack(spacing: 0) {
ForEach(data) { item in
// mistakenly used Geomtry Reader
CatCard(page: self.$page, width: UIScreen.main.bounds.width, data: item)
}
}
}
}
struct CatCard: View {
@Binding var page: Int
var width: CGFloat
var data: Type
var body: some View {
VStack {
VStack {
Text(self.data.name)
.font(.title)
.fontWeight(.bold)
.padding(.top)
Text(self.data.cName)
.foregroundColor(.gray)
.padding(.vertical)
Spacer(minLength: 0)
Image(self.data.image)
.resizable()
.frame(width: self.width - (self.page == self.data.id ? 100 : 100), height:
(self.page == self.data.id ? 250 : 200))
.cornerRadius(20)
Text(self.data.price)
.fontWeight(.bold)
.font(.title)
.padding(.top, 20)
Button {
}label: {
Text("Buy")
.foregroundColor(.black)
.padding(.vertical, 10)
.padding(.horizontal, 30)
}
.background(Color.pink)
.clipShape(Capsule())
.padding(.top, 20)
Spacer(minLength: 0)
// for filling empty space
}
.padding(.horizontal, 20)
.padding(.vertical, 25)
.background(Color.white)
.cornerRadius(20)
.padding(.top, 25)
// increasing height and width if currnet page appears
.padding(.vertical, self.page == data.id ? 0 : 25)
.padding(.horizontal, self.page == data.id ? 0 : 25)
}
.frame(width: self.width)
.animation(.default)
}
}
struct Carousel: UIViewRepresentable {
func makeCoordinator() -> Coordinator {
return Carousel.Coordinator(parent1: self)
}
var width: CGFloat
var height: CGFloat
@Binding var page: Int
func makeUIView(context: Context) -> UIScrollView {
// ScrollView content size
let total = width * CGFloat(data.count)
let view = UIScrollView()
view.isPagingEnabled = true
//1.0 for disabling vertical scroll
view.contentSize = CGSize(width: total, height: 1.0)
view.bounces = true
view.showsVerticalScrollIndicator = false
view.showsHorizontalScrollIndicator = false
view.delegate = context.coordinator
// embed swiftui view into uiview
let view1 = UIHostingController(rootView: List(page: self.$page))
view1.view.frame = CGRect(x: 0, y: 0, width: total, height: self.height)
view1.view?.backgroundColor = .clear
view.addSubview(view1.view)
return view
}
func updateUIView(_ uiView: UIScrollView, context: Context) {
}
class Coordinator: NSObject, UIScrollViewDelegate {
var parent: Carousel
init(parent1: Carousel) {
parent = parent1
}
func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
// using this function for getting currnet page
let page = Int(scrollView.contentOffset.x / UIScreen.main.bounds.width)
print(page)
self.parent.page = page
}
}
}
// implement UIPageControl
struct PageControl: UIViewRepresentable {
@Binding var page: Int
func makeUIView(context: Context) -> UIPageControl {
let view = UIPageControl()
view.currentPageIndicatorTintColor = .black
view.pageIndicatorTintColor = UIColor.black.withAlphaComponent(0.2)
view.numberOfPages = data.count
return view
}
func updateUIView(_ uiView: UIPageControl, context: Context) {
// updating page indicator when ever page change
DispatchQueue.main.async {
uiView.currentPage = self.page
}
}
}
import SwiftUI
struct Type: Identifiable {
var id: Int
var name: String
var cName: String
var price: String
var image: String
}
var data = [
Type(id: 0, name: "cat1", cName: "LinQiYe", price: "$25", image: "cat1"),
Type(id: 1, name: "cat2", cName: "TuTu", price: "$55", image: "cat2"),
Type(id: 2, name: "cat3", cName: "YouYou", price: "$35", image: "cat3"),
Type(id: 3, name: "cat4", cName: "LinQiYe", price: "$15", image: "cat4"),
Type(id: 4, name: "cat5", cName: "YouYou", price: "$65", image: "cat5"),
]
标签：轮播,
self,
padding,
width,
swiftui,
切换,
var,
page,
view
From： https://blog.csdn.net/qq_63007445/article/details/143366416