Text的可定制参数

字体

通过.font方法可以设定Text字体
swiftUI提供了众多的系统字体可用。

extension Font {
    public static let largeTitle: Font
    public static let title: Font
    public static let title2: Font
    public static let title3: Font
    public static let headline: Font
    public static let subheadline: Font
    public static let body: Font
    public static let callout: Font
    public static let footnote: Font
    public static let caption: Font
    public static let caption2: Font
}

我们可以简单的设置系统自带的字体样式

 Text("系统字体")
      .font(.headline)

我们也可以自定义字体

Text("自定义字体")
      .font(Font.custom("PingFangSC-Regular", fixedSize: 20))

字体颜色

我们可以通过foregroundColor设定字体颜色如：

 Text("前景色")
      .font(.subheadline)
      .foregroundColor(.gray)

字重

我们可以通过fontWeight方法设定字重，一些系统的字重对象‘

@frozen public struct Weight : Hashable {
        public static let ultraLight: Font.Weight
        public static let thin: Font.Weight
        public static let light: Font.Weight
        public static let regular: Font.Weight
        public static let medium: Font.Weight
        public static let semibold: Font.Weight
        public static let bold: Font.Weight
        public static let heavy: Font.Weight
        public static let black: Font.Weight
}

具体的代码例子如：

Text("字重")
      .font(.body)
      .fontWeight(.semibold)

粗体、斜体、下划线、删除线

我们可以给Text设定一些特殊的样式，例如粗体、斜体、下划线、删除线
代码分别如下：

Text("粗体")
      .font(.body)
      .bold()
            
Text("下划线")
      .font(.body)
      .underline()
            
Text("italic(只支持英文)")
      .font(.body)
      .italic()
            
Text("删除线")
      .font(.body)
      .strikethrough()

字距、字距调整、行间距

Text相比Label要爽的多，UILabel如果调整字间距或者行间距需要借助AttrbiutedString。而Text这些简单的设定提供了简单的API尤其是对行间距和字间距的设定，解决了一个巨大的痛点。
一些具体的代码：

Text("字间距")
      .tracking(5.0)
      .background(Color.red)

Text("字距调整")
      .kerning(5.0)
      .background(Color.red)

Text("行间距\n行间距")
       .lineSpacing(2)

不过目前没有搞明白字距（tracking）和字距调整（kerning）的区别，这两个配置表现效果几乎是完全一致的。

最大行数

可以通过lineLimit设定最大行数

Text("最大两行\n最大两行\n最大两行")
      .lineLimit(2)

其他基本的设定

还有一些遵循View的基本设定如下：

Text("内间距")
    .padding(10)
    .background(Color.red)
            
Text("基准线偏移")
      .baselineOffset(10)
      .background(Color.red)

测试代码及其效果截图

struct TextViewTestView: View {
    var body: some View {
        VStack(alignment: .center, spacing: 10, content: {
            
            Text("系统字体")
                .font(.headline)
            
            Text("自定义字体")
                .font(Font.custom("PingFangSC-Regular", fixedSize: 20))
            
            Text("前景色")
                .font(.subheadline)
                .foregroundColor(.gray)
            
            Text("背景色")
                .font(.body)
                .foregroundColor(.red)
                .background(Color.green)
            
            Text("字重")
                .font(.body)
                .fontWeight(.semibold)
            
            Text("粗体")
                .font(.body)
                .bold()
            
            Text("下划线")
                .font(.body)
                .underline()
            
            Text("italic(只支持英文)")
                .font(.body)
                .italic()
            
            Text("删除线")
                .font(.body)
                .strikethrough()
        })
    }
}

struct TextViewTestView2: View {
    @State private var textContent = "点击之前"
    
    var body: some View {
        VStack (alignment: .center, spacing: 10, content: {
            Text("字间距")
                .tracking(5.0)
                .background(Color.red)
            
            Text("行间距\n行间距")
                .lineSpacing(2)
            
            Text("最大两行\n最大两行\n最大两行")
                .lineLimit(2)
            
            Text("内间距")
                .padding(10)
                .background(Color.red)
            
            Text("基准线偏移")
                .baselineOffset(10)
                .background(Color.red)
            
            Text("字距调整")
                .kerning(5.0)
                .background(Color.red)
            
            Text(self.textContent)
                .onTapGesture(count: 1, perform: {
                    self.textContent = "点击之后"
                })
        })
    }
}

struct TextViewTestView_Previews: PreviewProvider {
    static var previews: some View {
        TextViewTestView()
        TextViewTestView2()
    }
}

截屏2020-10-01 下午10.20.11.png

截屏2020-10-01 下午10.20.21.png

一个demo

代码

struct ContentView: View {
    var body: some View {
        Text("Here's to the crazy ones")
            .font(.largeTitle)
            .background(Color.blue)
            .foregroundColor(.white)
            .lineSpacing(5)
            .padding(.all, 10)
            .border(Color.blue, width: 5) //描边
            .rotationEffect(.init(degrees: 45), anchor: .center) //旋转45度
            .blur(radius: 1) //模糊
    }
}

24489-94749d274de02302.png

SwiftUI学习(5)-Text