【SwiftUI基础篇】21 文本修饰器：字体、样式、布局

文字处理是我们开发中非常重要的一件事情，所以单独对文字的处理做一个介绍：

一、选择字体

1、func font(Font?) -> Text 设置视图中文本的默认字体。

下面的例子展示了将字体应用到单个视图和视图层次结构的效果。字体信息作为环境的一部分在视图层次结构中向下流动，并且保持有效，除非在单独的视图或视图容器的级别上被覆盖。

在这里，最外层的VStack应用一个16点的系统字体作为该VStack中包含的视图的默认字体。在这个堆栈中，这个例子只对第一个文本视图应用了Font/largeTitle字体;这将显式地覆盖默认值。剩余的堆栈和视图继续使用它们的包含视图设置的16点系统字体:

VStack {
    Text("使用一个大标题。")
        .font(.largeTitle)
    VStack {
        Text("这两个文本视图有相同的字体")
        Text("应用于它们的父层次结构")
    }
}
.font(.system(size: 16, weight: .light, design: .default))

2、func fontWeight(Font.Weight?) -> Text 设置文本的字体粗细。

3、struct Font 与环境有关的字体。

二、文本样式

func foregroundColor(Color?) -> Text 设置此视图显示的文本的颜色。

func bold() -> Text 将粗体字体粗细应用于文本。

func italic() -> Text 对文本应用斜体。

func strikethrough(Bool, color: Color?) -> Text 对文本应用删除线。

func underline(Bool, color: Color?) -> Text 在文本上加上下划线。

func kerning(CGFloat) -> Text 设置字符之间的间距或字距。

func tracking(CGFloat) -> Text 设置文本的跟踪。

func baselineOffset(CGFloat) -> Text 设置文本相对于基线的垂直偏移量。

func textCase(Text.Case?) -> some View 为显示时包含在此视图中的文本的大小写设置转换。

enum Case 一种用于转换文本中字符大写的方案。

三、多行文本处理

func lineLimit(Int?) -> some View 设置文本在此视图中可占用的最大行数。

func lineSpacing(CGFloat) -> some View 设置此视图中各行之间的间距。

func multilineTextAlignment(TextAlignment) -> some View 设置此视图中多行文本的对齐方式。

enum TextAlignment 在给定锚点类型的范围内将子视图对齐

Text("网络人")
    .tracking(10)//设置文本的跟踪。
    .kerning(10)//设置字符之间的间距或字距。
    .blur(radius: 1)//对这个视图应用高斯模糊。

Text("SwiftUI是一种创新的、非常简单的方式，利用Swift的强大功能在所有苹果平台上构建用户界面。SwiftUI is an innovative, exceptionally simple way to build user interfaces across all Apple platforms with the power of Swift.")
    .lineSpacing(20)//设置此视图中文本行的间距。
    .lineLimit(nil)//设置文本在此视图中可以占用的最大行数。
    .multilineTextAlignment(.center)//设置此视图中多行文本的对齐方式。

四、文本的空间利用方式

func allowsTightening(Bool) -> some View 设置此视图中的文本是否在必要时可以压缩字符之间的空格以使文本适合一行。

func minimumScaleFactor(CGFloat) -> some View 设置此视图中文本缩小到适合可用空间的最小数量。

func truncationMode(Text.TruncationMode) -> some View 为太长而无法容纳可用空间的文本行设置截断模式。

enum TruncationMode 当文本行太长而无法容纳在可用空间中时，截断的类型。

五、文本合并 +

static func + (Text, Text) -> Text 在新文本视图中的两个文本视图中合并文本。

Text("网络人")
    .foregroundColor(.yellow)
    .fontWeight(.heavy)
    + Text("www.55mx.com ")
    .foregroundColor(.orange)
    .strikethrough()
    + Text("MrGuo")
    .foregroundColor(.red)
    .italic()
    + Text("Kwok")
    .foregroundColor(.purple)
    .underline()

六、文本视图的比较

static func == (Text, Text) -> Bool 返回一个布尔值，该值指示两个值是否相等。

static func != (Self, Self) -> Bool 

七、常用的文本修饰使用

Text("www.55mx.com")
    .bold()//加粗
    .italic()//斜体
    .underline(true, color: .orange)//true=有下划线，color线条颜色
    .strikethrough(true, color: .red)//true=添加删除线，color线条颜色
    .baselineOffset(CGFloat(5.0))//设置文本相对于其基线的垂直偏移量。
    .fontWeight(Font.Weight.heavy)//设置文本的字体粗细。

 八、遍历内置的字体属性

你可以通过下面的代码将系统内置的字体遍历以方便查看：

struct FocusView: View {
        //内置的字体粗细
    let weight:[Font.Weight] = [.heavy,.black,.bold,.semibold,.medium, .regular,.light,.ultraLight,.thin]
        //还不知道怎样获取Font.Weight的变量名字，所以下面重新定义了String
    let weightName:[String] = ["heavy","black","bold","semibold","medium","regular","light","ultraLight","thin"]
        //内置的字体样式
    let font:[Font] = [.title,.body,.callout,.headline,.subheadline,.caption,.caption2,.footnote]
        //和Font.Weight一样，不知道怎样获取Font的名字
    let fontName:[String] = ["title","body","callout","headline","subheadline","caption","caption2","footnote"]
        //随机返回一个系统颜色
    var randomColor:Color{[.red,.black,.orange,.purple,.yellow,.gray,.green,.black,.pink,.primary].randomElement()!}
    var body: some View {
        NavigationView{
            List{
                ForEach(0 ..< font.count){ i in
                    Section(header: Text("使用： .＼(fontName[i]) 的字体样式")){
                        ForEach(0 ..< weight.count){ ii in
                            Text("使用Weight: .＼(weightName[ii])")
                                .font(font[i])
                                .fontWeight(weight[ii])
                                .foregroundColor(randomColor)
                        }
                    }
                }
                .navigationTitle("系统内置字体样式")
                .navigationBarTitleDisplayMode(.automatic)
            }
        }
    }
}

除非注明，网络人的文章均为原创，转载请以链接形式标明本文地址：https://www.55mx.com/post/135