SwiftUI 入门教程:Text 多行对齐与数组的显示

1,601 阅读2分钟

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

多行对齐

如果 SwiftUI 的 Text 包含多行文本,默认情况下,这些文本是靠左对其的。如果你想改变这种对齐方式,可以使用 multilineTextAlignment()。它传入的也是一个枚举:

public enum TextAlignment {
    case leading
    case center
    case trailing
}
  • leading:文本靠左对齐,默认情况为此值。
  • center:文本居中对齐。
  • trailing:文本靠右对齐。 需要注意的是:这个左右并不是绝对意义上的左右,而是根据你的阅读方式来定的。比如你是从左往右读的,那 leading 代表的左边,而从右往左读的语言,比如阿拉伯语言,leading 则是代表右边。

multilineTextAlignment() 的代码示例:

Text("Hello, world!Hello, world!Hello, world!Hello, world!Hello, world!Hello, world!")
    .multilineTextAlignment(.center)

文本靠左对齐图示: 截屏2022-04-01 下午4.38.46.png

文本居中对齐图示: 截屏2022-04-01 下午4.39.04.png

文本靠右对齐图示: 截屏2022-04-01 下午4.39.24.png

如何显示数组

SwiftUI 的 Text 不仅可以显示单个文本,它还可以同时显示多个文本,通过 format 参数。但是,需要注意的是,它是在 iOS 15才被实现的,所以,如果是 iOS 14 或者 iOS 13 ,需要使用 formatter 这个参数。

对于 Text 显示数组这个需求,你可以使用 .list()

@State private var animals = ["cat", "dog", "fish"]
var body: some View {
    Text(animals, format: .list(type: .and))
}

代码解释:

  • 首先,声明一个数组用来存放想要显示的数据。
  • 使用 Text 的 format 参数,并调用 .list 传入拼接方式。

如果你的数组元素类型是数字类型,比如 integer,你需要指定具体的 member style,否则会报错:

@State private var animals = [1, 2, 3, 4]
var body: some View {
    Text(animals, format: .list(memberStyle: .number, type: .and))
}

报错: 截屏2022-04-01 下午5.02.58.png

或者,你想显示可以测量的数据,比如距离或者体重,可以使用 .measurement(),它可以自动显示你当前区域的单位。例如,如果你在内部以厘米为单位存储值,但用户在其设备上使用美国语言环境,iOS 则会根据值的大小自动以英尺或英寸为单位显示值。

struct ContentView: View {
    let length = Measurement(value: 225, unit: UnitLength.centimeters)

    var body: some View {
        Text(length, format: .measurement(width: .wide))
    }
}

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