Question

我无法将第二个“日期”Text 置于 HStack 的中心。如您所见，在图像中，它更靠左一些。我只希望第二个视图以 HStack 为中心。我希望第一个视图被锁定到领先。

这是代码。

import SwiftUI

struct DaySummariesBarChart: View {

    var body: some View {
        HStack {
            Text("Date")
                .font(.footnote)
            Text("Date")
            Spacer()
        }
    }
}

struct BarChart_Previews: PreviewProvider {
    static var previews: some View {
        DaySummariesBarChart()
            .previewLayout(.sizeThatFits)
    }
}

Answer 1

这是一个非常干净的方法：

var body: some View {
  ZStack {
    Text("Date")
      .font(.footnote)
      .frame(maxWidth: .infinity, alignment: .leading)
    Text("Date")
   }
}

第一个 Text 的 maxWidth 为 infinity，因此它占据了整个空间，但与 .leading 对齐。

第二个 Text 默认在 ZStack 中居中。

Answer 2

Spacer() 将视图向左移动。您的问题应该通过在另一侧添加另一个 Spacer() 来解决。

struct DaySummariesBarChart: View {
    var body: some View {
        HStack {
            Spacer()
            Text("Date")
                .font(.footnote)
            Text("Date")
            Spacer()
        }
    }
}

Answer 3

您可以使用 GeometryReader 使视图的宽度正好减半，从而使第二个视图居中。

struct DaySummariesBarChart: View {
    var body: some View {
        GeometryReader { geometry in
            HStack {
                Text("Date")
                    .font(.footnote)
                    .frame(width: geometry.size.width / 2)
                Text("Date")
                    .frame(width: geometry.size.width / 2)
            }
        }
    }
}

如何将第二个 HStack 视图居中？

3 个答案: