SwiftUI ScrollView 滚动视图

代码

//
//  ContentView.swift
//  SwiftUIScrollView
//
//  Created by CHEN Hao on 2024/5/7.
//

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack(alignment: .leading) {
            VStack(alignment: .leading) {
                Text("monday, aug 20".uppercased())
                    .font(.caption)
                    .foregroundStyle(.secondary)
                Text("Your Reading")
                    .font(.system(.largeTitle,design: .rounded))
                    .fontWeight(.black)
                    .foregroundStyle(.primary)
            }
            .padding()
            
            // 滚动试图 .horizontal--横向滚动，.vertical--垂直滚动，默认vertical
            ScrollView(.horizontal, showsIndicators: false) {
                HStack {
                    Group { // 群组视图 群组内视图设置统一样式
                        CardView(image: "swiftui-button", category: "SwiftUI", heading: "Drawing a Border with Rounded Corners", author: "Simon Ng")
                        CardView(image: "macos-programming", category: "macOS", heading: "Building a Simple Editing App", author: "Gabriel Theodoropoulos")
                        CardView(image: "flutter-app", category: "Flutter", heading: "Building a Complex Layout with Flutter", author: "Lawrence Tan")
                        CardView(image: "natural-language-api", category: "iOS", heading: "What's New in Natural Language API", author: "Sai Kambampati")
                    }
                    .frame(width: 300)
                }
            }
            Spacer()
        }
    }
}

#Preview {
    ContentView()
}

struct CardView: View {
    var image: String
    var category: String
    var heading: String
    var author: String
    
    var body: some View {
        VStack{
            Image(image)
                .resizable()
                .aspectRatio(contentMode: .fit)
            HStack {
                VStack(alignment: .leading) {
                    Text(category)
                        .font(.headline)
                        .foregroundStyle(.secondary)
                    Text(heading)
                        .font(.title)
                        .fontWeight(.black)
                        .foregroundStyle(.primary)
                        .lineLimit(3)
                        .minimumScaleFactor(0.5) // 自动缩小文字
                    Text(author.uppercased())
                        .font(.caption)
                        .foregroundStyle(.secondary)
                    
                }
                Spacer()
            }
            .padding()
        }
        .clipShape(RoundedRectangle(cornerRadius: 10)) // 剪裁成圆角矩形
        .overlay(RoundedRectangle(cornerRadius: 10)
            .stroke(Color(.sRGB, red: 150/255, green: 150/255, blue: 150/255, opacity: 0.1), lineWidth: 1)
        ) // 描边（就是覆盖一个视图）
        .padding([.top,.horizontal])
    }
}

效果