Section 13 : ScrollView and Repeat

最新推荐文章于 2021-08-22 15:59:02 发布

人称大叔

最新推荐文章于 2021-08-22 15:59:02 发布

阅读量112

点赞数

文章标签： SwiftUI

本文链接：https://blog.csdn.net/hh680821/article/details/105067071

版权

Build an app with SwiftUI 专栏收录该内容

19 篇文章 5 订阅

订阅专栏

- 滚动和重复视图（11’52"）

Add a horizontal ScrollView to a list of cards in SwiftUI.

在 SwiftUI 中添加水平滚动视图和卡片的列表（list）。

1. 设计 SectionView

在 Home.swift 中设计并抽取子视图 SectionView

struct SectionView: View {
    var body: some View {
        VStack {
            HStack(alignment: .top) {
                Text("SwiftUI \n原型设计")
                    .font(.system(size: 24, weight: .bold))
                    .frame(width: 160, alignment: .leading)
                    .foregroundColor(.white)
                
                Spacer()
                
                Image("Logo1")
            }
            
            Text("共 18 讲")
                .frame(maxWidth: .infinity, alignment: .leading)
            
            Image("Card1")
                .resizable()
                .aspectRatio(contentMode: .fit)
                .frame(width: 210)
        }
        .padding(.top, 20)
        .padding(.horizontal, 20)
        .frame(width: 275, height: 275)
        .background(Color("card1"))
        .cornerRadius(30)
        .shadow(color: Color("card1").opacity(0.3), radius: 20, x: 0, y: 20)
    }
}

2. 重复视图

按住⌘ 点击主视图中的 SectionView，在快捷菜单中选择 Repeat，Xcode 自动加上了循环语句，默认是 5 次。再将循环用HStack包裹起来。再将 HStack 用 VStack 包裹起来，然后把 VStack 改成 ScrollView。这样做的好处一是方便，二是不用担心括号的闭合问题。最后加上适当的修饰。

// 如果是垂直滚动，要把 horizontal 改成 vertical，HStack 改成 VStack
ScrollView(.horizontal, showsIndicators: false) {   // 水平滚动，不显示滚动条
    HStack(spacing: 30) {                           // 水平放置
        ForEach(0 ..< 5) { item in                  // 重复 5 次
			SectionView()                           // 子视图
        }
	}
	.padding(30)
	.padding(.bottom, 30)
}