【问题标题】:SwiftUI VStack with flexible Spacer带有灵活 Spacer 的 SwiftUI VStack
【发布时间】:2020-08-03 11:23:53
【问题描述】:

我有一个简单的VStack,顶部有一个视图,底部有一个多行文本。文本可以更新其内容,因此它会根据它的行数调整大小。发生这种情况时,顶部的视图也会调整其位置 - 向上或向下移动。

我希望顶视图保持固定的垂直位置,独立于VStack 中的以下视图。在我看来,这就是Spacer 的用途,因为它们很灵活。然而这并不奏效。

struct ContentView: View {
    var body: some View {
        VStack {
            HStack("Some Icons")
            Spacer()
            Text("Multiline Text")
        }
    }
}

【问题讨论】:

    标签: swiftui vstack


    【解决方案1】:

    你可以用ZStack

    struct ContentView: View {
        var body: some View {
            ZStack {
                VStack {
                    Text("top view")
                    Spacer()
                }
                VStack {
                    Spacer()
                    Text("bottom view")
                }
            }
        }
    }
    

    这样,第一个 VStack 中的所有内容都不会相对于第二个 VStack 移动。


    或者,您可以继续使用 VStack,但将其子视图包装在单独的 VStacks 中:

    struct ContentView: View {
        var body: some View {
            VStack {
                VStack {
                    Text("top view")
                    Spacer()
                }
                VStack {
                    Spacer()
                    Text("bottom view")
                }
            }
        }
    }
    

    【讨论】:

    • 谢谢,但我试过了,但它们就在彼此之上,我必须通过应用偏移来手动调整它们的位置。我想保持 VStack 的自动垂直布局。
    • @hoshy 那么请分享您的代码并更好地描述问题 - 包括其他视图以及当您只有两个视图时没有问题(如上例所示)。
    • 是的,您的解决方案有效,但正如所解释的,它还将 VStack 和 Text 呈现在彼此之上。所以我必须抵消它们以使它们看起来是垂直结构的。我的问题再次是,如果有一种方法可以让 Spacer 缩小和放大视图,同时保持 HStack 固定。
    • @hoshy 查看更新的答案。除了Text("top view"),您还可以放置任何其他视图(例如HStack)。
    • 有趣的是,有了两个 VStack 和内部 Spacer,您甚至不需要 ZStack,这使得布局再次完美。 (这可能会在您的答案中更新。)
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2022-11-05
    • 2022-07-19
    • 2021-10-02
    • 2020-10-29
    • 1970-01-01
    相关资源
    最近更新 更多