将文本放在屏幕的顶部和中心之间答案

【问题标题】：Place text between top and center of the screen将文本放在屏幕的顶部和中心之间
【发布时间】：2021-01-14 19:43:43
【问题描述】：

有没有一种简单的方法可以将文本相对放置在屏幕的顶部和中心之间？对于“简单”，我的意思是最好不使用 GeometryReader 和公开计算。

我尝试了VStack、Zstack 和Spacer() 的各种组合，但无济于事。

代码和截图如图：

struct ContentView: View {
    var body: some View {
        Text("Between top and center")
            .offset(y: -150)
        Text("Center")
    }
}

【问题讨论】：

标签： ios view swiftui

【解决方案1】：

一种可能的解决方案是在居中文本的每一侧创建两个视图（一个隐藏）：

struct ContentView: View {
    var body: some View {
        VStack {
            Spacer()
            Text("Between top and center")
            Spacer()
            Text("Center")
            Spacer()
            Text("")
            Spacer()
        }
    }
}

或者，为了万无一失（以防他们在未来的版本中改变Text("") 的行为）：

struct ContentView: View {
    var body: some View {
        VStack {
            Spacer()
            Text("Between top and center")
            Spacer()
            Text("Center")
            Spacer()
            Text("Between top and center")
                .opacity(0)
            Spacer()
        }
    }
}

（如果需要，可以将Text("Between top and center")提取为子视图，以避免代码重复。）

如你所说：

Spacer() [...] 确保 [s] 视图之间的空白空间大小相等

这正是我建议将Text("Between top and center") 提取为子视图的原因。然后，您可以只在一处更改视图的字体、大小等。

修改后的解决方案是：

struct ContentView: View {
    var body: some View {
        ZStack {
            VStack {
                Spacer()
                subview
                Spacer()
                Spacer()
                subview
                    .opacity(0)
                Spacer()
            }
            VStack {
                Spacer()
                Text("Center")
                Spacer()
            }
        }
    }

    var subview: some View {
        Text("Between top and center")
            .font(.caption)
            // apply all other modifiers if you want
    }
}

【讨论】：

我的错 - 这不起作用。我以前已经尝试过这样的事情。问题是Spacer() 所做的很大程度上取决于视图（字体）的大小。它所做的只是确保视图之间的空白空间大小相等。它实际上并不能确保中心文本保持在中心。
@Daan 如果您让两个视图使用相同的字体（包括隐藏的字体），它确实有效。
这就是问题所在：我为居中和居中文本使用不同的字体大小，并且大小也会动态变化。所以相对位置不应该取决于字体大小。
@Daan 我明白了 - 请检查更新的答案。
谢谢。这不太有效，但您可以通过将第一个 VStack 中的第二个 subview 替换为 Spacer() 来修复它。

【解决方案2】：

这是可能的解决方案（使用 Xcode 12.1 / iOS 14.1 测试）

struct ContentView: View {
    var body: some View {
       VStack {
          Color.clear.overlay(
             Text("Between top and center") // << here !!
          )
//        Text("Between top and center")
//          .frame(maxWidth: .infinity, maxHeight: .infinity)  // alternate !!
          Text("Center")
          Color.clear
       }
    }
}

更新：添加了 .frame 的替代项，但仅当只有一个 Text 时才有效，而在 .overlay 中可以放置任何内容。

【讨论】：

谢谢，这行得通！不要太挑剔，而是一种类似简单的方法来实现这一点而不使用颜色元素？也许是frame？

【解决方案3】：

这是另一种使用 VStack Spacers 方法的解决方案，我还使用了一点填充让您更靠近中心。

    import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Top").bold()
                .foregroundColor(.blue)
            Spacer()
            Text("Your desired area")
            Spacer()
            Text("Middle Text").bold()
                .foregroundColor(.blue)
                .padding(.bottom, 200)
            Spacer()
                
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

【讨论】：

谢谢，但我无法对任何填充进行硬编码。它需要是相对中心，并且在顶部和中心之间是相对的。