SwiftUI 初体验 8 轮播图的实现

最新推荐文章于 2025-02-21 14:39:32 发布

>>> Eugene >>>

最新推荐文章于 2025-02-21 14:39:32 发布

阅读量1.9k

点赞数

分类专栏： SwiftUI

本文链接：https://blog.youkuaiyun.com/qq_28323373/article/details/102552990

版权

本文介绍了如何在SwiftUI中实现轮播图功能。首先创建动物Banner卡片，然后利用UIHostingController包裹页面并实现PageViewController。接着通过Coordinator管理交互事件，用State属性跟踪轮播状态，并将状态与PageControl关联。详细讲解了Coordinator的角色以及如何处理数据源和页面切换事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先创建一个单独的动物Banner的卡片

struct AnimalCard: View {
   
    
    var species: Species
    
    var body: some View {
   
        species.image()
        .resizable()
        .frame(height: 300)
        .aspectRatio(1, contentMode: .fill)
        .clipped()
        .overlay(TextOverlay(species: species))
    }
    
}

struct TextOverlay: View {
   
    var species: Species
    
    var gradient: LinearGradient {
   
        LinearGradient(
            gradient: Gradient(
                colors: [Color.black.opacity(0.6), Color.black.opacity(0)]),
            startPoint: .bottom,
            endPoint: .center)
    }
    
    var body: some View {
   
        ZStack(alignment: .bottomLeading) {
   
            Rectangle().fill(gradient)
            VStack(alignment: .leading) {
   
                Text(species.name)
                    .font(.title)
                    .bold()
                Text(species.description)
            }
            .padding()
        }
        .foregroundColor(.white)
    }
}

其中TextOverlay是悬浮在上方的文本说明
创建PageView

struct PageView<Page: View>: View {
   
    
    var viewControllers: [UIHostingController<Page>]
    
    init(_ views: [

最低0.47元/天解锁文章