SwiftUI ScrollView 滚动视图

代码

//
//  ContentView.swift
//  SwiftUIScrollView
//
//  Created by CHEN Hao on 2024/5/7.
//import SwiftUIstruct 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--垂直滚动，默认verticalScrollView(.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: Stringvar category: Stringvar heading: Stringvar author: Stringvar 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])}
}

效果