一起养成写作习惯!这是我参加「日新计划 4 月更文应战」的第27天,点击检查活动概况。

在本章中,你将学会运用DisclosureGroup拓宽折叠视图构建一个FAQ页面。

在许多工具类的App中,咱们常常能够看到一个“新手教程页面,或者“常见问题”页面,在这个页面中,咱们能够看到开发者留下的一些App常见问题及其解答。

它的交互形式也比较简单,点击问题,展现答案。

SwiftUI极简教程27:DisclosureGroup拓展折叠视图的使用

下面,咱们来运用DisclosureGroup拓宽折叠视图构建一个FAQ页面。

开端

首要,创建一个新项目,命名为SwiftUIDisclosureGroup

SwiftUI极简教程27:DisclosureGroup拓展折叠视图的使用

基础建立

首要咱们先了解下DisclosureGroup拓宽折叠视图的运用方法:

DisclosureGroup(
 isExpanded: $isExpanded,
 content: {
  //答案代码块
 },
 label: {
  //问题代码块
  }
)

DisclosureGroup拓宽折叠视图的运用需求定义3个参数。

一是绑定的点击事情$isExpanded,这是依据用户点击哪一个问题,对应翻开哪一个问题的答案。

@State var isExpanded = false

然后是问题和答案,咱们用Text文本构建问题和答案。

SwiftUI极简教程27:DisclosureGroup拓展折叠视图的使用

咱们运转模拟器,测验点击问题,咱们发现它能够完成点击翻开和收起了。

进阶

假如咱们有多个问题和答案组成FAQ,那咱们该怎么做呢?

很简单,咱们能够测验运用List列表和ForEach循环的方式遍历数据。

首要,咱们创建数组数据,在数组中,咱们编辑好了问题和答案。

private let FAQ = [
(
question: "怎么把大象装进冰箱?",
answer: "榜首,先把冰箱翻开。第二,把大象装进去。第三,把冰箱门关上。"
),
(
question: "怎么把企鹅装进冰箱?",
answer: "榜首,先把冰箱翻开。第二,把大象拿进去。第三,把企鹅装进去。第三,把冰箱门关上。"
),
(
question: "动物森林要举办动物大会,有一只动物缺席了,是什么动物?",
answer: "企鹅,由于它在冰箱里边。"
)
]

然后咱们运用List列表和ForEach循环遍历数据。

SwiftUI极简教程27:DisclosureGroup拓展折叠视图的使用

完善

预览模拟器作用,咱们发现点击翻开时,一切答案都翻开了,这不是咱们想要的作用。

由于咱们isExpanded是否翻开的状况只要是和否,所以才会都翻开和收起。咱们希望的作用是,点击哪一个问题,就展现对应的答案。

咱们需求设置isExpanded依据数据确定状况。

@State var isExpanded = Array(repeating: false, count: 3)

然后修订DisclosureGroup拓宽折叠视图isExpanded绑定为依据点击的项目的索引进行翻开和收起。

这样咱们就完成了运用DisclosureGroup拓宽折叠视图构建一个FAQ页面。

SwiftUI极简教程27:DisclosureGroup拓展折叠视图的使用

完整代码

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()
}
}
}
}

快来动手试试吧!

假如本专栏对你有协助,无妨点赞、评论、关注~