持续创造，加快生长！这是我参与「日新计划 6 月更文应战」的第12天，点击查看活动概况。

承接上一章内容，咱们持续完结构建一个AppStore使用商场引荐页面。

SwiftUI极简教程36:构建一个AppStore应用市场推荐页面（中）

款式修订

由于咱们运用frame修饰符约束了CardView视图的高度，而没有设定展现的宽度，那么就有或许会存在当咱们image图片太大时，整个ContentView视图被撑开的状况。

.frame(height: min(self.image.size.height / 3, 500))

为防止这种状况，咱们需求设定整个CardView视图的宽度，防止超出展现的边缘。

在之前的章节中，咱们介绍过GeometryReader容器的运用办法，它可以访问父视图的宽度，得到屏幕的宽度，咱们就可以通过屏幕宽度设置CardView视图展现的宽度。

GeometryReader { geometry in
 //代码块
}

然后，咱们就可以直接设置image图片展现的宽度为GeometryReader容器的宽度。

.frame(width: geometry.size.width, height: min(self.image.size.height/3, 500))

SwiftUI极简教程36:构建一个AppStore应用市场推荐页面（中）

封闭按钮

完结了部分款式调整后，咱们来完结下点击摘要视图展现完好视图，然后完好视图要想切换到摘要视图的款式部分，咱们发现还需求一个封闭按钮。

在完好视图中，咱们在其右上角用ZStack层叠一个colseButton封闭按钮。

// 封闭按钮
if self.isShowContent {
HStack {
Spacer()
Button(action: {
self.isShowContent = false
}) {
Image(systemName: "xmark.circle.fill")
.font(.system(size: 26))
.foregroundColor(.white)
.opacity(0.7)
}
}
.padding(.top, 50)
.padding(.trailing)
}

SwiftUI极简教程36:构建一个AppStore应用市场推荐页面（中）

完结后，咱们回到ContentView视图。

之前，咱们运用下标的办法展现了一个卡片视图便利咱们编程演示需求，现在咱们完结了根本页面款式，咱们重新来修改下ContentView视图展现内容。

和之前的章节一样，咱们运用ForEach循环的方式遍历数据。

struct ContentView: View {
var body: some View {
ScrollView {
ForEach(sampleModels.indices,id: \.self) { index in
GeometryReader {inner in
CardView(category: sampleModels[index].category, headline: sampleModels[index].headline, subHeadline: sampleModels[index].subHeadline, image: sampleModels[index].image, content: sampleModels[index].content
, isShowContent: .constant(false))
.padding(.horizontal, 20)
}
.frame(height: min(sampleModels[index].image.size.height / 3, 500))
}
}
}
}

上述代码中，咱们构建了一个ScrollView滚动视图，便于展现多张卡片视图。然后咱们运用ForEach循环遍历sampleModels数组中的数据，在CardView卡片视图中，咱们运用[index]下标定位的方式取得sampleModels数组中的数据，最终咱们运用frame修饰符调整卡片视图的巨细。

SwiftUI极简教程36:构建一个AppStore应用市场推荐页面（中）

看起来不错。

顶部导航栏

下面咱们在主体根底上完结了顶部导航栏的内容。顶部导航栏由当时日期、“今日”文字、还有用户头像组成，咱们可以定义一个结构体TopBarView来完结款式部分的内容。

struct TopBarView: View {
var body: some View {
HStack(alignment: .lastTextBaseline) {
VStack(alignment: .leading) {
Text("6月5日 星期天")
.font(.caption)
.foregroundColor(.secondary)
Text("今日")
.font(.largeTitle)
.fontWeight(.heavy)
}
Spacer()
Image("image01")
.resizable()
.frame(width: 40, height: 40)
.clipShape(Circle())
.overlay(Circle().stroke(Color.gray, lineWidth: 1))
}
}
}

然后咱们在ContentView视图中展现TopBarView的内容。

SwiftUI极简教程36:构建一个AppStore应用市场推荐页面（中）

如同还不错，但这儿咱们是运用Text文本的方式展现当时的日期的，这不够高雅，咱们需求每次翻开的时候都获取当时的体系时刻，咱们可以运用下面的办法。

func getCurrentDate(with format: String = "EEEE, MMM d") -> String {
let dateFormatter = DateFormatter()
dateFormatter.dateFormat = format
return dateFormatter.string(from: Date())
}

然后，咱们只需求在Text文本中调用这个办法，就可以展现体系当时日期了。

SwiftUI极简教程36:构建一个AppStore应用市场推荐页面（中）

小结

AppStore使用商场引荐页面的款式部分咱们就完结了，在第一章咱们完结了根底页面的制作，包含摘要内容展现视图和完好内容展现视图。

在本章中，咱们修订了部分的款式，在完好展现视图上增加了封闭按钮，最终还增加了顶部导航栏。

那么下一章，咱们将学习怎么从摘要视图卡片，点击翻开完好视图内容的交互动作，这也是整个项目中最难的部分。

快来着手试试吧！

如果本专栏对你有协助，不妨点赞、谈论、关注～