12
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

【SwiftUI】ScrollViewの高さを動的に変更する方法

Last updated at Posted at 2023-10-12

はじめに

記事をお読み頂きありがとうございます!Reeenと申します。
私は現在、株式会社ゆめみで内定者アルバイトとしてiOSアプリの開発を行っています。
そこでScrollViewの縦方向の無限拡張で少し詰まり、この方法を発見したのでアウトプットをしようと思いました。
少しでも参考になれば幸いです🙇‍♂️

動作環境

Swift: 5.7.2
Xcode: 14.2
iOS: 15.0+

内容

まず前提としてSwiftUIのScrollViewでは以下のようなコードを書いても内容に合わせて自動で高さが調節されることはなく、無限拡張(.infinityのような挙動)になってしまいます。

ScrollView {
    Rectangle()
        .fill(.purple)
        .frame(width: 300, height: 300)
}
.border(.black, width: 5)

そこで、以下のコードを追加します。

@State private var contentHeight: CGFloat = 0.0
.overlay(
    GeometryReader { proxy in
        Color.clear.onAppear {
            contentHeight = proxy.size.height
        }
    }
)
.frame(maxHeight: contentHeight)

その結果、下記写真のようにScrollViewのサイズが自動で調整されました。

(紫色の部分がスクロールできます)

コードの全体

HogeView.swift
struct HogeView: View {
    @State private var contentHeight: CGFloat = 0.0

    var body: some View {
        ScrollView {
            Rectangle() //ここにScroll可能にしたいViewを設置してください
                .fill(.purple)
                .frame(width: 300, height: 300)
                .overlay(
                    GeometryReader { proxy in
                        Color.clear.onAppear {
                            contentHeight = proxy.size.height
                        }
                    }
                )
        }
        .border(.black, width: 5)
        .frame(maxHeight: contentHeight)
    }
}

struct HogeView_Previews: PreviewProvider {
    static var previews: some View {
        HogeView()
    }
}

最後に

ここまでお読み頂きありがとうございました!
もっと良い方法があれば教えてください!
SwiftUI頑張ります😁

参考文献

12
6
3

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
12
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?