所以我基本上需要在 SwiftUI 中制作一個類似于此的表格：
正如您在螢屏截圖中看到的，我很難將欄位與其對應的列對齊，如“John”應該完全以“Name”為中心，而“EUR”應該以“Currency”為中心等等。正如你可以在代碼上看到，我目前正在用堆疊間距引數觀察它，但這簡直太糟糕了，甚至不適用于所有設備，而且資料是動態的并且來自 API 呼叫，因此它無法作業。如何在 SwiftUI 上對齊？我需要支持 iOS 13。
當前代碼：
struct ContentView: View {
var body: some View {
VStack(spacing: 0) {
ZStack {
TitleBackground()
Text("Clients")
.foregroundColor(.white)
}
HStack(spacing: 30) {
Text("Name")
Text("Balance")
Text("Currency")
Spacer()
}
.foregroundColor(Color(#colorLiteral(red: 0.4783782363, green: 0.4784628153, blue: 0.4783664346, alpha: 1)))
.frame(maxWidth:.infinity)
.padding(12)
.background(Color(#colorLiteral(red: 0.9332349896, green: 0.9333916306, blue: 0.9332130551, alpha: 1)))
RowView()
RowView()
RowView()
RowView()
}
}
}
struct RowView : View {
var body: some View {
HStack(spacing: 30) {
Text("John")
Text("$5300")
Text("EUR")
Spacer()
}
.padding(12)
}
}
struct TitleBackground: View {
var body: some View {
ZStack(alignment: .bottom){
Rectangle()
.frame(maxWidth: .infinity, maxHeight: 60)
.foregroundColor(.red)
.cornerRadius(15)
//We only need the top corners rounded, so we embed another rectangle to the bottom.
Rectangle()
.frame(maxWidth: .infinity, maxHeight: 15)
.foregroundColor(.red)
}
}
}
uj5u.com熱心網友回復：
我看到 Yrb 在我之前發布了一個類似的答案，但無論如何我都會發布這個，因為我的解決方案比他們的解決方案更具模塊化/可組合性。
你想要這樣的布局：
我們將實作一個 API，以便我們可以使用以下代碼為表格視圖獲取布局：
enum ColumnId: Hashable {
case name
case balance
case currency
}
struct TableView: View {
var body: some View {
WidthPreferenceDomain {
VStack(spacing: 0) {
HStack(spacing: 30) {
Text("Name")
.widthPreference(ColumnId.name)
Text("Balance")
.widthPreference(ColumnId.balance)
Text("Currency")
.widthPreference(ColumnId.currency)
Spacer()
}
.frame(maxWidth:.infinity)
.padding(12)
.background(Color(#colorLiteral(red: 0.9332349896, green: 0.9333916306, blue: 0.9332130551, alpha: 1)))
ForEach(0 ..< 4) { _ in
RowView()
}
}
}
}
}
在上面的代碼中：
- 我定義了一個
ColumnId型別來標識每個表列。 - 我已經插入了一個
WidthPreferenceDomain容器視圖，我們將在下面實作。 - 我
widthPreference為每個表格行添加了一個修飾符，我們將在下面實作。
我們還需要像這樣使用widthPreference修飾符RowView：
struct RowView : View {
var body: some View {
HStack(spacing: 30) {
Text("John")
.widthPreference(ColumnId.name)
Text("$5300")
.widthPreference(ColumnId.balance)
Text("EUR")
.widthPreference(ColumnId.currency)
Spacer()
}
.padding(12)
}
}
我已將此答案的完整代碼放在一個要點中，以便于復制。
那么，我們如何實作WidthPreferenceDomain和widthPreference？
We need to measure the width of all the items in the Name column, including the Name title itself, so that we can then set all of the Name column's items to have the same width. We need to repeat the procedure for the Balance and Currency columns.
To measure the items, we can use GeometryReader. Because GeometryReader is a greedy view that expands to fill as much space as its parent offers, we don't want to wrap any table items in a GeometryReader. Instead, we want to put a GeometryReader in a background on each table item. A background view is given the same frame as its parent.
To collect the measured widths, we can use a “preference“ by defining a type conforming to the PreferenceKey protocol. Since we want to collect the widths of all the columns, we'll store the widths in a Dictionary, keyed by a column id. To merge two widths for the same column, we take the maximum of the widths, so that each column expands to fit all its items.
fileprivate struct WidthPreferenceKey: PreferenceKey {
static var defaultValue: [AnyHashable: CGFloat] { [:] }
static func reduce(value: inout [AnyHashable : CGFloat], nextValue: () -> [AnyHashable : CGFloat]) {
value.merge(nextValue(), uniquingKeysWith: { max($0, $1) })
}
}
To distribute the collected widths back down to the table items, we can use the “environment” by defining a type conforming to the EnvironmentKey protocol. EnvironmentKey only has one requirement, a static var defaultValue property, which matches the PreferenceKey's defaultValue property, so we can re-use the WidthPreferenceKey type we already defined:
extension WidthPreferenceKey: EnvironmentKey { }
To use the environment, we also need to add a property to EnvironmentValues:
extension EnvironmentValues {
fileprivate var widthPreference: WidthPreferenceKey.Value {
get { self[WidthPreferenceKey.self] }
set { self[WidthPreferenceKey.self] = newValue }
}
}
Now we can define the widthPreference modifier:
extension View {
public func widthPreference<Domain: Hashable>(_ key: Domain) -> some View {
return self.modifier(WidthPreferenceModifier(key: key))
}
}
fileprivate struct WidthPreferenceModifier: ViewModifier {
@Environment(\.widthPreference) var widthPreference
var key: AnyHashable
func body(content: Content) -> some View {
content
.fixedSize(horizontal: true, vertical: false)
.background(GeometryReader { proxy in
Color.clear
.preference(key: WidthPreferenceKey.self, value: [key: proxy.size.width])
})
.frame(width: widthPreference[key])
}
}
This modifier measures the modified view's width using a background GeometryReader and stores it in the preference. It also sets the view's width, if the widthPreference from the environment has a width for it. Note that widthPreference[key] will be nil on the first layout pass, but that's okay, because frame(width: nil) is an “inert” modifier; it has no effect.
And now we can implement WidthPreferenceDomain. It needs to receive the preference and store it in the environment:
public struct WidthPreferenceDomain<Content: View>: View {
@State private var widthPreference: WidthPreferenceKey.Value = [:]
private var content: Content
public init(@ViewBuilder content: () -> Content) {
self.content = content()
}
public var body: some View {
content
.environment(\.widthPreference, widthPreference)
.onPreferenceChange(WidthPreferenceKey.self) { widthPreference = $0 }
}
}
uj5u.com熱心網友回復：
有兩種方法可以解決這個問題。首先，您可以使用你可以用 with 解決這個問題LazyVGrids具有相同列設定的兩個，但您必須修復一些尺寸。第二種方法是PreferenceKeys。
LazyVGrid：
struct LazyVGridView: View {
let columns = [
GridItem(.fixed(100)),
GridItem(.fixed(100)),
GridItem(.adaptive(minimum: 180))
]
var body: some View {
VStack {
LazyVGrid(columns: columns) {
Text("Name")
.padding()
Text("Balance")
.padding()
Text("Currency")
.padding()
}
.foregroundColor(Color(#colorLiteral(red: 0.4783782363, green: 0.4784628153, blue: 0.4783664346, alpha: 1)))
.background(Color(#colorLiteral(red: 0.9332349896, green: 0.9333916306, blue: 0.9332130551, alpha: 1)))
LazyVGrid(columns: columns) {
ForEach(clients) { client in
Text(client.name)
.padding()
Text(client.balance.description)
.padding()
Text(client.currency)
.padding()
}
}
}
}
}
struct PrefKeyAlignmentView: View {
let clients: [ClientInfo] = [
ClientInfo(name: "John", balance: 300, currency: "EUR"),
ClientInfo(name: "Jennifer", balance: 53000, currency: "EUR"),
ClientInfo(name: "Jo", balance: 30, currency: "EUR"),
ClientInfo(name: "Jill", balance: 530000, currency: "EUR")
]
@State private var col1Width: CGFloat = 100
@State private var col2Width: CGFloat = 100
@State private var col3Width: CGFloat = 110
var body: some View {
VStack {
HStack() {
Text("Name")
.padding()
// The background view takes on the size of the Text the padding, and the GeometryReader reads that size
.background(GeometryReader { geometry in
Color.clear.preference(
//This sets the preference key value with the width of the background view
key: Col1WidthPrefKey.self,
value: geometry.size.width)
})
// This set the frame to the column width variable defined above
.frame(width: col1Width)
Text("Balance")
.padding()
.background(GeometryReader { geometry in
Color.clear.preference(
key: Col2WidthPrefKey.self,
value: geometry.size.width)
})
.frame(width: col2Width)
Text("Currency")
.padding()
.background(GeometryReader { geometry in
Color.clear.preference(
key: Col3WidthPrefKey.self,
value: geometry.size.width)
})
.frame(width: col3Width)
Spacer()
}
ForEach(clients) { client in
HStack {
Text(client.name)
.padding()
.background(GeometryReader { geometry in
Color.clear.preference(
key: Col1WidthPrefKey.self,
value: geometry.size.width)
})
.frame(width: col1Width)
Text(client.balance.description)
.padding()
.background(GeometryReader { geometry in
Color.clear.preference(
key: Col2WidthPrefKey.self,
value: geometry.size.width)
})
.frame(width: col2Width)
Text(client.currency)
.padding()
.background(GeometryReader { geometry in
Color.clear.preference(
key: Col3WidthPrefKey.self,
value: geometry.size.width)
})
.frame(width: col3Width)
Spacer()
}
}
}
//This sets the various column widths whenever a new entry as found.
//It keeps the larger of the new item's width, or the last largest width.
.onPreferenceChange(Col1WidthPrefKey.self) {
col1Width = max($0,col1Width)
}
.onPreferenceChange(Col2WidthPrefKey.self) {
col2Width = max($0,col2Width)
}
.onPreferenceChange(Col3WidthPrefKey.self) {
col3Width = max($0,col3Width)
}
}
}
struct ClientInfo: Identifiable {
let id = UUID()
let name: String
let balance: Int
let currency: String
}
private extension PrefKeyAlignmentView {
struct Col1WidthPrefKey: PreferenceKey {
static let defaultValue: CGFloat = 0
static func reduce(value: inout CGFloat,
nextValue: () -> CGFloat) {
value = max(value, nextValue())
}
}
struct Col2WidthPrefKey: PreferenceKey {
static let defaultValue: CGFloat = 0
static func reduce(value: inout CGFloat,
nextValue: () -> CGFloat) {
value = max(value, nextValue())
}
}
struct Col3WidthPrefKey: PreferenceKey {
static let defaultValue: CGFloat = 0
static func reduce(value: inout CGFloat,
nextValue: () -> CGFloat) {
value = max(value, nextValue())
}
}
}
I don't think using alignmentGuides would work as you would have to handle multiple views, and alignment guides only align one set of views, and not the views internally.
Both of these solutions will work. The PreferenceKeys will automatically adapt everything, but theoretically could push past the bounds of the screen with too much information. The LazyVGrid is more rigid, but could cause truncation/wrapping if the data is too long. I don't think you could use an adaptive layout for the LazyVGrid for all columns, if you have two different grids. It may be possible to mix both and set the LazyVGrid widths with PreferenceKeys, but I haven't personally tried it.
DataSource for both for testing:
struct ClientInfo: Identifiable {
let id = UUID()
let name: String
let balance: Int
let currency: String
}
let clients: [ClientInfo] = [
ClientInfo(name: "John", balance: 300, currency: "EUR"),
ClientInfo(name: "Jennifer", balance: 53000, currency: "EUR"),
ClientInfo(name: "Jo", balance: 30, currency: "EUR"),
ClientInfo(name: "Jill", balance: 530000, currency: "EUR")
]
Edit: While working on the answer, I forgot you were restricted to iOS 13. LazyVGrids aren't available. I left the LazyVGrid answer up as you could use if #available(os:) if you wanted to use it for later OS's, or for someone else looking for a more current solution.
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/349803.html
上一篇：cgb2109-day05