ios - 使用两个轴时如何将 ScrollView 内容对齐到顶部?
问题描述
这是一个简单的例子:
struct Example: View {
var body: some View {
ScrollView([.horizontal, .vertical], showsIndicators: false, content: {
LazyVStack(content: {
ForEach(1...10, id: \.self) { count in
Text("Item \(count)")
}
})
})
}
}
问题是,当使用两个轴 ( [.horizontal, .vertical]
) 时,会ScrollView
自动将任何内容垂直和水平居中。我在 中有一个大数据表ScrollView
,我需要将它与顶部对齐,但我不知道该怎么做。通常带有Vstack
s 和Spacer
s 的东西在这里根本不起作用。
解决方案
我做了一个例子,用 aSlider
这样你就可以交互式地测试它。
这是通过确保其中的内容ScrollView
至少与自身一样高来实现的ScrollView
。这导致内容填充整个垂直空间,因此它将从顶部开始。
代码:
struct Example: View {
@State private var count: Double = 10
var body: some View {
VStack {
GeometryReader { geo in
ScrollView([.horizontal, .vertical], showsIndicators: false, content: {
VStack(spacing: 0) {
LazyVStack {
ForEach(1 ... Int(count), id: \.self) { count in
Text("Item \(count)")
}
}
Spacer(minLength: 0)
}
.frame(width: geo.size.width)
.frame(minHeight: geo.size.height)
})
}
Slider(value: $count, in: 10 ... 100)
}
}
}
在某些情况下,您可能需要使用.frame(minWidth: geo.size.width)
而不仅仅是width
. 这可以与minHeight
.
推荐阅读
- image - 发送图像作为响应停止工作
- python - 无法绘制 MNIST 数字
- java - 如何使用 java.Time 以某种格式打印时间戳
- android - 如何在 MVP 中实现可重用的多步状态机?
- javascript - 是否有可能使用 map() 使用特定元素将数组重写为新数组
- javascript - 如何使黄瓜测试步骤仅在 Chrome 上运行半步,其余步骤在不同浏览器上运行?
- json - HTML 客户端表单验证,似乎无法在使用 JSON 的 React 应用程序中工作
- git - GitHub - 在本地提取现有项目并替换现有文件而不删除不存在的文件
- python - 如何在 Travis 中使用 Python (PyTest) 测试我的 C 程序?
- react-native - 当应用程序被杀死或应用程序未运行时无法获取推送通知数据