在屏幕顶部和中心之间放置文本

Question

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

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

代码和截图如图：

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

Answer 1

这是可能的解决方案（使用 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 交替添加，但只有在只有一个文本时才有效，而在 .overlay 中可以随便放。

Answer 2

这里是另一个解决方案，使用了 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()
    }
}

Answer 3

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

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() [...] ensure[s] that the empty spaces between the views are equal in size

这正是我建议将 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
    }
}

在屏幕顶部和中心之间放置文本

Place text between top and center of the screen

view

ios

swiftui