はじめに
記事をお読み頂きありがとうございます!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頑張ります😁
参考文献