代码之家  ›  专栏  ›  技术社区  ›  billibala

SwiftUI-如何在VStack中完美对齐不同字体大小的多个文本?

  •  0
  • billibala  · 技术社区  · 4 年前

    Text of different font sizes

    我在一个VStack中有两个Text元素。它们被设置为不同的字体大小。

    如何使2个Text元素的第一个字形完全向左对齐?这可能吗?

    以下是代码片段:

    extension Font {
        static let countDownTitle: Font = Font.system(size: 46, weight: .regular, design: .rounded).leading(.tight)
    }
    
    struct MyView: View {
        var body: some View {
            VStack(alignment: .leading) {
                Text("Hello!!")
                Text("20.49").font(.countDownTitle)
            }
         }
    }
    
    0 回复  |  直到 4 年前
        1
  •  1
  •   Yrb    4 年前

    你在这里进行一个人工测试。记住,按比例字体中的每个字符占用不同的空间。当它们被布局时,它们被放在一个由字体设计师控制的空间中,而不是我们。你可以看到,这是你循环使用不同的数字。4号基本上是对的,但5号离得很远。这是你控制它的能力所缺乏的东西之一。

    虽然,我一点也不建议这样做,但你可以使用单空格字体和 .offset() :

    extension Font {
        static let countDownTitle: Font = Font(UIFont.monospacedSystemFont(ofSize: 46, weight: .regular))
    }
    
    struct MyView: View {
        var body: some View {
            VStack(alignment: .leading) {
                Text("Hello!!")
                Text("50.49").font(.countDownTitle)
                    .offset(x: -2.2, y: 0)
            }
         }
    }
    

    但是,这真的很丑陋。