SwiftUI: 如何将HStack中的特定视图强制置于中心位置？

Question

给定一个类似下面的HStack。

        HStack{
            Text("View1")

            Text("Centre")

            Text("View2")

            Text("View3")
        }

我怎样才能强迫 "中心 "视图处于中心位置？

Answer 1

这里是可能的简单方法。用Xcode 11.4 iOS 13.4进行测试。

struct DemoHStackOneInCenter: View {
    var body: some View {
        HStack{
            Spacer().overlay(Text("View1"))

            Text("Centre")

            Spacer().overlay(
                HStack {
                    Text("View2")
                    Text("View3")
                }
            )
        }
    }
}

提供了额外的左-右侧视图对齐的解决方案。视图相对于另一个居中视图的位置

Answer 2

举手之劳

1. 将 HStack 包裹在一个 VStack 中。VStack可以控制它的子代的水平排列。
2. 将自定义对齐指南应用到VStack。
3. 创建一个VStack的子视图，它占据了整个宽度。将自定义对齐指南钉在该视图的中心。(这将对齐指南钉在VStack的中心)
4. 将 "中心 "视图的中心对准对齐指南

对于必须填满VStack的视图，我使用了一个Geometry Reader。它可以自动扩展到父视图的大小，而不会影响布局。

import SwiftUI


//Custom Alignment Guide
extension HorizontalAlignment {
    enum SubCenter: AlignmentID {
        static func defaultValue(in d: ViewDimensions) -> CGFloat {
            d[HorizontalAlignment.center]
        }
    }

    static let subCentre = HorizontalAlignment(SubCenter.self)
}

struct CentreSubviewOfHStack: View {
    var body: some View {
        //VStack Alignment set to the custom alignment
        VStack(alignment: .subCentre) {
            HStack{
                Text("View1")

                //Centre view aligned
                Text("Centre")
                .alignmentGuide(.subCentre) { d in d.width/2 }

                Text("View2")

                Text("View3")
            }

            //Geometry reader automatically fills the parent
            //this is aligned with the custom guide
            GeometryReader { geometry in
                EmptyView()
            }
            .alignmentGuide(.subCentre) { d in d.width/2 }
        }
    }
}

struct CentreSubviewOfHStack_Previews: PreviewProvider {
    static var previews: some View {
        CentreSubviewOfHStack()
            .previewLayout(CGSize.init(x: 250, y: 100))
    }
}