swiftui - 如何获取每个字符在 SwiftUI 文本中的位置

Question

我的第一个想法是基于文本 + 运算符。似乎很容易，通过组合/一个字符/一个字符/检查部分结果的宽度来构建整个文本……不幸的是，我没有找到如何做的方法。所有已知的获取一些几何图形的技巧(alignmentGuide、GeometryReader、anchorPreferences ...)都可以用作 View 修饰符!这意味着 Text + 运算符不可用。简单地计算字符在 Text 中的位置作为 Text(String(Character)) 宽度的总和是行不通的，例如

Text("WAW")

和

HStack(spacing:0) { Text("W"); Text("A"); Text("W") }

宽度(如预期)不同。

最后我得到了(使用复制粘贴来检查)类似的东西

struct ContentView: View {
    @State var width: [CGFloat] = []
    let font = Font.system(size: 100)
    var body: some View {
        VStack {
            if width.isEmpty {
                text(t: Text("W").font(font), width: $width)
                text(t: Text("WA").font(font), width: $width)
                text(t: Text("WAW").font(font), width: $width)
                text(t: Text("WAWE").font(font), width: $width)
            } else {
                ZStack(alignment: .topLeading) {
                    Text("WAWE").font(font).border(Color.red)
                    Path { path in
                        path.move(to: CGPoint(x: 0, y: 0))
                        path.addLine(to: CGPoint(x: 0, y: 150))
                    }.stroke(lineWidth: 1)
                    Text("\(0)").rotationEffect(Angle(degrees: 90), anchor: .bottom)
                        .position(CGPoint(x: 0, y: 170))

                    ForEach(Array(width.sorted(by: <).enumerated()), id: \.0) { p in
                        ZStack {
                            Path { path in
                                path.move(to: CGPoint(x: p.1, y: 0))
                                path.addLine(to: CGPoint(x: p.1, y: 150))
                            }.stroke(lineWidth: 1)

                            Text("\(p.1)").rotationEffect(Angle(degrees: 90), anchor: .bottom).position(CGPoint(x: p.1, y: 170))
                        }
                    }
                }.padding()
            }
        }
    }
}
func text(t: Text, width: Binding<[CGFloat]>)->some View {
    let tt = t.background(
        GeometryReader{ proxy->Color in
            DispatchQueue.main.async {
                width.wrappedValue.append(proxy.size.width)
            }
            return Color.clear
        }
    )
    return tt.background(Color.yellow)
}

这个结果

哪个有效但非常骇人听闻的解决方案

我正在寻找更好的方法!

更新每个字符的中心

Answer 1

这种方法行不通。字符串的文本布局与单个字符的布局截然不同。您在此要解决的问题是字距调整，但您仍然需要处理连字、组合字符和字母形式(尤其是阿拉伯语)。文本在这里是错误的工具。

你真的不能在 SwiftUI 中做到这一点。您需要使用 CoreText (CTLine) 或 TextKit (NSLayoutManager)。

也就是说，这并不能保证与 Text 完全匹配。我们不知道 Text 做了哪些事情。例如，如果框架比预期的要小，它会收紧间距吗？我们不知道，也不能问(如果知道，这种方法将无法处理)。但 CoreText 和 TextKit 至少会为您提供可靠的答案，您可以使用它们自行布局与您生成的指标相匹配的文本。

---

虽然我不认为这种方法是您想要的方式，但代码本身可以改进。首先，我推荐一种偏好，而不是在 GeometryReader 内部调用异步。

struct WidthKey: PreferenceKey {
    static var defaultValue: [CGFloat] = []
    static func reduce(value: inout [CGFloat], nextValue: () -> [CGFloat]) {
        value.append(contentsOf: nextValue())
    }
}

您可以将宽度数据捕获到其中:

extension View {
    func captureWidth() -> some View {
        background(GeometryReader{ g in
            Color.clear.preference(key: WidthKey.self, value: [g.size.width])
        })
    }
}

这将在稍后通过 onPreferenceChange 读取:

    .onPreferenceChange(WidthKey.self) { self.widths = $0 }

作为字符串的助手:

extension String {
    func runs() -> [String] {
        indices.map { String(prefix(through: $0)) }
    }
}

有了这些，我们就可以编写一个捕获所有宽度但隐藏结果的 captureWidths() 函数:

func captureWidths(_ string: String) -> some View {
    Group {
        ForEach(string.runs(), id: \.self) { s in
            Text(verbatim: s).captureWidth()
        }
    }.hidden()
}

注意字体没有设置。这是故意的，它会这样称呼:

        captureWidths(string).font(font)

将 .font 应用于组，组将其应用于其中的所有文本。

另请注意此处使用了 verbatim(以及稍后在创建最终文本时)。默认情况下，传递给 Text 的字符串不是文字。它们是本地化 key 。这意味着您需要查找正确的本地化值来分解字符。这增加了一些复杂性，我假设您不想要，所以您应该明确地说这个字符串是逐字的(文字)。

一起:

struct WidthKey: PreferenceKey {
    static var defaultValue: [CGFloat] = []
    static func reduce(value: inout [CGFloat], nextValue: () -> [CGFloat]) {
        value.append(contentsOf: nextValue())
    }
}

extension View {
    func captureWidth() -> some View {
        background(GeometryReader{ g in
            Color.clear.preference(key: WidthKey.self, value: [g.size.width])
        })
    }
}

extension String {
    func runs() -> [String] {
        indices.map { String(prefix(through: $0)) }
    }
}

func captureWidths(_ string: String) -> some View {
    Group {
        ForEach(string.runs(), id: \.self) { s in
            Text(s).captureWidth()
        }
    }.hidden()
}

struct ContentView: View {
    @State var widths: [CGFloat] = []
    @State var string: String = "WAWE"

    let font = Font.system(size: 100)
    var body: some View {
        ZStack(alignment: .topLeading) {
            captureWidths(string).font(font)

            Text(verbatim: string).font(font).border(Color.red)
            Path { path in
                path.move(to: CGPoint(x: 0, y: 0))
                path.addLine(to: CGPoint(x: 0, y: 150))
            }.stroke(lineWidth: 1)
            Text("\(0)").rotationEffect(Angle(degrees: 90), anchor: .bottom)
                .position(CGPoint(x: 0, y: 170))

            ForEach(widths, id: \.self) { p in
                ZStack {
                    Path { path in
                        path.move(to: CGPoint(x: p, y: 0))
                        path.addLine(to: CGPoint(x: p, y: 150))
                    }.stroke(lineWidth: 1)
                    Text("\(p)").rotationEffect(Angle(degrees: 90), anchor: .bottom).position(CGPoint(x: p, y: 170))
                }
            }
        }
        .padding()
        .onPreferenceChange(WidthKey.self) { self.widths = $0 }
    }
}

不过，要了解该算法对于不简单的事物的表现如何:

在从右到左的文本中，这些划分是完全错误的。

请注意 T 框太窄了。那是因为在 Zapfino 中，Th 连字比字母 T 加字母 h 宽得多。 (公平地说，Text 几乎不能处理 Zapfino；它几乎总是会剪掉它。但关键是连字可以显着改变布局，并且存在于许多字体中。)