SmallDeskSoftware 
Sponsor Link
環境＆対象
- macOS Ventura 13
- Xcode 14.1 beta 3
- iOS 16.0
scrollDisabled
ViewModifier の １です。
Apple の説明では、”Scroll 可能なビューのスクロールを制御します”と書かれています。
Apple のドキュメントは、こちら。
func scrollDisabled(_ disabled: Bool) -> some View引数に、Bool を指定できて、scroll 無効を 有効にするかどうかを選択できます。
SwiftUI の API によくあるのですが、XXDisabled は、true 指定すると disable(無効) になります。
２重否定なので、すこし意味が分かりにくくなってしまってます。
コード例を見ると、ScrollView だけに有効なように見えますが、List にも有効なので、List の例と合わせて説明します。
List の scroll
List は、多くの要素を表示することができ、要素数が 表示領域より多いときには、自動でスクロールできるようになる View です。
非常に便利な設計だと思いますが、問題となるケースもあります。
List の表示領域が 要素数を十分表示できるサイズであるときも、スクロール できる余地を示す scroll bounce が行われます。
表示要素が増減しないケースでは、上下にスクロールできるようになることはないため、この scroll bounce を止めたい時があります。
scrollDisabled は、List にも有効で、このような scroll bounce を止めるために使うことができます。
List に scrollDisabled を適用する
List に scrollDisabled を適用していきます。
scrollDisable なしの実装
普通に(?)、NavigationSplitView を使って、 Sidebar にリスト表示すると以下のような動作になります。
リストの内容は、固定なのですが、scroll bounce の動作が起きてしまいます。
使ったコードは、以下です。
//
// ContentView.swift
//
// Created by : Tomoaki Yagishita on 2022/10/27
// © 2022 SmallDeskSoftware
//
import SwiftUI
struct ContentView: View {
let elements: [(String, String)] = [
("World", "globe.desk"),
("Pencil", "pencil"),
("Tray", "tray"),
("Drive", "externaldrive"),
("Box", "archivebox"),
("Paper", "doc"),
]
var body: some View {
NavigationSplitView(sidebar: {
List {
ForEach(elements, id: \.0.self) { item in
Label(title: {Text(item.0)},
icon: {Image(systemName: item.1)})
}
}
}, detail: {
Text("Content")
})
.padding()
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}scrollDisable を付与
先ほどの List に、.scrollDisabled を付与すると、以下のような動作になります。
使用したコードは以下です。.scrollDisabled を追加しただけです。
//
// ContentView.swift
//
// Created by : Tomoaki Yagishita on 2022/10/27
// © 2022 SmallDeskSoftware
//
import SwiftUI
struct ContentView: View {
let elements: [(String, String)] = [
("World", "globe.desk"),
("Pencil", "pencil"),
("Tray", "tray"),
("Drive", "externaldrive"),
("Box", "archivebox"),
("Paper", "doc"),
]
var body: some View {
NavigationSplitView(sidebar: {
List {
ForEach(elements, id: \.0.self) { item in
Label(title: {Text(item.0)},
icon: {Image(systemName: item.1)})
}
}
.scrollDisabled(true) // -- Add !
}, detail: {
Text("Content")
})
.padding()
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}まとめ
scrollDisabled を使うと スクロールの可否を制御でき、List にも適用できる。
- scrollDisabled を使うと、スクロール可否の制御ができる
- scrollDisabled は、ScrollView だけでなく List にも適用できる
説明は以上です。
不明な点やおかしな点ありましたら、こちらまで。
SwiftUI おすすめ本
SwiftUI を理解するには、以下の本がおすすめです。
SwiftUI ViewMatery
SwiftUI で開発していくときに、ViewやLayoutのための適切なmodifierを探すのが大変です。
英語での説明になってしまいますが、以下の”SwiftUI Views Mastery Bundle”という本がビジュアル的に確認して探せるので、便利です。
英語ではありますが、１ページに コードと画面が並んでいるので、非常にわかりやすいです。
View に適用できる modifier もわかりやすく説明されているので、ビューの理解だけではなく、どのような装飾ができるかも簡単にわかります。
超便利です
販売元のページは、こちらです。
SwiftUI 徹底入門
＃ SwiftUI は、毎年大きく改善されていますので、少し古くなってしまいましたが、いまでも 定番本です。
Swift学習におすすめの本
詳解Swift
Swift の学習には、詳解 Swift という書籍が、おすすめです。
著者は、Swift の初期から書籍を出していますし、Swift の前に主力言語だった Objective-C という言語についても同様の書籍を出しています。
最新版を購入するのがおすすめです。
現時点では、上記の Swift 5 に対応した第５版が最新版です。
関連記事:
Sponsor Link
