【问题标题】:How can I align a progress indicator to the right of a label and keep the label centred in a VStack in SwiftUI?如何在 SwiftUI 中将进度指示器与标签右侧对齐并保持标签居中在 VStack 中?
【发布时间】:2020-07-17 05:02:40
【问题描述】:

我想在视图的中心显示一个标签,标签右侧有一个进度指示器。如何在 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()
    }
}

【问题讨论】:

    标签: macos swiftui


    【解决方案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)
    }
    

    【讨论】:

    • 谢谢,我使用的是 macOS,所以我收到一个错误,抱怨“.hAlignment”
    • @DuncanGroenewald,这是自定义的 - 我只是忘了添加它。此代码不应依赖于平台。
    • 它可以工作,但你能解释一下它是如何工作的 - 我完全被迷惑了!在我看来,它正在移动 VStack 的水平位置,使文本居中,但 VStack 中的其他任何内容现在都偏离中心了。
    • @DuncanGroenewald,容器设置首选对齐指南(在这种情况下自定义 hAlignment 以使其通过内部)和 Text 使用相同的对齐方式以适应容器中的外部设置。 Here is a good article about alignment guides
    • 我已经阅读了那篇文章,但无法进行范式转换。在上面的解决方案中,为什么在 VStack 上设置了框架对齐,这与文本对齐指南关闭有什么关系?
    猜你喜欢
    • 2019-06-09
    • 2021-10-29
    • 2020-05-03
    • 2016-09-26
    • 2019-04-24
    • 2014-02-08
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多