4. SwiftUI学习之_富文本简单实现

想在swiftUI中实现下边的类似于富文本的样式，应该如何实现呢？

UI效果.png

这里有2种方案：

1. 使用+ Text 进行拼接
2. 使用多个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)))
        }

效果如下：

效果1.png

我们可以看到： 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)
                
            }

---

上述代码的效果：

效果2.png

满足我们的预期;

代码中几个需要注意的地方：
行号1 ：alignment: .bottom； 是对堆栈中的布局进行设置，因为默认是居中对齐的，我们要底部对齐，所以设置为bottom

行号7：因为文字默认是有上下的空间的, 如果不加这个，效果就会是 数字比较靠上，不是跟英文对齐的，那么我们想要对齐就要对英文进行调整，调整到合适的位置

行号9：是限制文本最多1行，当然你还可以写2 、3、4... 其中nil代表不限行

行号10： 代表最小的文字缩放的比例，这样设置文字就能自适应大小，如果到达了缩放额最小比例还不能显示，他就会显示... 因为文字不能再小了，一般建议写成0.5 ，数值越小，表示文字可以越小