我正在尝试使用 SwiftUI 重新创建基本的集合视图行为：
我有许多水平显示的视图（例如照片）。当没有足够的空间在同一行显示所有照片时，剩余的照片应换行到下一行。
这是一个例子：
看起来可以使用VStack具有多个元素的HStack元素，每个元素包含一行的照片。
我尝试使用GeometryReader和迭代照片视图以动态创建这样的布局，但它不会编译（包含声明的闭包不能与函数构建器 'ViewBuilder' 一起使用）。是否可以动态创建视图并返回它们？
澄清：
盒子/照片可以有不同的宽度（不像经典的“网格”）。棘手的部分是我必须知道当前框的宽度，以便确定它是否适合当前行，是否必须开始新行。
这是我使用PreferenceKeys.
public struct MultilineHStack: View {
struct SizePreferenceKey: PreferenceKey {
typealias Value = [CGSize]
static var defaultValue: Value = []
static func reduce(value: inout Value, nextValue: () -> Value) {
value.append(contentsOf: nextValue())
}
}
private let items: [AnyView]
@State private var sizes: [CGSize] = []
public init<Data: RandomAccessCollection, Content: View>(_ data: Data, @ViewBuilder content: (Data.Element) -> Content) {
self.items = data.map { AnyView(content($0)) }
}
public var body: some View {
GeometryReader {geometry in
ZStack(alignment: .topLeading) {
ForEach(0..<self.items.count) { index in
self.items[index].background(self.backgroundView()).offset(self.getOffset(at: index, geometry: geometry))
}
}
}.onPreferenceChange(SizePreferenceKey.self) {
self.sizes = $0
}
}
private func getOffset(at index: Int, geometry: GeometryProxy) -> CGSize {
guard index < sizes.endIndex else {return .zero}
let frame = sizes[index]
var (x,y,maxHeight) = sizes[..<index].reduce((CGFloat.zero,CGFloat.zero,CGFloat.zero)) {
var (x,y,maxHeight) = $0
x += $1.width
if x > geometry.size.width {
x = $1.width
y += maxHeight
maxHeight = 0
}
maxHeight = max(maxHeight, $1.height)
return (x,y,maxHeight)
}
if x + frame.width > geometry.size.width {
x = 0
y += maxHeight
}
return .init(width: x, height: y)
}
private func backgroundView() -> some View {
GeometryReader { geometry in
Rectangle()
.fill(Color.clear)
.preference(
key: SizePreferenceKey.self,
value: [geometry.frame(in: CoordinateSpace.global).size]
)
}
}
}
你可以像这样使用它：
struct ContentView: View {
let texts = ["a","lot","of","texts"]
var body: some View {
MultilineHStack(self.texts) {
Text($0)
}
}
}
它不仅适用于Text，而且适用于任何视图。
我通过使用 .position 修饰符使用 GeometryReader 和 ZStack 管理了一些东西。我正在使用 hack 方法使用 UIFont 获取字符串宽度，但是当您处理图像时，宽度应该更容易访问。
下面的视图具有垂直和水平对齐的状态变量，让您从 ZStack 的任何角落开始。可能会增加过度的复杂性，但您应该能够根据自己的需要进行调整。
//
// WrapStack.swift
// MusicBook
//
// Created by Mike Stoddard on 8/26/19.
// Copyright © 2019 Mike Stoddard. All rights reserved.
//
import SwiftUI
extension String {
func height(withConstrainedWidth width: CGFloat, font: UIFont) -> CGFloat {
let constraintRect = CGSize(width: width, height: .greatestFiniteMagnitude)
let boundingBox = self.boundingRect(with: constraintRect, options: .usesLineFragmentOrigin, attributes: [.font: font], context: nil)
return ceil(boundingBox.height)
}
func width(withConstrainedHeight height: CGFloat, font: UIFont) -> CGFloat {
let constraintRect = CGSize(width: .greatestFiniteMagnitude, height: height)
let boundingBox = self.boundingRect(with: constraintRect, options: .usesLineFragmentOrigin, attributes: [.font: font], context: nil)
return ceil(boundingBox.width)
}
}
struct WrapStack: View {
var strings: [String]
@State var borderColor = Color.red
@State var verticalAlignment = VerticalAlignment.top
@State var horizontalAlignment = HorizontalAlignment.leading
var body: some View {
GeometryReader { geometry in
ZStack {
ForEach(self.strings.indices, id: \.self) {idx in
Text(self.strings[idx])
.position(self.nextPosition(
index: idx,
bucketRect: geometry.frame(in: .local)))
} //end GeometryReader
} //end ForEach
} //end ZStack
.overlay(Rectangle().stroke(self.borderColor))
} //end body
func nextPosition(index: Int,
bucketRect: CGRect) -> CGPoint {
let ssfont = UIFont.systemFont(ofSize: UIFont.systemFontSize)
let initX = (self.horizontalAlignment == .trailing) ? bucketRect.size.width : CGFloat(0)
let initY = (self.verticalAlignment == .bottom) ? bucketRect.size.height : CGFloat(0)
let dirX = (self.horizontalAlignment == .trailing) ? CGFloat(-1) : CGFloat(1)
let dirY = (self.verticalAlignment == .bottom) ? CGFloat(-1) : CGFloat(1)
let internalPad = 10 //fudge factor
var runningX = initX
var runningY = initY
let fontHeight = "TEST".height(withConstrainedWidth: 30, font: ssfont)
if index > 0 {
for i in 0...index-1 {
let w = self.strings[i].width(
withConstrainedHeight: fontHeight,
font: ssfont) + CGFloat(internalPad)
if dirX <= 0 {
if (runningX - w) <= 0 {
runningX = initX - w
runningY = runningY + dirY * fontHeight
} else {
runningX -= w
}
} else {
if (runningX + w) >= bucketRect.size.width {
runningX = initX + w
runningY = runningY + dirY * fontHeight
} else {
runningX += w
} //end check if overflow
} //end check direction of flow
} //end for loop
} //end check if not the first one
let w = self.strings[index].width(
withConstrainedHeight: fontHeight,
font: ssfont) + CGFloat(internalPad)
if dirX <= 0 {
if (runningX - w) <= 0 {
runningX = initX
runningY = runningY + dirY * fontHeight
}
} else {
if (runningX + w) >= bucketRect.size.width {
runningX = initX
runningY = runningY + dirY * fontHeight
} //end check if overflow
} //end check direction of flow
//At this point runnoingX and runningY are pointing at the
//corner of the spot at which to put this tag. So...
//
return CGPoint(
x: runningX + dirX * w/2,
y: runningY + dirY * fontHeight/2)
}
} //end struct WrapStack
struct WrapStack_Previews: PreviewProvider {
static var previews: some View {
WrapStack(strings: ["One, ", "Two, ", "Three, ", "Four, ", "Five, ", "Six, ", "Seven, ", "Eight, ", "Nine, ", "Ten, ", "Eleven, ", "Twelve, ", "Thirteen, ", "Fourteen, ", "Fifteen, ", "Sixteen"])
}
}