【问题标题】:How to center horizontally a view that is part of a view group in SwiftUI如何水平居中作为 SwiftUI 中视图组一部分的视图
【发布时间】:2019-11-22 08:54:51
【问题描述】:

我正在尝试在底部水平布局两组标签(“>”,“[]”)和(“M”)使用 SwiftUI 的屏幕,其约束条件是 ("M") 组位于屏幕的右下角,并且 ("",">>" ,"[]") 组以这样的方式居中,使得 "^" 元素与屏幕的水平中心对齐。

我试过这个:

        VStack {
            Spacer()
            HStack {
                Spacer()
                Spacer()
                HStack.init(spacing: 4) {
                    Text("<<")
                    Text("<")
                    Text("^") // this view should be aligned to horizontal center of screen
                        .padding([.leading, .trailing], 16)
                    Text(">")
                    Text(">>")
                    Text("[]")
                        .padding(.leading, 8)
                }
                Spacer()
                Text("M")
                    .padding(2)
            }
        }

看起来像这样:

我不知道如何约束“^”与水平中心对齐。

使用自动布局,我可以很容易地做到这一点,方法是将“^”的 center-x 锚定到父 center-x 锚点,然后将剩余的元素相应地锚定到“^”,“M”将被锚定到右下角的锚点。

【问题讨论】:

    标签: layout swiftui


    【解决方案1】:

    一个简单的解决方案是使用 .hidden() 修饰符在两侧使用相同长度的文本。

    (我这里用的是Group,因为我超过了10个limit View)

    VStack {
        Spacer()
        HStack {
            Group {
                Text("M").hidden()
                Spacer()
                Text("[]").hidden()
                Text("<<")
                Text("<")
            }
            Group {
                Text("^")
                Text(">")
                Text(">>")
                Text("[]")
                Spacer()
                Text("M")
            }
        }
    }
    

    【讨论】:

    • 这是 hacky 并且可能无法转移到类似的问题。另一种解决方案是使用 ZStack 并手动定位视图,但这也不是我想要的。我正在寻找一个 SwiftUI 对齐/锚定/修改器解决方案。
    • 如果您还没有看过:swiftui-lab.com/alignment-guides,那么这是一个非常清晰的对齐指南。不知道对你的问题有没有帮助。
    猜你喜欢
    • 2019-10-21
    • 1970-01-01
    • 1970-01-01
    • 2014-12-18
    • 2012-09-04
    • 2021-05-27
    • 2017-02-26
    • 2019-01-02
    • 1970-01-01
    相关资源
    最近更新 更多