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

这是我的做法（没有硬编码的数字）

HStack {
    Spacer()
    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)))
    Spacer()
        .overlay(
            HStack {
                Image(systemName:"square.and.arrow.up")
                    .resizable()
                    .frame(width: 25, height: 30)
                    .font(Font.title.weight(.light))
                Spacer()
            }
            .padding(.leading) // << here can be any distance to center button
        )
}
.foregroundColor(Color(red: 0.879, green: 0.369, blue: 0, opacity: 1))

Answer 2

It could be like this:

     HStack{
            Spacer()
            Spacer().overlay(Button("Create"){}.padding(10).border(Color.blue, width: 3.0))
            Spacer()
            }

Answer 3

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

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 来避免指定高度和宽度，但无论如何您都需要为框架指定它。

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