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

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

Answer 2

可能是这样的：

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

Answer 3

这就是我要怎么做（没有硬编码的数字）

SwiftUI alignment center button with left another

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

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

3 个答案: