为什么文本不能在屏幕的中心，为什么文本上方有很大的空间？答案

【问题标题】：Why the Text can’t be at the center of the screen and why there’s a huge space above the text?为什么文本不能在屏幕的中心，为什么文本上方有很大的空间？
【发布时间】：2021-12-22 12:09:31
【问题描述】：

我正在使用 SwiftUI，我的 HStack 文本与他们的 lastTextBaseline 对齐。

但是文本上方有一个巨大的空间，整个堆栈不能在屏幕的中心。

看起来像这样：

我的代码：

struct SwiftUIViewTest: View {
    var body: some View {
        GeometryReader{ geometry in
            ZStack{
                Rectangle()
                VStack(alignment: .center){
                    HStack(alignment: .lastTextBaseline){
                        Text("3")
                            .lineLimit(1)
                            .foregroundColor(Color.white)
                            .frame(width: nil, height: (geometry.size.height-10)/2.5, alignment: Alignment(horizontal: .center, vertical: .firstTextBaseline))
                            .font(.bold(.system(size: 100))())
                            .minimumScaleFactor(0.1)
                            .lineLimit(1)
                            .shadow(radius: 2)
                        Text("cups")
                            .foregroundColor(Color.white)
                            .font(.system(size: 12))
                            .shadow(radius: 2)
                    }
                    Text("next cup on")
                        .foregroundColor(Color.white)
                        .font(.system(size: 10))
                        .shadow(radius: 2)
                        .opacity(0.5)
                    Text("10 : 00")
                        .foregroundColor(Color.white)
                        .font(.system(size: 12))
                        .shadow(radius: 1)
                        .opacity(0.5)
                }
            }
            .ignoresSafeArea()
        }
    }
}

【问题讨论】：

标签： ios swift xcode swiftui

【解决方案1】：

现在，您将Text("3") 的高度明确设置为(geometry.size.height-10)/2.5。这比它需要的高度要高得多，这就是“文本上方的巨大空间”。

在这种情况下，您不仅不需要 frame 修饰符，也不需要 GeometryReader，因为它只是为您提供不需要的帧的测量值。

struct ContentView: View {
    var body: some View {
        ZStack{
            Rectangle()
            VStack(alignment: .center){
                HStack(alignment: .lastTextBaseline){
                    Text("3")
                        .lineLimit(1)
                        .foregroundColor(Color.white)
                        .font(.bold(.system(size: 100))())
                        .minimumScaleFactor(0.1)
                        .lineLimit(1)
                        .shadow(radius: 2)
                    Text("cups")
                        .foregroundColor(Color.white)
                        .font(.system(size: 12))
                        .shadow(radius: 2)
                }
                Text("next cup on")
                    .foregroundColor(Color.white)
                    .font(.system(size: 10))
                    .shadow(radius: 2)
                    .opacity(0.5)
                Text("10 : 00")
                    .foregroundColor(Color.white)
                    .font(.system(size: 12))
                    .shadow(radius: 1)
                    .opacity(0.5)
            }
        }
        .ignoresSafeArea()
    }
}

【讨论】：

我试图让字体大小按比例适应屏幕大小，就像我们在情节提要中所做的那样：为文本添加高度约束并设置最小字体大小。我看到其他人在 SwiftUI 中做同样的事情，它似乎工作正常……我现在该怎么做？
您明确将fontSize 设置为100。 frame 修饰符不会更改字体大小（除非您的字体被压缩以适应较小的大小）。您可以将GeometryReader 放回并使用它来计算fontSize 的数字（我不知道您的公式是什么），但它不会改变这个答案的重要部分，那就是“文本上方的巨大空间”是由您的 height 修饰符引起的。
好的。我将计算字体大小。谢谢。
当然——例如，如果您使用.font(.bold(.system(size: 4000))())，它将增长到屏幕可以容纳的最大尺寸。但是，您可能希望它更小——因此，您可以使用之前的 GeometryReader 测量/计算。