SwiftUI 入门教程:Text 如何修改字体,颜色,行距等

3,238 阅读2分钟

一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第 5 天,点击查看活动详情

Text 不仅在外观方面给我们提供了非常多的属性来进行控制,而且它还旨在与 Apple 的核心技术来进行无缝连接,比如 Dynamic Type。

默认情况下,Text 使用的是 Body 这种动态类型。但是,你也可以使用其他的 size 和 weight 通过调用 .font(),比如下面的代码:

Text("Hello, world!Hello, world!Hello, world!Hello, world!Hello,")
    .font(.title)

body: 截屏2022-04-01 下午4.10.04.png

title: 截屏2022-04-01 下午4.09.54.png

如果你想修改静态文本的文字颜色,可以调用 .foregroundColor() 来进行设置:

Text("Hello, world!")
    .foregroundColor(.red)

截屏2022-04-01 下午4.12.05.png

除了可以设置文字的颜色,你也可以通过调用.background(),来设置整个文本的背景色:

Text("Hello, world!")
    .foregroundColor(.red)
    .background(Color.black)

截屏2022-04-01 下午4.14.54.png

这里有一点需要注意:对于 .foregroundColor() 的调用,我们可以看到提示代码是有参数的,而对于 .background() 代码并没有提示参数。

这是因为 SwiftUI 允许我们根据需求为文本设置颜色,但它必须总是简单的颜色。但对于背景来说,你可以在背景中放置不仅仅只有颜色,它可以放任何类型的视图:颜色、图形或者其他文本等等。

比如,你可以在背景里填充文字:

Text("Hello, world!")
    .foregroundColor(.red)
    .background(Text("Background"))

截屏2022-04-01 下午4.20.34.png

从上图可以看到,红色的文本下面是一个黑色的字符串。

除了修改字体、颜色、背景之外,我们也可以文本的行距来满足个性化的需求。

行距的默认值为 0,这意味着没有任何行间距。如果你想将行间距设置为别的值可以调用 .lineSpacing()

Text("Hello, world!Hello, world!Hello, world!Hello, world!Hello, world!Hello, world!")
    .foregroundColor(.red)
    .frame(width: 300)
    .lineSpacing(10)

行间距为 10 的文本: 截屏2022-04-01 下午4.24.57.png