一起养成写作习惯！这是我参加「日新计划 4 月更文应战」的第27天，点击检查活动概况。
在本章中，你将学会运用DisclosureGroup拓宽折叠视图构建一个FAQ页面。
在许多工具类的App中，咱们常常能够看到一个“新手教程”页面，或者“常见问题”页面，在这个页面中，咱们能够看到开发者留下的一些App常见问题及其解答。
它的交互形式也比较简单，点击问题，展现答案。
下面，咱们来运用DisclosureGroup拓宽折叠视图构建一个FAQ页面。
开端
首要，创建一个新项目，命名为SwiftUIDisclosureGroup。
基础建立
首要咱们先了解下DisclosureGroup拓宽折叠视图的运用方法：
DisclosureGroup(
isExpanded: $isExpanded,
content: {
//答案代码块
},
label: {
//问题代码块
}
)
DisclosureGroup拓宽折叠视图的运用需求定义3个参数。
一是绑定的点击事情$isExpanded，这是依据用户点击哪一个问题，对应翻开哪一个问题的答案。
@State var isExpanded = false
然后是问题和答案，咱们用Text文本构建问题和答案。
咱们运转模拟器，测验点击问题，咱们发现它能够完成点击翻开和收起了。
进阶
假如咱们有多个问题和答案组成FAQ，那咱们该怎么做呢？
很简单，咱们能够测验运用List列表和ForEach循环的方式遍历数据。
首要，咱们创建数组数据，在数组中，咱们编辑好了问题和答案。
private let FAQ = [
(
question: "怎么把大象装进冰箱？",
answer: "榜首，先把冰箱翻开。第二，把大象装进去。第三，把冰箱门关上。"
),
(
question: "怎么把企鹅装进冰箱？",
answer: "榜首，先把冰箱翻开。第二，把大象拿进去。第三，把企鹅装进去。第三，把冰箱门关上。"
),
(
question: "动物森林要举办动物大会，有一只动物缺席了，是什么动物？",
answer: "企鹅，由于它在冰箱里边。"
)
]
然后咱们运用List列表和ForEach循环遍历数据。
完善
预览模拟器作用，咱们发现点击翻开时，一切答案都翻开了，这不是咱们想要的作用。
由于咱们isExpanded是否翻开的状况只要是和否，所以才会都翻开和收起。咱们希望的作用是，点击哪一个问题，就展现对应的答案。
咱们需求设置isExpanded依据数据确定状况。
@State var isExpanded = Array(repeating: false, count: 3)
然后修订DisclosureGroup拓宽折叠视图isExpanded绑定为依据点击的项目的索引进行翻开和收起。
这样咱们就完成了运用DisclosureGroup拓宽折叠视图构建一个FAQ页面。
完整代码
import SwiftUI
struct ContentView: View {
@State var isExpanded = Array(repeating: false, count: 3)
private let FAQ = [
(
question: "怎么把大象装进冰箱？",
answer: "榜首，先把冰箱翻开。第二，把大象装进去。第三，把冰箱门关上。"
),
(
question: "怎么把企鹅装进冰箱？",
answer: "榜首，先把冰箱翻开。第二，把大象拿进去。第三，把企鹅装进去。第三，把冰箱门关上。"
),
(
question: "动物森林要举办动物大会，有一只动物缺席了，是什么动物？",
answer: "企鹅，由于它在冰箱里边。"
)
]
var body: some View {
List {
ForEach(FAQ.indices, id: \.self) { index in
DisclosureGroup(
isExpanded: $isExpanded[index],
content: {
// 答案代码块
Text(FAQ[index].answer)
.font(.body)
.fontWeight(.light)
},
label: {
// 问题代码块
Text(FAQ[index].question)
.font(.body)
.bold()
}
).padding()
}
}
}
}
快来动手试试吧！
假如本专栏对你有协助，无妨点赞、评论、关注～
