SwiftUI如何在屏幕中央将HStack中的对象完美对齐？

Question

我试图弄清楚如何将屏幕正中的“创建”按钮与居中的“创建”按钮右侧的“共享”按钮对齐，而不使用任意数字。

            HStack (spacing: 40) {
                Text("Create")
                    .fontWeight(.bold)

                    .frame(width: 185, height: 40, alignment: .center)
                    .cornerRadius(50)
                    .overlay(
                        Capsule(style: .circular)
                            .stroke(Color(red: 0.879, green: 0.369, blue: 0, opacity: 1), style: StrokeStyle(lineWidth: 2)))

                Image(systemName:"square.and.arrow.up")
                    .resizable()
                    .frame(width: 25, height: 30)
                    .font(Font.title.weight(.light))

            }  .foregroundColor(Color(red: 0.879, green: 0.369, blue: 0, opacity: 1))

Answer 1

可能有更好的方法，但是可以做到。它只是将操作按钮作为覆盖添加到主“创建”按钮上。但是通过使用PreferenceKey，操作按钮可以知道“创建”按钮的大小（和原点），并且可以相应地进行偏移。在这里使用矩形来表示按钮，以便于阅读。

struct BoundsPreferenceKey: PreferenceKey {

  typealias Value = CGRect

  static var defaultValue: CGRect = .zero

  static func reduce(value: inout CGRect, nextValue: () -> CGRect) {
    value = value.union(nextValue())
  }

}

struct CenteredView: View {

  let spacing: CGFloat = 40

  var body: some View {

    HStack {

      Rectangle().fill(Color.blue)
        .frame(width: 185, height: 40)
        .preference(key: BoundsPreferenceKey.self, value: CGRect(origin: .zero, size: CGSize(width: 185, height: 40)))
        .overlayPreferenceValue(BoundsPreferenceKey.self) { rect in
          Rectangle().fill(Color.green)
            .frame(width: 25, height: 30)
            .offset(x: rect.size.width/2 + self.spacing, y: 0)
      }

    }

  }

}

您可以使用GeometryReader避免指定高度和宽度，但是无论如何都需要为框架指定高度和宽度。

或者，查看自定义对齐指南。