【发布时间】：2020-08-19 12:52:49
【问题描述】：
我对滚动视图和 GeometryReader 有一些问题。我想在图像下有一个项目列表。每个项目应具有以下宽度和高度：((width of the entire screen - leading padding - trailing padding) / 2)。
我为我的用例尝试了两种方法。这是我第一个的代码结构：
方法#1
ScrollView
- VStack
- Image
- GeometryReader
- ForEach
- Text
我正在使用几何阅读器来获取 VStack 的宽度，因为它有一个填充，我不想拥有滚动视图的整个宽度。
但是使用 GeometryReader，只有 ForEach 循环中的最后一项会显示在 UI 上。 GeometryReader 只有很小的高度。见截图。
代码：
import SwiftUI
struct Item: Identifiable {
var id = UUID().uuidString
var value: String
}
struct ContentView: View {
func items() -> [Item] {
var items = [Item]()
for i in 0..<100 {
items.append(Item(value: "Item #\(i)"))
}
return items
}
var body: some View {
ScrollView {
VStack {
Image(systemName: "circle.fill")
.resizable()
.scaledToFill()
.frame(width: 150, height: 150)
.padding()
.foregroundColor(.green)
GeometryReader { geometry in
ForEach(self.items()) { item in
Text(item.value)
.frame(width: geometry.size.width / CGFloat(2), height: geometry.size.width / CGFloat(2))
.background(Color.red)
}
}
.background(Color.blue)
}
.frame(maxWidth: .infinity)
.padding()
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
红色是 ForEach 循环中的项目。将 GeometryReader 变为蓝色，将图像变为绿色。
方法#2
ScrollView
-GeometryReader
- VStack
- Image
- ForEach
-Text
然后我的 ForEach 循环中的项目正确呈现，但无法再滚动。
代码
import SwiftUI
struct Item: Identifiable {
var id = UUID().uuidString
var value: String
}
struct ContentView: View {
func items() -> [Item] {
var items = [Item]()
for i in 0..<100 {
items.append(Item(value: "Item #\(i)"))
}
return items
}
var body: some View {
ScrollView {
GeometryReader { geometry in
VStack {
Image(systemName: "circle.fill")
.resizable()
.scaledToFill()
.frame(width: 150, height: 150)
.padding()
.foregroundColor(.green)
ForEach(self.items()) { item in
Text(item.value)
.frame(width: geometry.size.width / CGFloat(2), height: geometry.size.width / CGFloat(2))
.background(Color.red)
}
}
.frame(maxWidth: .infinity)
}
.padding()
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
如何归档以正确显示 UI。我在这里遗漏了什么吗？
我真的很感激一些帮助。
谢谢你。
编辑
我找到了一种解决方法，可以使用正常工作的 scrollView 正确呈现 UI，但对我来说这看起来很 hacky。
我正在为此解决方法使用 PreferenceKey。
我在滚动视图中使用几何读取器，高度为 0。只是为了获得我的 VStack 的宽度。
在 preferenceKeyChange 上，我正在更新一个状态变量，并将它用于我的项目来设置它的宽度和高度。
import SwiftUI
struct Item: Identifiable {
var id = UUID().uuidString
var value: String
}
struct ContentView: View {
@State var width: CGFloat = 0
func items() -> [Item] {
var items = [Item]()
for i in 0..<100 {
items.append(Item(value: "Item #\(i)"))
}
return items
}
struct WidthPreferenceKey: PreferenceKey {
typealias Value = [CGFloat]
static var defaultValue: [CGFloat] = [0]
static func reduce(value: inout [CGFloat], nextValue: () -> [CGFloat]) {
value.append(contentsOf: nextValue())
}
}
var body: some View {
ScrollView {
VStack(spacing: 0) {
Image(systemName: "circle.fill")
.resizable()
.scaledToFill()
.frame(width: 150, height: 150)
.padding()
.foregroundColor(.green)
GeometryReader { geometry in
VStack {
EmptyView()
}.preference(key: WidthPreferenceKey.self, value: [geometry.size.width])
}
.frame(height: 0)
ForEach(self.items()) { item in
Text(item.value)
.frame(width: self.width / CGFloat(2), height: self.width / CGFloat(2))
.background(Color.red)
}
}
.padding()
}
.onPreferenceChange(WidthPreferenceKey.self) { value in
self.width = value[0]
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
这是唯一的方法吗，还是有更优雅、更简单的方法？
【问题讨论】：
标签： ios swift swiftui scrollview geometryreader