SwiftUI学习07：ScrollView滚动视图使用

前言

在本章中，你将学会如何使用 代码分组 和 代码复用 的方式创建 ScrollView 滚动视图

以微信公众号为例，我们试试完成下面的UI设计图

分析

由UI可知，文章是由图片Image和Text组成，而且是 纵向排列

因此，我们实现的步骤如下：

• 准备一些图片素材，放入到 Assets.xcassets 文件中
• 先完成基础的 单个卡片的代码，并将其 纵向分布
• 将卡片 提取成子视图，嵌入到 ScrollView 中

代码实现

• 将图片素材，放入到 Assets.xcassets 文件中

• 基础卡片的实现

Image图片的常用方法:

.resizabl ：调节大小，调整图片显示的大小
.aspectRatio() ：宽高比，.aspectRatio(contentMode: ContentMode.fit)让图片适应屏幕，并保持原有的宽高比 

Text文本常用的方法：

.font()：字体，.font(.system(size:17))，系统17号字
.fontWeight()：字重，.fontWeight(.blod)，加粗
.foregroundColor()：字体颜色，.foregroundColor(.black)，系统黑色
.padding()：边距，四周留开边距

单个卡片实现的代码：

VStack {
            // 图片
            Image("book1")
                .resizable() // 调整图片显示的大小
                .aspectRatio(contentMode: ContentMode.fit) // 宽高比
            // 文字
            Text("你的能力是否在全世界通用，如果不能，那么需求重新评估你的能力")
                .font(.system(size: 17))
                .fontWeight(.bold)
                .foregroundColor(.black)
                .padding()
        }

给整个 卡片 加边框，通过 .overlay() 修饰符 覆盖 上去：

.cornerRadius(10)
.overlay(
    RoundedRectangle(cornerRadius: 10)
        .stroke(Color(red: 150/255, green: 150/255, blue: 150/255,opacity: 0.1),lineWidth: 1)
)

给 卡片 设置一个边距，用到了 .padding() 修饰符，且是它的 高级用法：

.padding([.top,.horizontal]) 顶部，水平居中

• 将卡片提取成子视图

// 卡片视图
struct CardView: View {
    // 定义变量
    var img:String?     // 图片
    var title:String?   // 标题
    
    var body: some View {
        VStack {
            // 图片
            Image(img!)
                .resizable() // 调整图片显示的大小
                .aspectRatio(contentMode: ContentMode.fit) // 宽高比
            // 文字
            Text(title!)
                .font(.system(size: 17))
                .fontWeight(.bold)
                .foregroundColor(.black)
                .padding()
        }
        .cornerRadius(10)
        .overlay(
            RoundedRectangle(cornerRadius: 10)
                .stroke(Color(red: 150/255, green: 150/255, blue: 150/255,opacity: 0.1),lineWidth: 1)
        )
        .padding([.top,.horizontal])
    }
}

• 将多张卡片添加到ScrollView中

struct ContentView: View {
    var body: some View {
        ScrollView{
            VStack {
                // 卡片视图
                CardView(img: "book1",title: "你的能力是否能在全世界通用，如果不能,那么需求重新评估你的能力。")
                CardView(img: "book2",title: "当你判断你的想法是正确的，那么就在今天完成吧。")
                CardView(img: "book3",title: "当你判断你的想法是正确的，那么就在今天完成吧。")
                CardView(img: "book4",title: "将自身所学的回馈社会，不也是意见幸福的事儿么")
                CardView(img: "book2",title: "成功的秘诀，绝对不要和别人做相同的事儿")
            }
        }
        
    }
}

• 最终呈现的结果如下：