ios - SwiftUI - 如何将一个 TextView 与另一个 TextView 垂直对齐以制作类似于具有适当对齐方式的表格的内容？

Question

所以我基本上需要在 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)
            }
    }
}

Answer 1

我看到 Yrb 在我之前发布了一个类似的答案，但我还是要发布这个，因为我的解决方案比他们的更模块化/可组合。

---

你想要这样的布局:

我们将实现一个 API，以便我们可以使用此 TableView 代码获取您的布局:

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 容器 View ，我们将在下面实现它。
• 我已经为每个表格行添加了一个 widthPreference 修饰符，我们将在下面实现它。

我们还需要在 RowView 中使用 widthPreference 修饰符，如下所示:

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)
    }
}

我已将此答案的完整代码放在 a gist for easy copying 中。

那么，我们如何实现 WidthPreferenceDomain 和 widthPreference？

我们需要测量 Name 列中所有项目的宽度，包括 Name 标题本身，这样我们就可以将 Name 列的所有项目设置为具有相同的宽度。我们需要对 Balance 和 Currency 列重复该过程。

要测量项目，我们可以使用GeometryReader。因为 GeometryReader 是一个贪婪的 View ，它会扩展以填充与其父级提供的空间一样多的空间，所以我们不想将任何表项包装在 GeometryReader 中。相反，我们想在每个表项的 background 中放置一个 GeometryReader。 background View 被赋予与其父 View 相同的框架。

要收集测量的宽度，我们可以通过定义符合 PreferenceKey 协议(protocol)的类型来使用“首选项”。因为我们想要收集所有列的宽度，所以我们将宽度存储在 Dictionary 中，以列 id 为键。为了合并同一列的两个宽度，我们取宽度的最大值，以便每列扩展以适合其所有项目。

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) })
    }
}

为了将收集到的宽度分配回表项，我们可以通过定义符合 EnvironmentKey 协议(protocol)的类型来使用“环境”。 EnvironmentKey 只有一个要求，一个 static var defaultValue 属性，它匹配 PreferenceKey 的 defaultValue 属性，所以我们可以重新使用我们已经定义的 WidthPreferenceKey 类型:

extension WidthPreferenceKey: EnvironmentKey { }

要使用环境，我们还需要向EnvironmentValues 添加一个属性:

extension EnvironmentValues {
    fileprivate var widthPreference: WidthPreferenceKey.Value {
        get { self[WidthPreferenceKey.self] }
        set { self[WidthPreferenceKey.self] = newValue }
    }
}

现在我们可以定义 widthPreference 修饰符:

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])
    }
}

此修改器使用后台 GeometryReader 测量修改后 View 的宽度，并将其存储在首选项中。它还设置 View 的宽度，如果来自环境的widthPreference 有一个宽度。请注意，widthPreference[key] 在第一次布局传递时将为 nil，但这没关系，因为 frame(width: nil) 是 “inert” modifier ;它没有效果。

现在我们可以实现WidthPreferenceDomain。它需要接收偏好并将其存储在环境中:

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 }
    }
}