如何将LazyVGrid列对齐到顶部?TabView分页后仍保持顶部对齐
解决TabView中LazyVGrid顶部对齐问题
问题根源在于TabView的.page样式默认会将子视图垂直居中,要让LazyVGrid元素始终保持顶部对齐,只需给每个LazyVGrid添加frame(maxHeight: .infinity, alignment: .top)修饰符,强制它占满垂直空间并顶对齐:
修改后的代码:
TabView { ForEach(Array(rm.recipes.chunked(into: 4)), id: \.self) { recipesChunk in LazyVGrid(columns: columns) { ForEach(recipesChunk, id: \.id) { recipe in Text("Test") } } // 添加该行,让LazyVGrid顶对齐并占满垂直空间 .frame(maxHeight: .infinity, alignment: .top) } } .tabViewStyle(.page) .gesture( DragGesture() .onEnded { value in if value.translation.width < 0 { self.currentPage = min(self.currentPage + 1, rm.recipes.count / 4) } else if value.translation.width > 0 { self.currentPage = max(self.currentPage - 1, 0) } } )
原理:TabView的Page样式会自动将子视图居中布局,通过frame(maxHeight: .infinity)让LazyVGrid的容器占满TabView的垂直可用空间,再设置alignment: .top,就能让网格元素始终贴在顶部,切换页面时也能保持这个对齐方式。
内容的提问来源于stack exchange,提问作者Swink
相关产品推荐
相关产品推荐

