アコーディオン表示
はじめに
アコーディオン表示が必要なケースに遭遇したのでSwiftUIでアコーディオン表示の実現方法を調べてみました。
挙動
コード
注意点として親と子の構造体を一致させておく必要があるようです。
struct Item: Identifiable {
let id = UUID()
let name: String
var row: [Item]? = nil // 親とおなじTypeを指定する必要があるのでoptional
}
private let categoryList: [Item] = [
Item(name: "やさい", row: [
.init(name: "🥕"),
.init(name: "🍆"),
.init(name: "🥔"),
.init(name: "🍅"),
.init(name: "🧅")
]),
Item(name: "にく", row: [
.init(name: "🐓"),
.init(name: "🐖"),
.init(name: "🐄")
])
]
struct ContentView: View {
var body: some View {
List(categoryList, children: \.row) { item in
Text(item.name)
.padding()
}
.listStyle(.plain)
}
}
tips
調べてみた感じ矢印ボタンなどの切り替えができなさそうだったので見た目をカスタムしたい場合は自作するしかなさそうです。
表示の切り替えを@Stateで管理して切り替える時にwithAnimationをつけただけでいい感じにアニメーションしてくれました
