swift - 为什么alignmentGuide 对垂直和水平的行为不同？

问题描述

为什么当增加水平对齐时，红色圆圈（被对齐的东西）相对于它的“原始点”移动，但是当垂直对齐增加时，“原始点”相对于圆圈移动？

另外，为什么在水平对齐时对齐会扩展VStack，但是当增加垂直对齐时，VStack不会扩展。

struct CircleOffsetView: View {
    
    let alignment: Alignment = .center
    let relative: UnitPoint = .center
    
    @State var widthOffset: CGFloat = 0.0
    @State var heightOffset: CGFloat = 0.0
    
    var body: some View {
        VStack {
            Circle()
                .foregroundColor(.red)
                .frame(width: 200, height: 200)
                .alignmentGuide(alignment.horizontal, computeValue: { dimension in
                    dimension.width / 2 + widthOffset
                })
                .alignmentGuide(alignment.vertical, computeValue: { dimension in
                    dimension.height / 2 + heightOffset
                })
                .border(Color.black)
            
            Text("Width Offset: \(widthOffset)")
            Text("Height Offset: \(heightOffset)")
            
            Slider(value: $widthOffset, in: -150...150).padding()
            Slider(value: $heightOffset, in: -150...150).padding()
            
            Button("Reset") {
                widthOffset = 0
                heightOffset = 0
            }.padding()
            
        }
        .padding()
        .border(Color.red, width: 5)
        .padding()
        

    }
}

标签： swiftswiftui

alignmentGuide旨在根据父级HStack或VStack 对齐更改偏移量。对于您的第一个参数，alignmentGuide您应该只传递父容器的对齐方式以使其工作。

在这种情况下VStack，默认值为Alignment.center.vertical，这就是您的第一个alignmentGuide工作的原因。如果添加显式VStack(alignment: .leading)，甚至Alignment.center.vertical也不会生效。

alignmentGuidewithAlignment.center.horizontal只会在里面工作HStack(alignment: .center)。

HStack(alignment: .center) {
    Circle()
        .foregroundColor(.red)
        .frame(width: 200, height: 200)
        .border(Color.black)
        .alignmentGuide(Alignment.center.horizontal, computeValue: { dimension in
            dimension.width / 2 + widthOffset
        })
        .alignmentGuide(Alignment.center.vertical, computeValue: { dimension in
            dimension.height / 2 + heightOffset
        })
    VStack {
        Text("Width Offset: \(widthOffset)")
        Text("Height Offset: \(heightOffset)")
        
        Slider(value: $widthOffset, in: -150...150).padding()
        Slider(value: $heightOffset, in: -150...150).padding()
        
        Button("Reset") {
            widthOffset = 0
            heightOffset = 0
        }.padding()
    }
}
.padding()
.border(Color.red, width: 5)
.padding()

查看本文中的对齐指南

我不确定为什么border在你的情况下会被移动，可能是它在HStack内部使用来构建自己。

就 a 内的垂直偏移而言，VStack您的预期结果不是很清楚。

您可以使用移动您的项目.offset，但在这种情况下，视图将超出范围：

Circle()
    .foregroundColor(.red)
    .frame(width: 200, height: 200)
    .border(Color.black)
    .offset(x: widthOffset, y: heightOffset)

如果您需要垂直移动视图以影响边界，可以使用两个垫片：

Spacer(minLength: 0).frame(height: max(0, heightOffset))
Circle()
    .foregroundColor(.red)
    .frame(width: 200, height: 200)
    .border(Color.black)
    .alignmentGuide(Alignment.center.horizontal, computeValue: { dimension in
        dimension.width / 2 + widthOffset
    })
Spacer(minLength: 0).frame(height: max(0, -heightOffset))

您希望看到的其他结果？

swift - 为什么alignmentGuide 对垂直和水平的行为不同？

问题描述

解决方案

推荐阅读