SwiftUI:ScrollViewが画面の高さを超えた場合にのみスクロール可能にします

ravelinx

現在、私はこのような見方をしています。

struct StatsView: View {
    var body: some View {
        ScrollView {
            Text("Test1")
            Text("Test2")
            Text("Test3")
        }
    }
}

これにより、スクロールビュー内に3つのテキストを含むビューがレンダリングされます。画面内でこれらのテキストのいずれかをドラッグすると、これらの3つのテキストが画面に収まり、残りのスペースがある場合でも、ビューが移動してスクロール可能になります。私が達成したいのは、コンテンツが画面の高さのサイズを超えている場合にのみScrollViewをスクロール可能にすることです。そうでない場合は、ビューを静的にし、移動しないようにします。GeometryReaderを使用して、スクロールビューフレームを画面の幅と高さに設定してみました。これもコンテンツで同じですが、引き続き同じ動作をします。また、運がなくてもminHeight、maxHeightを設定してみました。

どうすればこれを達成できますか?

彼の気性

これが解決策です(Xcode 11.4 / iOS 13.4でテスト済み)

struct StatsView: View {
    @State private var fitInScreen = false
    var body: some View {
        GeometryReader { gp in
            ScrollView {
                VStack {          // container to calculate total height
                    Text("Test1")
                    Text("Test2")
                    Text("Test3")
                    //ForEach(0..<50) { _ in Text("Test") } // uncomment for test
                }
                .background(GeometryReader {
                    // calculate height by consumed background and store in 
                    // view preference
                    Color.clear.preference(key: ViewHeightKey.self,
                        value: $0.frame(in: .local).size.height) })
            }
            .onPreferenceChange(ViewHeightKey.self) {
                 self.fitInScreen = $0 < gp.size.height    // << here !!
            }
            .disabled(self.fitInScreen)
        }
    }
}

注: ViewHeightKey設定キーはこの私のソリューションから取得されます

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

指の動きが画面の20%を超える場合にのみスクロールします

分類Dev

CSSの「コンテンツフッター」は、コンテンツがスクロールの高さを超えない場合は下部に固定されますが、超えた場合はコンテンツとともに流れます

分類Dev

ビューポートの高さを超えた場合にのみ、固定要素のコンテンツをスクロール可能にするにはどうすればよいですか?

分類Dev

高さがブラウザを超える場合にスクロールするようにBootstrapモーダルコンテンツを設定します

分類Dev

下にスクロールする場合にのみ、<div>を高さに固定します

分類Dev

JQuery Mobile Panelウィジェット–折りたたみ可能なリストを開くと、ページの高さを超えて展開されると、ページdivの下部にジャンプスクロールします。どうして?

分類Dev

divのスクロールバーは、30を超えるアイテムがある場合にのみ表示されます。

分類Dev

画面の高さを満たすのに十分なアイテムがない場合にRecyclerViewを強制的にスクロールさせる方法

分類Dev

SwiftUI:ScrollView内でスクロールする場合、ボタンの選択を無効にします

分類Dev

ターミナル:最後の行が画面の中央に表示されるように、行の終わりを超えてスクロールします

分類Dev

スクロールバーなしで利用可能な画面にグリッドの高さを調整します

分類Dev

親の高さを超えたときに子のdivをスクロール可能にするにはどうすればよいですか?

分類Dev

コンテンツの高さが画面の高さよりも低い場合は、ScrollViewの下部にビューを強制します

分類Dev

セクションが画面の高さよりも高い場合に「スクロール」を一時的に無効にする方法

分類Dev

Android ViewPager:前のアイテムが90%にスクロールされた場合にのみ、次のアイテムにスクロールします

分類Dev

画面サイズが1024pxを超える場合にのみJSを実行しますか?

分類Dev

高さがを超える場合を除いて、divを他のdivの下に配置します

分類Dev

ScrollViewには、曖昧なスクロール可能なコンテンツの高さがあります

分類Dev

jQuery-長さが5を超える場合にのみ、最後の2つの要素にクラスを追加します

分類Dev

jQueryを使用したiPadでのスクロールの検出は、スクロールが停止した場合にのみ機能します

分類Dev

