主页 / coding / 问题 / 77297852
Accepted
Curious Jorge
Asked: 2023-10-16 01:53:10 +0800 CST

如何在 SwiftUI 中裁剪文本而不是省略号（“...”）

  • 772

我很好奇，有人知道如何防止 SwiftUI 用省略号替换不适合视图的文本吗？我正在尝试重现 iOS 提醒应用中滑动删除控件的确切外观和感觉，如果你看看它的行为方式，你会发现它只是在没有足够的文本时裁剪文本充分展示它们的空间。当我尝试重现此内容时，文本被替换为省略号（“...”）。有没有办法改变这种行为？

这是它在“提醒”中的外观：

在此输入图像描述

这是我的版本的样子：

在此输入图像描述

这是我的版本的代码：

struct CroppedText: View {
    var text: String
    var color: Color
    var body: some View {
        Text(text)  // How to avoid the "..."?
            .lineLimit(1)
            .foregroundStyle(.white)
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .background(color)
    }
}

struct TripleText: View {
    @State private var totalWidth = 120.0
    
    var body: some View {
        VStack {
            HStack(spacing: 0) {
                CroppedText(text: "Details", color: .secondary)
                CroppedText(text: "Flag", color: .orange)
                CroppedText(text: "Delete", color: .red)
            }
            .frame(width: totalWidth, height: 50)
            
            HStack {
                Text("Width: ")
                Slider(value: $totalWidth, in: 1...300)
            }
        }
        .padding()
    }
}

想一想，解决方案似乎必须包括一种机制，以防止文本在可用空间中居中（如果空间太小）。这似乎指向一个涉及复杂ZStack而不是直接的解决方案HStack。.clipped()也许我们不会裁剪文本，而是主要对它们进行分层（尽管仍然需要顶层）。有什么建议么？

swiftui

1 个回答

  1. Best Answer

    您可以在隐藏的基础视图中建立足迹，然后在叠加层中显示实际文本。叠加层中的文本显示为.fixedSize()，这样可以防止其被省略号截断。如果没有足够的空间，它就会在帧末尾被切断。

    像这样：

    struct CroppedText: View {
    var text: String
    var color: Color
    var body: some View {
        Text(text)
            .lineLimit(1)
            .hidden()
            .overlay(alignment: .leading) {
                Text(text)
                    .lineLimit(1)
                    .fixedSize()
            }
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .foregroundStyle(.white)
            .background(color)
    }
}

    截断的

    编辑设置的框架maxWidth应该设置在覆盖之后，这样如果有任何剩余空间（显示短字符串时），结果仍然居中：

    你好

    • 1

相关问题