想在swiftUI中实现下边的类似于富文本的样式,应该如何实现呢?
这里有2种方案:
- 使用+ Text 进行拼接
- 使用多个Text()进行单独的设置
下边我们来看,方案1如何实现,代码如下:
HStack {
Text("749")
.font(Font(UIFont.systemFont(ofSize: 22, weight: .bold)))
+ Text(" Days")
.font(Font(UIFont.systemFont(ofSize: 14, weight: .regular)))
+ Text(" 11")
.font(Font(UIFont.systemFont(ofSize: 22, weight: .bold)))
+ Text(" Hours")
.font(Font(UIFont.systemFont(ofSize: 14, weight: .regular)))
}
效果如下:
我们可以看到: 749 和days 是底部对齐的,不用我们再单独进行处理。
但是为什么我不把剩下的mins和secs一块都使用** + Text **来一块写上呢?因为由于拼接的太多,编辑器就不能识别类型会报错,所以,使用该方案是有局限性的。
优点: 文案是个整体,可以设置自适应大小,所有文案的字体会整体的缩小,比较美观,适用于少量的Text的拼接
缺点: 对拼接的长度有限制,不适用于太多的text的拼接
接下来看一下,方案2 的实现:
HStack(alignment: .bottom) {
Text("9")
.font(Font(UIFont.systemFont(ofSize: 22, weight: .bold)))
Text("Days")
.font(Font(UIFont.systemFont(ofSize: 14, weight: .regular)))
.padding(.bottom, 3)
Text("24")
.lineLimit(1)
.minimumScaleFactor(0.5)
.font(Font(UIFont.systemFont(ofSize: 22, weight: .bold)))
Text("Hours")
.lineLimit(1)
.minimumScaleFactor(0.5)
.font(Font(UIFont.systemFont(ofSize: 14, weight: .regular)))
.padding(.bottom, 3)
Text("59")
.lineLimit(1)
.minimumScaleFactor(0.5)
.font(Font(UIFont.systemFont(ofSize: 22, weight: .bold)))
Text("Mins")
.lineLimit(1)
.minimumScaleFactor(0.5)
.font(Font(UIFont.systemFont(ofSize: 14, weight: .regular)))
.padding(.bottom, 3)
Text("59")
.lineLimit(1)
.minimumScaleFactor(0.5)
.font(Font(UIFont.systemFont(ofSize: 22, weight: .bold)))
Text("Secs")
.lineLimit(1)
.minimumScaleFactor(0.5)
.font(Font(UIFont.systemFont(ofSize: 14, weight: .regular)))
.padding(.bottom, 3)
}
上述代码的效果:
满足我们的预期;
代码中几个需要注意的地方:
行号1 :alignment: .bottom; 是对堆栈中的布局进行设置,因为默认是居中对齐的,我们要底部对齐,所以设置为bottom
行号7:因为文字默认是有上下的空间的, 如果不加这个,效果就会是 数字比较靠上,不是跟英文对齐的,那么我们想要对齐就要对英文进行调整,调整到合适的位置
行号9:是限制文本最多1行,当然你还可以写2 、3、4... 其中nil代表不限行
行号10: 代表最小的文字缩放的比例,这样设置文字就能自适应大小,如果到达了缩放额最小比例还不能显示,他就会显示... 因为文字不能再小了,一般建议写成0.5 ,数值越小,表示文字可以越小