APIゲートウェイ-数値フィールドが特定の値を超えている場合にのみパススルーを許可します

分類Dev

他のクラスがスクロールの高さに存在する場合は、クラスを削除します

分類Dev

スクロール後にキャンバスが表示された場合にのみ、アニメーションを開始します(AnimateCC)。

分類Dev

divの挿入中にスクロール位置を保持しますが、ユーザーがスクロールした場合のみ

分類Dev

SwiftUI ScrollViewは、コンテンツがスクロールビューの境界に収まる場合、コンテンツを中央に配置しません

分類Dev

プロセスの数を数え、特定の制限を超えた場合は複数の人にメールを送信します

分類Dev

行数が指定された値を超える場合、次のページを自動的に追加します

分類Dev

ansible-ロール内のタスクが変更された場合にのみハンドラーを実行します

分類Dev

SeabornHeatmap-値が指定されたしきい値を超えている場合にのみヒートマップを表示します

Related 関連記事

  1. 1

    指の動きが画面の20%を超える場合にのみスクロールします

  2. 2

    CSSの「コンテンツフッター」は、コンテンツがスクロールの高さを超えない場合は下部に固定されますが、超えた場合はコンテンツとともに流れます

  3. 3

    ビューポートの高さを超えた場合にのみ、固定要素のコンテンツをスクロール可能にするにはどうすればよいですか?

  4. 4

    高さがブラウザを超える場合にスクロールするようにBootstrapモーダルコンテンツを設定します

  5. 5

    下にスクロールする場合にのみ、<div>を高さに固定します

  6. 6

    JQuery Mobile Panelウィジェット–折りたたみ可能なリストを開くと、ページの高さを超えて展開されると、ページdivの下部にジャンプスクロールします。どうして?

  7. 7

    divのスクロールバーは、30を超えるアイテムがある場合にのみ表示されます。

  8. 8

    画面の高さを満たすのに十分なアイテムがない場合にRecyclerViewを強制的にスクロールさせる方法

  9. 9

    SwiftUI:ScrollView内でスクロールする場合、ボタンの選択を無効にします

  10. 10

    ターミナル:最後の行が画面の中央に表示されるように、行の終わりを超えてスクロールします

  11. 11

    スクロールバーなしで利用可能な画面にグリッドの高さを調整します

  12. 12

    親の高さを超えたときに子のdivをスクロール可能にするにはどうすればよいですか?

  13. 13

    コンテンツの高さが画面の高さよりも低い場合は、ScrollViewの下部にビューを強制します

  14. 14

    セクションが画面の高さよりも高い場合に「スクロール」を一時的に無効にする方法

  15. 15

    Android ViewPager:前のアイテムが90%にスクロールされた場合にのみ、次のアイテムにスクロールします

  16. 16

    画面サイズが1024pxを超える場合にのみJSを実行しますか?

  17. 17

    高さがを超える場合を除いて、divを他のdivの下に配置します

  18. 18

    ScrollViewには、曖昧なスクロール可能なコンテンツの高さがあります

  19. 19

    jQuery-長さが5を超える場合にのみ、最後の2つの要素にクラスを追加します

  20. 20

    jQueryを使用したiPadでのスクロールの検出は、スクロールが停止した場合にのみ機能します

  21. 21

    APIゲートウェイ-数値フィールドが特定の値を超えている場合にのみパススルーを許可します

  22. 22

    他のクラスがスクロールの高さに存在する場合は、クラスを削除します

  23. 23

    スクロール後にキャンバスが表示された場合にのみ、アニメーションを開始します(AnimateCC)。

  24. 24

    divの挿入中にスクロール位置を保持しますが、ユーザーがスクロールした場合のみ

  25. 25

    SwiftUI ScrollViewは、コンテンツがスクロールビューの境界に収まる場合、コンテンツを中央に配置しません

  26. 26

    プロセスの数を数え、特定の制限を超えた場合は複数の人にメールを送信します

  27. 27

    行数が指定された値を超える場合、次のページを自動的に追加します

  28. 28

    ansible-ロール内のタスクが変更された場合にのみハンドラーを実行します

  29. 29

    SeabornHeatmap-値が指定されたしきい値を超えている場合にのみヒートマップを表示します

ホットタグ

アーカイブ