携手创作，一同生长！这是我参与「日新方案 8 月更文挑战」的第7天，点击检查活动概略。
在本章中，你将学会运用SwiftUI树立一个简易书本阅览App。
项目布景
自修道以来，每天晚上都会在群里和师兄弟们一同诵读经文，已然成为一种习气。
不过总是带着纸质的书本总该是不方便，网上又没有我们诵读的版本，所以想着自己树立一个吧。
说干就干。
项目树立
首要，创立一个新的SwiftUI项目，命名为ConfucianClassics。
模型树立
首要，我们先创立一个数据模型，我们命名为Book。
struct Book:Identifiable {
var id = UUID()
var title: String
var content: String
}
上述代码中，我们创立了一个Book结构体，遵照Identifiable协议。
然后我们声清楚几个变量：id作为仅有标识符，title为标题，content为内容。
完成后，我们来创立一些示例数据，示例：
private var books = [
Book(title: "第一章：论德", content: "上德不德，是以有德。下德不失德；是以无德。上德无为而无以为也。上仁为之，而无以为也；上义为之，而有以为也。上礼为之，而莫之应也，则攘臂而乃之。故失道然后德，失德然后仁，失仁然后义，失义然后礼。夫礼者，忠信之泊也，而乱之首也。前识者，道之华也，而愚之首也。是以大丈夫居其厚，而不居其泊，居其实，而不居其华。故去皮取此。"),
Book(title: "第二章：得一", content: "昔之得一者，天得一以清，地得一以宁，神得一以灵，浴得一以盈，侯王得一而以为全国正。其至之也。谓天毋已清将恐裂；谓地毋已宁将恐发；谓神毋已灵将愁歇；谓浴毋已盈将恐竭；谓侯王毋已贵以高将恐蹶。故必贵而以贱为本，必高矣而以下为基。夫是以侯王自谓孤、寡、不穀，此其贱之为本与？非也！故致数与无与。是故不欲禄禄若玉，硌硌若石。"),
Book(title: "第三章：闻道", content: "上士闻道，堇能行之；中士闻道，若存若亡；下士闻道，大笑之，弗笑缺少以为道。是以建言有之日：明道如费，进道如退，夷道如类；上德如浴，大白如辱，广德如缺少。建德如输，质真如渝，大方无隅；大器晚成，大音希声，大象无形，道隐无名。夫唯道，善始且善成。"),
Book(title: "第四章：反复", content: "反也者，道之动也;弱也者，道之用也。全国之物生于有，有生于无。"),
Book(title: "第五章：中和", content: "道生一，终身二，二生三，三生万物。万物负阴而抱阳，中气以为和。全国之所恶，唯孤、寡、不穀，而王公以为自名也。勿或损之而益，或益之而损。觐殷死，议而教人。故强良者不得死，我将以为学父。"),
Book(title: "第六章：至柔", content: "全国之至柔，奔驰于全国之至坚。无有入于无间。吾是以知无为之有益。不言之教，无为之益，全国希能及之矣。"),
Book(title: "第七章：立戒", content: "名与身孰亲?身与货孰多?得与亡孰病?甚爱必大费，多藏必厚亡。故知足不辱，知止不殆，能够持久。"),
Book(title: "第八章：请靓", content: "大成若缺，其用不敝;大盈若冲，其用不穷。大直若诎，大巧若拙，大赢如绌。躁胜寒，靓胜炅。请靓能够为全国正。"),
Book(title: "第九章：知足", content: "全国有道，却走马以粪。全国无道，戎马生于郊。罪莫大于可欲，祸莫大于不知足，咎莫僭于欲得。故知足之足，恒足矣。"),
Book(title: "第十章：知全国", content: "不出于户，以知全国。不窥于牖，以知天道。其出也弥远，其知也弥少。是以圣人，不可而知，不见而名，弗为而成。"),
]
就此，数据部分我们就预备好了。
页面款式
页面部分能够做的很简答，我们运用List列表来构建内容，示例：
NavigationView {
List(books) { book in
Text(book.title)
}.navigationBarTitle("德道经")
}
上述代码中，我们运用List构建了一个列表，遍历books示例数据数组中的数据，内容部分我们运用Text文字作为列表的内容。
别的，由于后面需求根据顶部导航栏进行跳转，我们还运用了NavigationView构建一个顶部导航栏视图，我们加了一个标题。
概略页
下一步，我们需求构建点击对应章节的内容，进入到章节的概略页。
我们构建一个新的视图，命名为DetailView。
// 概略页面
struct DetailView: View {
var book: Book
var body: some View {
VStack {
Text(book.content)
.font(.system(size: 17))
.lineSpacing(10)
.padding()
Spacer()
}.navigationBarTitle(book.title, displayMode: .inline)
}
}
上述代码中，我们创立了一个DetailView视图。
在视图中，我们首要声清楚一个类型为Book变量book，这样在我们传递数据的时分，就能够给book传递数值。
主要内容部分，我们运用Text构建内容，运用font修饰符设置文字字号，运用lineSpacing设置文字字距离，运用padding给整个文字展示位置加边距。
终究运用navigationBarTitle设置了该页面的标题，展示办法为inline居中。
页面跳转
完成后，终究我们来做从ContentView视图跳转到DetailView视图。
NavigationView {
List(books) { book in
NavigationLink(destination: DetailView(book: book)) {
Text(book.title)
}
}.navigationBarTitle("德道经")
}
上述代码中，我们运用NavigationLink根据导航栏的跳转办法，从ContentView视图跳转到DetailView视图，并且从ContentView视图把book数组数据源带入到DetailView视图中的book数组。
这样，我们就完成了页面的跳转和数据的传递。
项目展示
恭喜你，完成了整个项目的全部内容！
快来动手试试吧。
如果本专栏对你有帮助，不妨点赞、谈论、重视～
