使用Xcode13进行Swift开发https://blog.csdn.net/gavinliu266/article/details/126407896
Monterey错误已在本博客中修正

1.应用功能

快捷键与SFsymbols请看文首链接。

1.1 UIScreen与systemName

为了方便演示，我将新建一个swift文件
选择一个swift文件，右键-New File-SwiftUI View，命名CardView，并将Targets中的Test_WidgetExtension钩上
创建一个简单的卡片

struct CardView: View {var body: some View {ZStack {Image("Monterey").resizable().frame(width:200,height:200).cornerRadius(20).shadow(color: Color.black.opacity(0.4), radius: 30, x: 0, y: 30)VStack {Text("Macos12 Monterey").font(.title).fontWeight(.bold).frame(width:200).foregroundColor(.white)Image(systemName: "person.2").resizable().aspectRatio(contentMode: .fit).frame(width:100,height: 100).foregroundColor(.white)}}}
}

这里width我们暂时设置200
systemName：
在SFsymbols中找到想要的图标,但是如果在右边栏中显示的系统ios版本比你的Xcode所支持的版本要高，那么你也不能使用它。例如我的Xcode13.4.1对于是可以支持的，但是对于由于需要iOS 16.0+，所以不能支持

接下来Command 点击ZStack，嵌入一个HStack，然后提取子视图，命名为Card

现在效果：

接下来我可以把

.frame(width:200,height:200)

替换成

.frame(width:UIScreen.main.bounds.width / 1.5,height:200)

---

并且把

.frame(width:100,height: 100)

替换成

.frame(width:UIScreen.main.bounds.width / 3,height: 100)

---

还有

.frame(width:200)

替换成

.frame(width:UIScreen.main.bounds.width / 1.5)

当然还有更好的方法，但是我们先用这个

1.2 struct，ScrollView，padding,ForEach和创建列表

现在我们只有一个，那么如果有多个的话，我不想创建多个Card程序，所以我需要把一些值用参数传进来
在Card中

var body: some View{...}

之前，我们添加

var image: String
var text: String
var systemImage: String

然后将两个图像和一个文本用参数代替

struct Card: View {var image: Stringvar text: Stringvar systemImage: Stringvar body: some View {ZStack {Image(image).resizable().frame(width:UIScreen.main.bounds.width / 1.5,height:200).cornerRadius(20).shadow(color: Color.black.opacity(0.4), radius: 30, x: 0, y: 30)VStack {Text(text).font(.title).fontWeight(.bold).frame(width:UIScreen.main.bounds.width / 1.5).foregroundColor(.white)Image(systemName: systemImage).resizable().aspectRatio(contentMode: .fit).frame(width:UIScreen.main.bounds.width / 3,height: 100).foregroundColor(.white)}}}
}

然后在调用的地方改成

Card(image: "Monterey", text: "Macos12 Monterey", systemImage: "person.2")

然后在HStack前面加上
ScrollView:滚动视图，
.horizontal:横向滚动，
.showIndicators: false:不显示滚动条
.padding默认给全方位添加默认值填充，第一个参数用于设置填充方向，第二个参数用于设置填充大小

ScrollView(.horizontal ,showsIndicators: false) {

后面补上

   .padding(.horizontal,20).padding(.bottom,80)
}

全选，Ctrl + I调整缩进

好了，让我们开始创建一个结构体

然后创建一个列表

var CardViewList = [CardList(image: "Monterey", text: "Macos12 Monterey", systemName: "person.3"),CardList(image: "BigSur", text: "Macos11 Big Sur", systemName: "person.2"),CardList(image: "Catalina", text: "Macos10.15 Catalina", systemName: "person")
]

回到Card中，删掉var image等三个，换成

var cardviewlist: CardList

将以下代码

Image(image)

换成

Image(cardviewlist.image)

---

将以下代码

Text(text)

换成

Text(cardviewlist.text)

---

将以下代码

Image(systemName: systemImage)

换成

Image(systemName: cardviewlist.systemName)

到Card(…),Command+单击，选择Repeat
改以下代码

ForEach(0 ..< 5)

为

ForEach：循环

ForEach(CardViewList.indices,id: \.self)

并将以下代码

Card(image: "Monterey", text: "Macos12 Monterey", systemImage: "person.2")

换成

Card(cardviewlist: CardViewList[index])

然后给HStack加一个间距
现在是

ScrollView(.horizontal ,showsIndicators: false) {HStack(spacing:70) {ForEach(CardViewList.indices,id: \.self) { index inCard(cardviewlist: CardViewList[index])}}.padding(.horizontal,20).padding(.bottom,80)
}

很好

1.3 GeometryReader

关于UIScreen.main.bounds不是最好的解决方案上文提到过了，如下，当改变了屏幕的宽度或高度时，它不会自动调整
所以这个时候我们就需要用到GeometryReader了
首先，将HStack嵌入几何阅读器，并添加bounds in
然后在Card里面添加一个变量

var bounds: GeometryProxy

就可以替换以下代码了

UIScreen.main.bound

换成

bounds.size

并且在调用时添加变量

Card(cardviewlist: CardViewList[index],bounds: bounds)

完美

由于UIScreen是静态的，所以没有办法在变更时对其值进行更改，但GeometryReader是动态的，所以当我们变换布局时，它的值也会变动，因此卡片的大小也就跟着变动了

1.4 list,combine

当我们使用app时，经常会看见列表

图片来源于网络

首先要想要实现的话，我们首先要创建列表

创建一个swiftUI类型的文件，命名为MacosList,

然后在创建一个swiftUI类型文件，命名为MacosListStore
进入MacosListStore，删除全部代码，然后粘贴以下代码用于编辑

import SwiftUI
import Combine
class ListStore : ObservableObject {@Published var list : [CardList] = CardViewList
}

接着在MacosList中的var body: some View {…}之前加入

@ObservedObject var store = ListStore()func addList(){store.lists.append(CardList(image: "Monterey", text: "Macos12 Monterey", systemName: "person.3"))}

然后var body: some View中加入

GeometryReader { bounds inNavigationView{List {ForEach(store.lists.indices,id: \.self) { index inNavigationLink(destination: Card(cardviewlist: store.lists[index], bounds: bounds)) {HStack {Image(store.lists[index].image).resizable().aspectRatio(contentMode: .fit).frame(width: 80, height: 80).background(Color.black).cornerRadius(20).padding(.trailing,4)VStack(alignment: .leading, spacing: 8.0) {Text(store.lists[index].text).font(.headline).fontWeight(.bold).lineLimit(2).foregroundColor(Color.black)Image(systemName: store.lists[index].systemName).foregroundColor(.black)}}.padding(.vertical,8)}}.onDelete{ index inself.store.lists.remove(at: index.first!)}.onMove{(source: IndexSet,destination: Int) inself.store.lists.move(fromOffsets: source,toOffset: destination)}}.navigationBarTitle(Text("Updates")).navigationBarItems(leading: Button(action: addList) {Text("Add Update")} ,trailing: EditButton())}}

上面的代码由于比较多，所以我就不一一解释了，就是把列表中的静态数据转换成动态数据，然后输出。通过onDelete和onMove来进行移动和删除操作。

另外名字之所以取为MacosList而不去为List，是因为如果取为List的话会报错，因为与List同名

最后回到ContentView，删除<-50的判断，然后在sheet里面换成MacosList

效果很好