在本章中，你将学会使用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() } } } }
快来动手试试吧！
