iOS 17 SwiftUI 教程：轻松掌握 ScrollView 与轮播 UI 的打造

iOS开发届的一个人

于 2025-01-08 22:55:38 发布

阅读量1k

点赞数 10

文章标签： ios swiftui ui

本文链接：https://blog.youkuaiyun.com/2201_75563235/article/details/145019707

版权

大家好！今天我们来聊聊在 iOS 17 中，如何使用 SwiftUI 的 ScrollView 来创建一个酷炫的轮播（Carousel）界面。无论你是刚接触 SwiftUI，还是想提升自己的 UI 构建技能，这篇文章都希望能帮到你。让我们一步步来，轻松上手吧！

1. 认识 ScrollView

首先，ScrollView 是 SwiftUI 中一个非常实用的视图，它允许用户在内容超出屏幕范围时进行滚动。你可以创建水平或垂直方向的滚动视图，非常适合用来展示一系列内容，比如图片、卡片等。

基本用法

先来看一个最简单的例子：

ScrollView {
    VStack {
        Text("第一项")
        Text("第二项")
        Text("第三项")
        // 更多内容...
    }
}

上面的代码会创建一个垂直滚动的视图，里面包含多个文本项。用户可以上下滑动来查看所有内容。

2. 创建水平滚动的轮播

今天我们的目标是创建一个水平滚动的轮播。这样用户可以左右滑动，浏览不同的卡片内容。下面是一个基础的实现：

ScrollView(.horizontal, showsIndicators: false) {
    HStack {
        CardView(image: "swiftui-button",
                 title: "SwiftUI",
                 subtitle: "绘制带圆角的边框",
                 author: "作者：LC")
            .frame(width: 300)
        // 更多 CardView...
    }
}

在这个例子中，我们指定了 .horizontal 来创建一个水平滚动视图，并且隐藏了滚动指示器。HStack 用来水平排列多个 CardView，每个卡片的宽度设置为 300。

3. 设计卡片视图（CardView）

为了让我们的轮播更具吸引力，我们需要设计一个漂亮的卡片视图。这里是一个简单的 CardView 示例：

import SwiftUI

struct CardView: View {
    var image: String
    var title: String
    var subtitle: String
    var author: String
    
    var body: some View {
        VStack(alignment: .leading) {
            Image(image)
                .resizable()
                .scaledToFit()
                .cornerRadius(10)
            Text(title)
                .font(.headline)
                .padding(.top, 5)
            Text(subtitle)
                .font(.subheadline)
                .foregroundColor(.secondary)
            Spacer()
            Text(author)
                .font(.caption)
                .foregroundColor(.gray)
        }
        .padding()
        .background(Color(.systemBackground))
        .cornerRadius(15)
        .shadow(radius: 5)
    }
}

这个 CardView 包含一个图片、标题、副标题和作者信息。通过设置 cornerRadius 和 shadow，卡片看起来更加立体和美观。

4. 综合实现：组合 ScrollView 和 CardView

现在我们已经有了 ScrollView 和 CardView，接下来将它们组合起来，打造一个完整的轮播界面。

import SwiftUI

struct Scroll: View {
    var body: some View {
        VStack {
            // 顶部标题
            HStack {
                VStack(alignment: .leading) {
                    Text("星期一，8月20日")
                        .font(.caption)
                        .foregroundColor(.secondary)
                    Text("你的魔卡")
                        .font(.system(.largeTitle, design: .rounded))
                        .fontWeight(.black)
                }
                .padding()
                Spacer()
            }
            
            // 水平滚动的轮播
            ScrollView(.horizontal, showsIndicators: false) {
                HStack(spacing: 20) { // 增加间距让卡片不至于挤在一起
                    CardView(image: "swiftui-button",
                             title: "SwiftUI",
                             subtitle: "绘制带圆角的边框",
                             author: "作者：LC")
                        .frame(width: 300)
                    
                    CardView(image: "macos-programming",
                             title: "macOS",
                             subtitle: "构建一个简单的编辑应用",
                             author: "作者：Gabriel Theodoropoulos")
                        .frame(width: 300)
                    
                    CardView(image: "flutter-app",
                             title: "Flutter",
                             subtitle: "使用 Flutter 构建复杂布局",
                             author: "作者：Lawrence Tan")
                        .frame(width: 300)
                    
                    CardView(image: "natural-language-api",
                             title: "iOS",
                             subtitle: "自然语言 API 的新功能",
                             author: "作者：Sai Kambampati")
                        .frame(width: 300)
                }
                .padding(.horizontal)
            }
            Spacer()
        }
    }
}

