iOS15にてLazyVGrid子要素の高さが揃わない問題と対策
12732 ワード
iOS14.5では、LazyVGridの子要素は高さが揃いますが
iOS15からは、おそらくバグで高さが揃わなくなっています。
StackOverflowにも同様の報告上がっています。
LazyVGridで解決するのは難しい可能性が高いので
今回はHStackを利用しました。
import SwiftUI
struct MaximumHeightPreferenceKey: PreferenceKey {
static var defaultValue: CGFloat = 0
static func reduce(value: inout CGFloat, nextValue: () -> CGFloat) {
value = max(value, nextValue())
}
}
struct DetermineHeight: View {
typealias Key = MaximumHeightPreferenceKey
var body: some View {
GeometryReader { proxy in
Color.clear
.anchorPreference(key: Key.self, value: .bounds) { anchor in
proxy[anchor].size.height
}
}
}
}
struct ContentView: View {
@State var maximumSubViewHeight: CGFloat = 0
let columns: [GridItem] = Array(repeating: .init(.flexible()), count: 2)
var body: some View {
HStack {
Group {
Text("Hello")
.border(.red)
.overlay(DetermineHeight())
}
.frame(minHeight: maximumSubViewHeight, alignment: .bottom)
Group {
Text("Lorem\nipsum")
.border(.blue)
.overlay(DetermineHeight())
}
.frame(minHeight: maximumSubViewHeight, alignment: .bottom)
}
.border(.green)
.padding(.horizontal, 100)
.onPreferenceChange(DetermineHeight.Key.self) {
maximumSubViewHeight = $0
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
※ このコードは大部分をWooji Juice社様の記事を参考にさせて頂いております。
PreferenceKeyやminHeightを利用して上手く問題に対処しているように見えます。
そして、このようにiOS14.5でもiOS15でも動作します。
ただ、HStackだとLazyVGridのように多数のデータを列に並べるなどを満たしません。
ここはLazyVGridに渡す配列の代わりに、配列を2つづchunk化して
HStackに例えば2個づつ渡すような実装で対応を行いました。
// コードのイメージ
ForEach(items.chunked(by: 2), id: \.id) { chunk in
GirdPartView(chunk)
}
chunked実装は、このようなイメージなります。
Author And Source
この問題について(iOS15にてLazyVGrid子要素の高さが揃わない問題と対策), 我々は、より多くの情報をここで見つけました https://zenn.dev/yoneapp/articles/02ed083e459c8e著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Collection and Share based on the CC protocol