ios - 复杂 View 中的 SwiftUI 字体缩放

Question

我的目标是确保容器中的文本根据其父级进行缩放。当容器只包含一个 Text View 时效果很好，如下所示:

import SwiftUI

struct FontScalingExperiment: View {
    var body: some View {
        Text("Hello World ~!")
            .font(.system(size: 500))
            .minimumScaleFactor(0.01)
            .lineLimit(1)
            .padding()
            .background(
                RoundedRectangle(cornerRadius: 20)
                    .fill(Color.yellow)
                    .scaledToFill()  
        )
    }
}

struct FontScalingExperiment_Previews: PreviewProvider {
    static var previews: some View {
        Group {
            FontScalingExperiment()
                .previewLayout(.fixed(width: 100, height: 100))
            FontScalingExperiment()
                .previewLayout(.fixed(width: 200, height: 200))
            FontScalingExperiment()
                .previewLayout(.fixed(width: 300, height: 300))
            FontScalingExperiment()
                .previewLayout(.fixed(width: 400, height: 400))
        }

    }
}

结果:



但是，当我们有更复杂的 View 时，我们不能使用相同的方法来根据其父大小自动缩放文本，例如:

import SwiftUI

struct IndicatorExperiment: View {
    var body: some View {
        VStack {
            HStack {
                Text("Line 1")
                Spacer()
            }
            Spacer()
            VStack {
                Text("Line 2")
                Text("Line 3")
            }
            Spacer()
            Text("Line 4")
        }
        .padding()
        .background(
            RoundedRectangle(cornerRadius: 20)
                .fill(Color.yellow)
        )
            .aspectRatio(1, contentMode: .fit)
    }
}

struct IndicatorExperiment_Previews: PreviewProvider {
    static var previews: some View {
        Group {
            IndicatorExperiment()
                .previewLayout(.fixed(width: 100, height: 100))
            IndicatorExperiment()
                .previewLayout(.fixed(width: 200, height: 200))
            IndicatorExperiment()
                .previewLayout(.fixed(width: 300, height: 300))
            IndicatorExperiment()
                .previewLayout(.fixed(width: 400, height: 400))
        }
    }
}

只需添加这 3 个修饰符:
.font(.system(size: 500)) .minimumScaleFactor(0.01) .lineLimit(1)
不会像第一个例子那样产生结果；文本放大超出框架。
我成功了，使用 GeometryReader 生成我想要的结果，然后根据 geometry.size.width 缩放字体大小.这是在 SwiftUI 中实现预期结果的唯一方法吗？

Answer 1

使用 GeometryReader和 .minimumScaleFactor修饰符可能是在 View 中缩放文本的唯一方法。为了更好地控制大小，一种可能的方法是提供 .frame父 View 的大小。
可缩放的 TextView

    GeometryReader { geo in
        Text("Foo")
            .font(
                .system(size: min(geo.size.height, geo.size.width) * 0.95))
            .minimumScaleFactor(0.05)
            .lineLimit(1)
    }

使用可缩放 TextView 的父 View

    GeometryReader { geo in
        ScaleableText()
            .frame(width: geo.size.width, height: geo.size.height)
    }