SwiftUI 入门教程:Text 渲染Markdown、选择文本和带图标的文本

1,095 阅读2分钟

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

渲染 Markdown

对于 SwiftUI 来讲,它是支持渲染 Markdown 文本的。基本功能包含:粗体、斜体、超链接等等。虽然,一般情况下我们遇不到在 Text 中渲染 Markdown 格式的需求,但了解一下也不是坏事,毕竟技多不压身嘛!

格式代码示例:

VStack {
    Text("Hello world!")
    Text("**Hello world!**")
    Text("*Hello world!*")
    Text("***Hello world!*** ")
    Text("~~Hello world!~~")
    Text("[Hello world!](link)")
}

效果显示: 截屏2022-04-02 上午9.20.20.png

可以看到上面的各种效果,超链接也是可以点击的。但需要注意的是,它并不支持 Image。

文本可选择

默认情况下,SwiftUI 的 Text 显示静态文本,不可选择。但你可以调用 .textSelection() 并传入 .enabled 来使文本可选择。

下面是代码示例:

Text("Hello world!") // 不可选择的文本
Text("Hello world!") // 可以选择的文本
    .textSelection(.enabled)

截屏2022-04-02 上午9.25.57.png

当文本被选择之后,操作系统会自动弹出一个弹框并显示 Copy、Share 两个选项。但是,现在你只能选择复制整个文本,而不能选择某些字符来复制。

你不仅可以在 Text 上来使用 .textSelection(),你还可以对多个文本同时设置可复制:

VStack {
    Text("Hello world!")
    Text("Hello world!")
        
}
.textSelection(.enabled)

上述代码可以使这两个 Text 都具有选择的能力。

你也可以对 List 来使用该属性:

List(0..<5) { index in
    Text("Row \(index)")
}
.textSelection(.enabled)

这样,每个 item 上的文本都可以复制。但是在这里有一点需要注意的是:在 List 上进行选择的时候,你需要直接按在文本上,而不是别的地方。

如何显示带 Icon 的文本

SwiftUI 有一个专用的视图类型,用于并排显示文本和图标,这对菜单、列表等特别有用。

对于简单的显示,你可以使用 SF Symbols:

Label("账号", systemImage: "folder.circle")

显示效果: 截屏2022-04-02 上午9.43.32.png

当然,你也可以使用自己项目的 image:

Label("Welcome to the app", image: "star")

你也可以用 font 来对文本和图标进行缩放:

Label("账号", systemImage: "folder.circle")
            .font(.title)

放大后的显示效果:

截屏2022-04-02 上午9.47.06.png