struct Scroll_Previews: PreviewProvider {
    static var previews: some View {
        Scroll()
    }
}

代码解析
1. 顶部标题部分：使用 HStack 和 VStack 来排列日期和标题，使其看起来整齐有序。
2. 轮播部分：ScrollView 的方向设为 .horizontal，并隐藏了滚动指示器。HStack 内部包含多个 CardView，每个卡片设置了固定宽度 300，并通过 spacing 参数增加卡片之间的间距。
3. 整体布局：通过 VStack 将标题和轮播垂直排列，Spacer() 用来填充剩余空间，让界面更加美观。

5. 运行与预览

在 Xcode 中运行这个项目，你应该会看到一个带有顶部标题的页面，下面是一个可以左右滑动的轮播。每个卡片展示了不同的内容，用户可以轻松浏览。

注：图片链接仅为示意，实际效果请在 Xcode 中查看。

6. 小技巧与优化

•	动态数据：如果你的卡片数据来自网络或其他动态源，可以使用 ForEach 来生成 CardView，让代码更简洁。

let cards = [
    Card(image: "swiftui-button", title: "SwiftUI", subtitle: "绘制带圆角的边框", author: "LC"),
    // 更多卡片数据...
]

ScrollView(.horizontal, showsIndicators: false) {
    HStack(spacing: 20) {
        ForEach(cards) { card in
            CardView(image: card.image, title: card.title, subtitle: card.subtitle, author: card.author)
                .frame(width: 300)
        }
    }
    .padding(.horizontal)
}

•	响应式设计：考虑不同屏幕尺寸，使用 GeometryReader 或自适应布局，让轮播在各种设备上都能良好显示。
•	动画效果：添加一些过渡动画，让轮播更加生动。例如，当卡片滑动时，可以加入淡入淡出的效果。

7. 总结

今天我们通过一个简单的例子，学习了如何在 iOS 17 的 SwiftUI 中使用 ScrollView 来创建一个水平滚动的轮播界面。通过组合 ScrollView 和自定义的 CardView，我们轻松实现了一个美观且实用的轮播效果。希望这篇教程对你有所帮助，快去试试吧！

如果你有任何问题或建议，欢迎在下方留言讨论。别忘了关注我们，获取更多 SwiftUI 和 iOS 开发的精彩内容！

参考代码：

//
//  ScrollView.swift
//  Teach
//
//  Created by lc on 2025/1/8.
//

import SwiftUI

struct Scroll: View {
    var body: some View{
        VStack {
            HStack {
                VStack(alignment:.leading) {
                    Text("MONDAY,AUG 20")
                        .font(.caption)
                        .foregroundColor(.secondary)
                    Text("你的魔卡")
                        .font(.system(.largeTitle,design: .rounded))
                        .fontWeight(.black)
                }.padding()
                Spacer()
            }
            ScrollView(.horizontal,showsIndicators: false) {
                HStack {
                    CardView(image: "swiftui-button",
                             title: "SwiftUI",
                             subtitle: "Drawing a Border with Rounded Corners",
                             author: "Written by LC")
                    .frame(width:300)
                    CardView(image: "macos-programming", title: "macOS", subtitle: "Building a Simple Editing App", author: "Gabriel Theodoropoulos")
                        .frame(width:300)
                    
                    CardView(image: "flutter-app", title: "Flutter", subtitle: "Building a Complex Layout with Flutter", author: "Lawrence Tan")
                        .frame(width:300)
                    
                    CardView(image: "natural-language-api", title: "iOS", subtitle: "What's New in Natural Language API", author: "Sai Kambampati")
                        .frame(width:300)
                }
            }
            Spacer()
        }
    }
}

#Preview {
    Scroll()
}