開発
タグ SwiftUI List NavigationLink
SwiftUIでListの中でNavigationLinkを複数使うとうまく動かなかったのでメモです。
UIKit
だと、UITableView
を使って1つのセルの中で複数のタップエリアを作って別々の画面に遷移させたいことがあると思います。
UITableViewCell
のaccessoryView
とかがまさにそんな感じの使い方かと思います。
SwiftUI
でこれをしようとするとUITableView
の代わりにList
を使って、遷移はNavigationLink
で行います。しかし、List
の中に複数のNavigationLink
をいれてしまうと、遷移の挙動がおかしくなります。
例えば以下のようなView
を作ると添付gifのような挙動になります。
struct ContentView: View {
let data = [
"Mavericks",
"Yosemite",
"El Capitan",
"Sierra",
"High Sierra",
"Mojave",
"Catalina"
]
var body: some View {
NavigationView {
List(data, id: \.self) { data in
VStack {
NavigationLink(destination: Text(data)) {
Text(data)
}
NavigationLink(destination: Text("Second navigation")) {
Text("additional navigation")
}
}
}
}
}
}
NavigationLink
を2つVStack
で配置していても、タップエリアは全体で、遷移したあと戻ると自動で遷移されてしまいます。
この挙動を回避するには、今のところわたしが見つけた方法としては、List
の代わりにScrollView
を使うということです。
List
がデフォルトで提供してくれるスタイルは適用されなくなってしまいますが、ScrollView
を使うと実現できます。
struct ContentView: View {
let data = [
"Mavericks",
"Yosemite",
"El Capitan",
"Sierra",
"High Sierra",
"Mojave",
"Catalina"
]
var body: some View {
NavigationView {
ScrollView(.vertical, showsIndicators: true) {
ForEach(data, id: \.self) { data in
VStack {
NavigationLink(destination: Text(data)) {
Text(data)
}
NavigationLink(destination: Text("Second navigation")) {
Text("additional navigation")
}
Divider()
}
}
}
}
}
}
オススメ記事
-
2021/2/17開発
brew upgradeで Your CLT does not support macOS 11というエラーがでた
-
2020/12/1開発
Apple Silicon搭載 MacBook Pro M1で Homebrewとrbenvをインストールする
先日購入したApple Silicon搭載 MacBook Pro M1にこのブログをビルドするためにHomebrewとrbenvをインストールしたのでメモ。
-
2020/11/27開発
Apple Silicon搭載のMacBook Pro M1が危うく文鎮化するところだったので記録
Apple Silicon搭載のMacBook Pro 13インチを仕事用に購入したのですが、クリーンインストールしたところ文鎮化しかけたので記録しておきます。
-
2020/6/23開発
Platform State of the Unionまとめ
Platform State of the Unioまとめ
-
2020/6/23開発
WWDC2020キーノートまとめ
WWDC2020 キーノートまとめ
-
2020/5/31開発
GitHub Pagesで無料ブログを作成する - Part4 自分のオリジナルのテーマを作る
Jekyllでは既存のテーマを使うこともできるのですが、さらに一歩踏み込んで、自分で既存のテーマをカスタマイズしたり、テーマを作ることもできます。
-
2020/5/28開発
GitHub Pagesで無料ブログを作成する - Part3 Jekyllの設定をカスタマイズする
前回の記事では、Jekyllのテーマを利用する方法と記事を追加する方法を紹介しました。今回はさらにJekyllをカスタマイズしていきますが、確認を簡単にするためにまずJekyllをローカル環境で実行する方法を紹介します。
-
2020/5/26開発
GitHub Pagesで無料ブログを作成する - Part2 Jekyllを使ってみる
JekyllはGitHub Pagesで使用することができる静的サイトのジェネレータです。Jekyllを使うことで、Markdownで書いたブログの記事やhtmlで作ったページをビルドして、公開用のhtmlとして生成することができます。
-
2020/5/24開発
GitHub Pagesで無料ブログを作成する - Part1 GitHubにリポジトリを作ってサイトを公開する
以前、GitHub Pagesでブログを運用し始めてから4年くらいたったというブログを書いたのですが、概要を書いただけで具体的な構築方法はあまり記述していなかったので、何回かに分けてブログを作っていく方法を書いていきたいと思います。
-
2020/1/3開発
FirebaseでCloud Storageに画像をアップロードする
今FirebaseとReactでアプリを開発中で、画像をアップロードする部分を作ったのでメモ。
MasamichiUeta
ソフトウェアエンジニアです。ソフトウェアエンジニアリング、アプリ開発、趣味などについて書いてます