如何在 SwiftUI 中的形状中有文字？

Question

我想在 SwiftUI 中的形状（例如方形）中添加文本（例如 Hi）并使它们充当单个对象。

看起来没有直接的方法可以在 SwiftUI 中添加形状中的文本。

Answer 1

使用 Swift 内置形状，例如Capsule()、RoundedRectangle()等。然后，您可以应用.overlay到形状。叠加层采用任何视图，例如text。

例子：

var body: some View {
    Capsule()
        .fill(Color.blue)
        .overlay(
            Text("Hello World")
        )
}

结果：

Answer 2

这是 IMO 最简单的方法：

通用架构

Text(_any_of_text_)
    .background(_any_of_Shape)

例如：

Text("Hello, World!")
    .background(Rectangle().stroke())

Text("Hello, World!")
    .background(RoundedRectangle(cornerRadius: 4).stroke())

Answer 3

这是我认为更全面的答案。这将从 Xcode 11.5 开始工作：

Text(question)
    .fixedSize(horizontal: false, vertical: true)
    .multilineTextAlignment(.center)
    .padding()
    .frame(width: 300, height: 200)
    .background(Rectangle().fill(Color.white).shadow(radius: 3))

笔记：

• fixedSize() 将让文本换行（因为 .lineLimit(nil) 不再有效）。如果您只想要一行带有省略号的文本，则可以省略它
• multilineTextAlignment() 允许您以任何方式居中或对齐文本
• padding() 给文本更多的空间来呼吸 Rectangle()
• frame() 设置 Text() 和 Rectangle() 的宽度和高度，因为它是 Text() 的背景
• background() 设置 Text() 背景的形状。我在这里也添加了填充颜色和阴影

这个例子的最终结果是文本看起来像形状一样出现在提示卡中！

Answer 4

创建一个新的 SwiftUI 视图并使用 Z-Stack 来创建您的目标。

struct YourCustomObject: View {

    var body: some View {
        ZStack {
            Rectangle()
                .fill(Color.secondary)
                .frame(width: 200, height: 200)

            Text("Your desired text")
                .foregroundColor(.white)
        }
    }
}