🥄

SwiftUIでNavigationBarへ埋没するScrollViewをSwiftUIXで発掘

2022/03/27に公開

まず症状のGIFをご覧ください。

このように、遷移した際に埋もれる場合があります。
再現コードは次のようになります。

import UIKit
import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            NavigationLink(destination: SubView()) {
                Text("PUSH")
            }
        }
        .navigationTitle("ContentView")
    }
}

struct SubView: View {
    var body: some View {
        ScrollView([.horizontal, .vertical], showsIndicators: false, content: {
            VStack(alignment: .leading) {
                ForEach((1...100), id: \.self) { num in
                    Text("\(num)")
                }
            }
        })
        .navigationTitle("SubView")
    }
}

ここで .horizontal を消せばこのような見た目になります。

先程とナビゲーションバーが違うので [.horizontal, .vertical] の場合に
navigationBarTitleDisplayMode の制御で、しくっているような印象を感じます。

.horizontal が消せないケースもあると思いますので
ここで SwiftUIX の CocoaScrollView を使ってみることにします。

import Swift
import SwiftUI
import SwiftUIX
import Highlightr

struct SubView: View {
    var body: some View {
        CocoaScrollView([.horizontal, .vertical], showsIndicators: false, content: {
            VStack(alignment: .leading) {
                ForEach((1...100), id: \.self) { num in
                    Text("\(num)")
                }
            }
        })
        .navigationTitle("SubView")
    }
}

struct SubView_Previews: PreviewProvider {
    static var previews: some View {
        SubView()
    }
}

このように埋もれる症状を回避することが出来ます。

Xcode Version 13.3 (13E113) にて執筆

Discussion