[英]SwiftUI Font scaling in a complex View
My goal is to make sure Text in a container to scale according to its parent.我的目标是确保容器中的文本根据其父级进行缩放。 It works well when the container only contains one Text view, as following:
当容器只包含一个 Text 视图时效果很好,如下所示:
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))
}
}
}
the result:结果:
However, when we have more complex View, we cant use same approach to automatically scale the text based on its parent size, for example:但是,当我们有更复杂的 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))
}
}
}
Simply adding these 3 modifiers:只需添加这 3 个修饰符:
.font(.system(size: 500))
.minimumScaleFactor(0.01)
.lineLimit(1)
.font(.system(size: 500))
.minimumScaleFactor(0.01)
.lineLimit(1)
wont produce result like the first example;不会像第一个例子那样产生结果; Text enlarged beyond the frame.
文本放大超出框架。 I did successfully, produce the result that I want by using GeometryReader then scale the font size based on
geometry.size.width
.我成功了,使用 GeometryReader 产生了我想要的结果,然后根据
geometry.size.width
缩放字体大小。 Is this the only approach for achieving the desired result in SwiftUI?这是在 SwiftUI 中实现预期结果的唯一方法吗?
Using GeometryReader
and a .minimumScaleFactor
modifier would probably the only way to scale text in a view.使用
GeometryReader
和.minimumScaleFactor
修饰符可能是在视图中缩放文本的唯一方法。 To have more control on sizing, one possible way is to provde the .frame
size from the parent view.要对大小进行更多控制,一种可能的方法是从父视图中提供
.frame
大小。
Scalable Text View可缩放的文本视图
GeometryReader { geo in
Text("Foo")
.font(
.system(size: min(geo.size.height, geo.size.width) * 0.95))
.minimumScaleFactor(0.05)
.lineLimit(1)
}
Parent View that uses the Scalable Text View使用可缩放文本视图的父视图
GeometryReader { geo in
ScaleableText()
.frame(width: geo.size.width, height: geo.size.height)
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.