英文:
SwiftUI LazyVGrid with scroll view issue
问题
以下是您要翻译的内容：
"Bottom Text" 这段文本旨在占据底部的一些空间。但是，在使用 LazyVGrid 与滚动视图时，内容最终被渲染在底部文本之后，可滚动区域似乎延伸到屏幕之外。
如何解决这个问题？
预期结果
实际结果
struct HFlexibleView<Content: View>: View {
let triggerWidth: CGFloat
let content: () -> Content
///如果设置为true，视图将正常渲染，而不是灵活排列
var disabled: Bool
var maximumWidth: CGFloat
var columns: [GridItem] {
[GridItem(.adaptive(minimum: triggerWidth,
maximum: maximumWidth))]
}
init(triggerWidth: CGFloat,
maximumWidth: CGFloat = .infinity,
disabled: Bool = false,
@ViewBuilder content: @escaping () -> Content) {
self.triggerWidth = triggerWidth
self.maximumWidth = maximumWidth
self.disabled = disabled
self.content = content
}
var body: some View {
if disabled {
content()
} else {
GeometryReader { geometry in
LazyVGrid(columns: columns) {
content()
.frame(maxWidth: .infinity)
}
}
}
}
}
struct FlexibleView_Previews: PreviewProvider {
static var previews: some View {
VStack {
HFlexibleView(triggerWidth: 500) {
ScrollView {
ForEach(0...20, id: \.self) {_ in
Image(systemName: "keyboard")
.font(.system(size: 30))
.frame(minWidth: 0, maxWidth: .infinity, minHeight: 50)
.background(Color.green)
.cornerRadius(10)
}
}
}
Text("Bottom Text")
}
}
}
英文:
The text "Bottom Text" is intended to occupy some space at the bottom. However, when using a LazyVGrid with a scroll view, the content ends up being rendered behind the bottom text, and the scrollable area appears to stretch beyond the screen.
How can this issue be resolved?
Expected
Actual
struct HFlexibleView<Content: View>: View {
let triggerWidth: CGFloat
let content: () -> Content
///If this is set true, the view will be rendered normally, insead of being arranged flexibly
var disabled: Bool
var maxmumWidth: CGFloat
var columns: [GridItem] {
[GridItem(.adaptive(minimum: triggerWidth,
maximum: maxmumWidth))]
}
init(triggerWidth: CGFloat,
maxmumWidth: CGFloat = .infinity,
disabled: Bool = false,
@ViewBuilder content: @escaping () -> Content) {
self.triggerWidth = triggerWidth
self.maxmumWidth = maxmumWidth
self.disabled = disabled
self.content = content
}
var body: some View {
if disabled {
content()
} else {
GeometryReader { geometry in
LazyVGrid(columns: columns) {
content()
.frame(maxWidth: .infinity)
}
}
}
}
}
struct FlexbibleView_Previews: PreviewProvider {
static var previews: some View {
VStack {
HFlexibleView(triggerWidth: 500) {
ScrollView {
ForEach(0...20, id: \.self) {_ in
Image(systemName: "keyboard")
.font(.system(size: 30))
.frame(minWidth: 0, maxWidth: .infinity, minHeight: 50)
.background(Color.green)
.cornerRadius(10)
}
}
}
Text("Bottom Text")
}
}
}
答案1
得分: 1
LazyVGrid 的文档称：一个容器视图，将其子视图按网格排列，垂直增长，仅在需要时创建项目。
因此，您可以使用特定的大小来限制 content（即 ScrollView），例如：
GeometryReader { geometry in
LazyVGrid(columns: columns) {
content()
.frame(maxWidth: .infinity, maxHeight: geometry.size.height)
}
}
英文:
The docs for LazyVGrid says: A container view that arranges its child views in a grid that grows vertically, creating items only as needed.
So you could use a specific size to constrain the content (i.e the ScrollView), such as:
GeometryReader { geometry in
LazyVGrid(columns: columns) {
content()
.frame(maxWidth: .infinity, maxHeight: geometry.size.height)
}
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论