如何使条形图中的每个单独的条具有相同的起点答案

【问题标题】：How to make each individual bar in a bar chart have the same starting point如何使条形图中的每个单独的条具有相同的起点
【发布时间】：2021-11-08 08:19:51
【问题描述】：

我正在使用 SwiftUI 的 Rectangle 创建一个非常简单的条形图。

创建时，条形图将自身与屏幕中心对齐，因此它们最终不会具有相同的起点，如下所示：

如何修改我的代码，以使标记为 14-09-2021 的栏与其他栏位于同一行？

这是我用来创建这些单独条形图的代码：

        VStack {
        Spacer()
        Text(history.target)
        Rectangle()
            .fill(trackingViewModel.starColor(stars: history.target))
            .frame(width: 70, height: trackingViewModel.barHeight(stars: history.target))
        Text(history.date)
        Spacer()
    }

然后我使用ForEach 创建条形图：

        HStack {
        ForEach(trackingViewModel.trackingHistory, id: \.self) { history in
            HStack(spacing: 5) {
                IndividualHistoryBar(history: history, trackingViewModel: trackingViewModel)
            }
                
        }

编辑：

我忘了提到我使用工作表调用此历史图表视图。我通过将.alignment 添加到HStack 来尝试Asperi 的解决方案，但这并没有做任何事情。这可能是原因吗？工作表是否会自动将所有内容对齐到中心？

【问题讨论】：

标签： ios swiftui bar-chart

【解决方案1】：

你需要设置对齐方式

HStack(alignment: .bottom) {    // << here !!
   ForEach(trackingViewModel.trackingHistory, id: \.self) { history in

【讨论】：

嗨！我添加了对齐方式，但我没有看到结果有任何差异。 :(
您还需要从 VStack 底部移除垫片

【解决方案2】：

我修好了！诀窍是使用alignment .lastTextBaseline，它将日期作为基线并相应地对齐所有内容。

最终结果：

修改代码：

    HStack(alignment: .lastTextBaseline) { // <-- here!
        ForEach(trackingViewModel.trackingHistory, id: \.self) { history in
            HStack(spacing: 5) {
                IndividualHistoryBar(history: history, trackingViewModel: trackingViewModel)
            }                   
        }
    }

【讨论】：