在 SwiftUI 中对齐 HStack，但大小不相等答案

【问题标题】：Aligning HStack without equal sizing in SwiftUI在 SwiftUI 中对齐 HStack，但大小不相等
【发布时间】：2019-06-09 07:42:00
【问题描述】：

我有一个自定义图表，其中包含一些文本，如下所示。它正确对齐第一个文本，它错误地对齐最后一个文本。我需要带有文本的 VStack 像手风琴一样拉伸，以便最后一个文本的 centerY 与图表底部对齐。

正如蓝色 Xcode 突出显示的那样，VStack 接收到与带有偏移量的图表相同的大小。

为了对齐第一个文本，我扩展了 VerticalAlignment，如 WWDC 2019 - Session 237 所示。

extension VerticalAlignment {
   private enum TopChartAndMidTitle: AlignmentID {
      static func defaultValue(in dimensions: ViewDimensions) -> Length {
         return dimensions[.top]
      }
   }
   static let topChartAndMidTitle = VerticalAlignment(TopChartAndMidTitle.self)
}

然后我是这样使用的：

var labels = ["1900", "1800", "1700", "1600", "1500", "1400"]

var body: some View {
    HStack(alignment: .topChartAndMidTitle) {
        chart()
            .alignmentGuide(.topChartAndMidTitle) { $0[.top] }
        valueLabels()
    }
}

private func valueLabels() -> AnyView {
    AnyView(VStack {
        Text(labels[0]).font(.footnote)
            .alignmentGuide(.topChartAndMidTitle) { $0[.bottom] / 2 }
        ForEach(labels.dropFirst().identified(by: \.self)) { label in
            Spacer()
            Text(label).font(.footnote)
        }
    })
}

问题：如何将最后一个文本与图表底部对齐，从而拉伸 VStack？

要对此进行测试，只需将我的自定义图表替换为 Rectangle().fill(Color.red)。这会导致同样的问题。

【问题讨论】：

我不认为您可以为每个标签进行自定义对齐，您需要为每对（chartRow、标签）设置一个 HStack。您可以尝试为最后一个标签设置正确的对齐方式（您只为第一个标签设置了正确的对齐方式），并希望标签会自动排列以覆盖其间的空闲空间。您也可以尝试在标签 VStack 中使用空格修饰符
只要第一个和最后一个标签对齐，其他标签也将对齐。我只做了第一个，因为我找不到同时做第一个和最后一个的方法。我愿意接受任何可行的方法。

标签： ios swift swiftui

【解决方案1】：

今天我会用下面的方法来做...

结果演示

代码（TopChartAndMidTitle“原样”用于原始问题）

struct TestAlignScales: View {
    var labels = ["1900", "1800", "1700", "1600", "1500", "1400"]

    @State private var graphHeight = CGFloat.zero
    var body: some View {
        HStack(alignment: .topChartAndMidTitle) {
            Rectangle().fill(Color.red)
                .alignmentGuide(.topChartAndMidTitle) { d in
                    if self.graphHeight != d.height {
                        self.graphHeight = d.height
                    }
                    return d[.top]
                }
            valueLabels()
        }
    }

    @State private var delta = CGFloat.zero
    private func valueLabels() -> some View {
        VStack {
            ForEach(labels, id: \.self) { label in
                VStack {
                    if label == self.labels.first! {
                        Text(label).font(.footnote)
                            .alignmentGuide(.topChartAndMidTitle) { d in
                                if self.delta != d.height {
                                    self.delta = d.height
                                }
                                return d[VerticalAlignment.center]
                            }
                    } else {
                        Text(label).font(.footnote)
                    }
                    if label != self.labels.last! {
                        Spacer()
                    }
                }
            }
        }
        .frame(height: graphHeight + delta)
    }

}

struct TestAlignScales_Previews: PreviewProvider {
    static var previews: some View {
        TestAlignScales()
            .frame(height: 400)
    }
}

【讨论】：

太棒了。感谢您迟到的回复。我会试试这个。基本上，在那篇文章之后，我放弃了用 SwiftUI 编写整个应用程序。它只是觉得它太局限了，无论我多么尝试拆分我的代码，它仍然最终成为一个混乱的厄运金字塔。