一起养成写作习惯！这是我参与「掘金日新计划 · 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()
}
}
}
}
快来动手试试吧！
如果本专栏对你有帮助，不妨点赞、评论、关注～
