SwiftUI 从中心到右侧水平对齐 [英] SwiftUI horizontal alignment from center to the right

问题描述

我正在尝试将视图的动态集合(即不同数量的)对齐到居中视图的右侧，而不将中心视图从其原始的中心位置移动.

I am trying to align a dynamic collection (ie of varying count) of views to the right of a centered view, without moving the center view from its original, center position.

例如，中心视图是 Text("12")，右边的视图是 [Text("+3"), Text("+10"),Text("-1")] 所以我希望 12 右边的视图显示在它的右边，而 12 在屏幕上水平居中:

For example, the center view is Text("12") and the views to the right are [Text("+3"), Text("+10"), Text("-1")] so I want the views to the right of 12 be displayed to its right, while 12 is centered horizontally on the screen:

<代码>|12 +3 +10 -1 |

如果我尝试使用 HStack，12 将远离中心.有我可以使用的视图修改器吗?前任.Text("12").alignToRight(...)

If I try using an HStack the 12 will move away from center. Is there a view modifier I can use? ex. Text("12").alignToRight(...)

此解决方案将集合与屏幕右边缘的左侧对齐，但这不是一回事.

This solution aligns the collection to the left of the right edge of the screen, but that's not the same thing.

ZStack {
  Text("12")

  HStack(spacing: 4) {
    Spacer()
    Text("+3")
    Text("+10")
    Text("-1")
  }
}

我宁愿不必复制左侧的 HStack 然后让它消失以平衡右侧的 HStack(这是一个荒谬的创建布局的方式，加上我在这里提供的例子很简单，实际上我必须在动态集合上使用 ForEach)，即

I would prefer not to have to duplicate the HStack on the left side and then make it disappear so as to balance the HStack on the right (that is a ridiculous way of creating a layout, plus the example I'm providing here is simple, in actuality I have to use a ForEach over the dynamic collection), ie

HStack {

  Spacer()

  HStack(spacing: 4) {
    Spacer()
    Text("+3")
    Text("+10")
    Text("-1")
  }
  .opacity(0)

  Text("12")

  HStack(spacing: 4) {
    Spacer()
    Text("+3")
    Text("+10")
    Text("-1")
  }

  Spacer()

}

使用诸如 Text("12").overlay(myCollectionView.offset(x: 16) 之类的东西也可以使用它，因为中心文本的字体大小会有所不同，所以我'我还必须手动猜测和调整偏移量——我宁愿在两个视图之间有一个填充.

Using something like Text("12").overlay(myCollectionView.offset(x: 16) is also winging it, as the font size of the center text will vary, and so I'd have to guess and adjust the offset manually as well -- I'd rather have a padding between the two views.

推荐答案

这里是基于对齐指南的可能方法.使用 Xcode 11.3/iOS 13.3 测试.

Here is possible approach based on alignment guides. Tested with Xcode 11.3 / iOS 13.3.

定义自定义对齐

extension HorizontalAlignment {
   private enum HCenterAlignment: AlignmentID {
      static func defaultValue(in dimensions: ViewDimensions) -> CGFloat {
         return dimensions[HorizontalAlignment.center]
      }
   }
   static let hCenterred = HorizontalAlignment(HCenterAlignment.self)
}

使用自定义对齐指南将内部 HStack 的所需元素与外部 VStack 对齐

align needed element of internal HStack to external VStack using custom alignment guide

struct TestRightCenterred: View {
    var body: some View {
        GeometryReader { gp in
            VStack(alignment: .hCenterred) {
                HStack(spacing: 4) {
                    Text("12").border(Color.red) // << just for test
                        .alignmentGuide(.hCenterred, computeValue: { $0.width / 2.0 })
                    Text("+3")
                    Text("+10")
                    Text("-1")
                }
            }
            .frame(maxWidth: gp.size.width, alignment: Alignment(horizontal: .hCenterred, vertical: .center))
        }
    }
}

这篇关于SwiftUI 从中心到右侧水平对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！