macos - 如何在 SwiftUI 中将进度指示器与标签右侧对齐并保持标签居中在 VStack 中？

Question

我想在视图的中心显示一个标签，标签右侧有一个进度指示器。如何在 macOS 上的 SwiftUI 中执行此操作？

下面的代码将 HStack 对齐在 VStack 的中心，但我希望文本居中并且进度指示器与文本的后沿对齐。我想我可以用 ZStack 替换 HStack，但仍然不清楚如何将两个控件相互对齐，或者如何防止容器以其容器为中心。

import SwiftUI

struct AlignmentTestView: View {
    var body: some View {
        VStack(alignment: .center, spacing: 4) {
            HStack {
                Text("Some text")
                ActivityIndicator()
            }
        }.frame(width: 200, height: 200)
            .background(Color.pink)
    }
}

struct AlignmentTestView_Previews: PreviewProvider {
    static var previews: some View {
        AlignmentTestView()
    }
}

标签： macosswiftui

Answer 1

这是可能的方法（测试用圆圈替换 ActivityIndi​​cator）。

使用 Xcode 11.4 / iOS 13.4 / macOS 10.15.4

var body: some View {
    VStack {
        HStack {
            Text("Some text")
                .alignmentGuide(.hAlignment) { $0.width / 2.0 }
            ActivityIndicator()
        }
    }
    .frame(width: 200, height: 200, alignment: 
           Alignment(horizontal: .hAlignment, vertical: VerticalAlignment.center))
    .background(Color.pink)
}

extension HorizontalAlignment {
    private enum HAlignment : AlignmentID {
        static func defaultValue(in d: ViewDimensions) -> CGFloat {
            return d[HorizontalAlignment.center]
        }
    }

    static let hAlignment = HorizontalAlignment(HAlignment.self)
}