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

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

  
1. 认识 ScrollView

首先，ScrollView 是 SwiftUI 中一个非常实用的视图，它允许用户在内容超出屏幕范围时进行滚动。你可以创建程度或垂直方向的滚动视图，非常得当用来展示一系列内容，好比图片、卡片等。
根本用法
先来看一个最简单的例子：

1. ScrollView {
2.     VStack {
3.         Text("第一项")
4.         Text("第二项")
5.         Text("第三项")
6.         // 更多内容...
7.     }
8. }

复制代码

上面的代码会创建一个垂直滚动的视图，内里包含多个文本项。用户可以上下滑动来检察所有内容。
2. 创建程度滚动的轮播

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

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

复制代码

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

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

1. import SwiftUI
3. struct CardView: View {
4.     var image: String
5.     var title: String
6.     var subtitle: String
7.     var author: String
8.    
9.     var body: some View {
10.         VStack(alignment: .leading) {
11.             Image(image)
12.                 .resizable()
13.                 .scaledToFit()
14.                 .cornerRadius(10)
15.             Text(title)
16.                 .font(.headline)
17.                 .padding(.top, 5)
18.             Text(subtitle)
19.                 .font(.subheadline)
20.                 .foregroundColor(.secondary)
21.             Spacer()
22.             Text(author)
23.                 .font(.caption)
24.                 .foregroundColor(.gray)
25.         }
26.         .padding()
27.         .background(Color(.systemBackground))
28.         .cornerRadius(15)
29.         .shadow(radius: 5)
30.     }
31. }

复制代码

这个 CardView 包含一个图片、标题、副标题和作者信息。通过设置 cornerRadius 和 shadow，卡片看起来更加立体和美观。
4. 综合实现：组合 ScrollView 和 CardView

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

1. import SwiftUI
3. struct Scroll: View {
4.     var body: some View {
5.         VStack {
6.             // 顶部标题
7.             HStack {
8.                 VStack(alignment: .leading) {
9.                     Text("星期一，8月20日")
10.                         .font(.caption)
11.                         .foregroundColor(.secondary)
12.                     Text("你的魔卡")
13.                         .font(.system(.largeTitle, design: .rounded))
14.                         .fontWeight(.black)
15.                 }
16.                 .padding()
17.                 Spacer()
18.             }
19.             
20.             // 水平滚动的轮播
21.             ScrollView(.horizontal, showsIndicators: false) {
22.                 HStack(spacing: 20) { // 增加间距让卡片不至于挤在一起
23.                     CardView(image: "swiftui-button",
24.                              title: "SwiftUI",
25.                              subtitle: "绘制带圆角的边框",
26.                              author: "作者：LC")
27.                         .frame(width: 300)
28.                     
29.                     CardView(image: "macos-programming",
30.                              title: "macOS",
31.                              subtitle: "构建一个简单的编辑应用",
32.                              author: "作者：Gabriel Theodoropoulos")
33.                         .frame(width: 300)
34.                     
35.                     CardView(image: "flutter-app",
36.                              title: "Flutter",
37.                              subtitle: "使用 Flutter 构建复杂布局",
38.                              author: "作者：Lawrence Tan")
39.                         .frame(width: 300)
40.                     
41.                     CardView(image: "natural-language-api",
42.                              title: "iOS",
43.                              subtitle: "自然语言 API 的新功能",
44.                              author: "作者：Sai Kambampati")
45.                         .frame(width: 300)
46.                 }
47.                 .padding(.horizontal)
48.             }
49.             Spacer()
50.         }
51.     }
52. }
54. struct Scroll_Previews: PreviewProvider {
55.     static var previews: some View {
56.         Scroll()
57.     }
58. }

复制代码

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

在 Xcode 中运行这个项目，你应该会看到一个带有顶部标题的页面，下面是一个可以左右滑动的轮播。每个卡片展示了不同的内容，用户可以轻松浏览。
注：图片链接仅为示意，现实效果请在 Xcode 中检察。
6. 小技巧与优化

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

复制代码

1. let cards = [
2.     Card(image: "swiftui-button", title: "SwiftUI", subtitle: "绘制带圆角的边框", author: "LC"),
3.     // 更多卡片数据...
4. ]
6. ScrollView(.horizontal, showsIndicators: false) {
7.     HStack(spacing: 20) {
8.         ForEach(cards) { card in
9.             CardView(image: card.image, title: card.title, subtitle: card.subtitle, author: card.author)
10.                 .frame(width: 300)
11.         }
12.     }
13.     .padding(.horizontal)
14. }

复制代码

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

复制代码

7. 总结

今天我们通过一个简单的例子，学习了如安在 iOS 17 的 SwiftUI 中使用 ScrollView 来创建一个程度滚动的轮播界面。通过组合 ScrollView 和自定义的 CardView，我们轻松实现了一个美观且实用的轮播效果。希望这篇教程对你有所资助，快去试试吧！
假如你有任何问题或建议，欢迎在下方留言讨论。别忘了关注我们，获取更多 SwiftUI 和 iOS 开辟的出色内容！
参考代码：

1. //
2. //  ScrollView.swift
3. //  Teach
4. //
5. //  Created by lc on 2025/1/8.
6. //
8. import SwiftUI
10. struct Scroll: View {
11.     var body: some View{
12.         VStack {
13.             HStack {
14.                 VStack(alignment:.leading) {
15.                     Text("MONDAY,AUG 20")
16.                         .font(.caption)
17.                         .foregroundColor(.secondary)
18.                     Text("你的魔卡")
19.                         .font(.system(.largeTitle,design: .rounded))
20.                         .fontWeight(.black)
21.                 }.padding()
22.                 Spacer()
23.             }
24.             ScrollView(.horizontal,showsIndicators: false) {
25.                 HStack {
26.                     CardView(image: "swiftui-button",
27.                              title: "SwiftUI",
28.                              subtitle: "Drawing a Border with Rounded Corners",
29.                              author: "Written by LC")
30.                     .frame(width:300)
31.                     CardView(image: "macos-programming", title: "macOS", subtitle: "Building a Simple Editing App", author: "Gabriel Theodoropoulos")
32.                         .frame(width:300)
33.                     
34.                     CardView(image: "flutter-app", title: "Flutter", subtitle: "Building a Complex Layout with Flutter", author: "Lawrence Tan")
35.                         .frame(width:300)
36.                     
37.                     CardView(image: "natural-language-api", title: "iOS", subtitle: "What's New in Natural Language API", author: "Sai Kambampati")
38.                         .frame(width:300)
39.                 }
40.             }
41.             Spacer()
42.         }
43.     }
44. }
46. #Preview {
47.     Scroll()
48. }

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。