如何让 SwiftUI 文本剪辑而不是用点截断 (...)

Question

在 SwiftUI 视图中，我Text在HStack. 根据用户输入，不会有水平空间来显示所有文本。在HStack不通过确保所有的IT工作精细Text元素得到同等宽度和字符串被截断。这一切都在预料之中，也应该如此。

问题是所有的字符串最后都用“...”截断，而我想要的行为UILabel.lineBreakMode = .byClipping，即字符串应该简单地在Text元素的边缘被切断。

我如何实现这一目标？

编辑有关我想要的更多详细信息：

import SwiftUI

struct TextClipPoC: View {
    var body: some View {
        HStack {
            textElm
            textElm
            textElm
            textElm
        }
    }

    var textElm: some View {
        Text("abcdefghijklmn")
            .padding(.all, 3)
            .background(Color.yellow)
    }
}

struct TextClipPoC_Previews: PreviewProvider {
    static var previews: some View {
        TextClipPoC()
            .previewLayout(.fixed(width: 320, height: 40))
    }
}

给出这个输出：

我想要与上面完全相同的输出，除了“...”我想要文本只是剪辑。

如果我只是按照解决方案中的建议添加.fixedSize()到HStack（或Text元素）中，我会得到以下结果：

Answer 1

一种解决方案是叠加两个相同的实例Text，一个固定大小和一个法线，让法线决定大小并将其隐藏，然后剪裁固定大小的一个。

可以通过以下方式完成ViewModfier：

struct FixedClipped: ViewModifier {
    func body(content: Content) -> some View {
        ZStack(alignment: .leading) {
            content.hidden().layoutPriority(1)
            content.fixedSize(horizontal: true, vertical: false)
        }
        .clipped()
    }
}

extension View {
    func fixedClipped() -> some View {
        self.modifier(FixedClipped())
    }
}

然后像这样使用：

struct TextClipPoC: View {
    var body: some View {
        HStack {
            textElm
            textElm
            textElm
        }
    }

    var textElm: some View {
        Text("abcdefghijklmn")
            .padding([.leading, .trailing], 3)
            .background(Color.yellow)
            .fixedClipped()
    }
}

struct TextClipPoC_Previews: PreviewProvider {
    static var previews: some View {
        TextClipPoC()
            .previewLayout(.fixed(width: 320, height: 40))
    }
}

这会产生以下结果：