SwiftUI 中 Text 使用方式详解与案例

Text 是一种用于展示只读类型的文本视图,通常界面中展示文本的地方都可以使用它来完成,本文代码使用 SwiftUI 4 版本。

struct ContentView: View {
    var body: some View {
        VStack {
            // Text组件常用 API 示例
            Text("Hello, world!")
            // 设置字体
            .font(.system(size: 16, weight: .light, design: .serif))
            // 字体粗细
            .fontWeight(.bold)
            // 粗字体
            .bold()
            // 斜体文本     italic(Bool)
            .italic()
            // 删除线
            // 删除线颜色:strikethrough(Bool, color: Color?)
            // 删除线样式: strikethrough(Bool, pattern: Text.LineStyle.Pattern, color: Color?)
            .strikethrough()
            // 下划线
            // 下划线颜色:underline(Bool, color: Color?)
            // 下划线样式: underline(Bool, pattern: Text.LineStyle.Pattern, color: Color?)
            .underline()
            // 数字使用等宽字体
            .monospacedDigit()
            // 文本字符间距
            .kerning(2)
            // 行间距
            .lineSpacing(4)
            // 字符附加点距
            .tracking(3)
            // 限制文本行数
            .lineLimit(3)
            // 文本超出视图是否允许压缩间距
            .allowsTightening(true)
            // 文本对齐方式
            .multilineTextAlignment(.center)
            // 文本超长截断方式  head, middle, tail  = 开头, 中间, 结尾
            .truncationMode(.tail)
            // 字体自适应大小, 支持按需缩小至0.5倍
            .minimumScaleFactor(0.5)
            // 文本颜色
            .foregroundColor(Color.blue)
            // 背景
            .background(Color.gray)
            // 模糊效果
            .blur(radius: 1)
            // 文本视图边框
            .border(Color.red, width: 1)
            // 文本视图尺寸
            .frame(width: 200, height: 40, alignment: .center)
            // 2D旋转: 中心旋转90度
            .rotationEffect(.degrees(90), anchor: .center)
            // 3D旋转: X轴旋转45度
            .rotation3DEffect(.degrees(45), axis: (x: 1, y: 0, z: 0))
            
        }
    }
}

  本文自 https://www.codeun.com 发布,相应代码均自主编写并严格审阅和测试,完整代码中包含丰富的学习笔记和使用方式、实用技巧。
  · 如若转载,请注明出处:https://www.codeun.com/archives/863.html ·

(0)
上一篇 2022-12-01 上午11:05
下一篇 2022-12-03 下午10:15

发表回复

登录后才能评论