SwiftUI中截断文本出现意外前置内边距，如何消除？

这不是SwiftUI的Bug，是文本截断时的默认布局行为：当你给Text设了lineLimit(1)，又限制宽度导致文本被截断时，SwiftUI会自动给文本加一点横向内边距——目的是让省略号不会紧贴容器边缘，看起来更美观。但这个内边距会被Button继承，所以你才会看到按钮周围多出空间，单独的截断Text也会有同样问题。

解决办法 #

1. 修复单个截断Text的布局 #

给截断的Text加上.fixedSize(horizontal: false, vertical: true)和.clipped()，强制文本占满你设置的宽度，省略号会直接贴边缘，不会留额外空间：

Text("HI this is it")
    .lineLimit(1)
    .frame(width: 60, alignment: .leading)
    .fixedSize(horizontal: false, vertical: true)
    .clipped()

2. 调整自定义ButtonStyle的布局 #

你的TheButtonStyle里，需要让configuration.label（也就是内部的Text）占满按钮的可用宽度，避免它带着内边距撑大按钮。修改后的ButtonStyle：

public struct TheButtonStyle: ButtonStyle {
    public func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .frame(maxWidth: .infinity, alignment: .leading) // 强制文本占满按钮宽度
            .padding()
            .background {
                Color.gray
                    .cornerRadius(10)
                    .clipped()
            }
    }
}

同时，Button内部的Text也要用截断处理：

Button {
} label: {
    Text("Hello this is a biggggg ol button")
        .lineLimit(1)
        .fixedSize(horizontal: false, vertical: true)
}
.buttonStyle(TheButtonStyle())
.frame(width: 100)

3. 通用扩展（方便全局使用） #

如果经常遇到这个问题，可以写个Text的扩展，一键消除截断内边距：

extension Text {
    func noTruncationPadding() -> some View {
        self
            .lineLimit(1)
            .fixedSize(horizontal: false, vertical: true)
            .clipped()
    }
}

用的时候直接调用就行：

Text("Hello this is a biggggg ol button")
    .noTruncationPadding()

改完之后，不管是单独的Text还是按钮，截断时都不会有额外内边距，布局会严格贴合你设置的宽度。

内容的提问来源于stack exchange，提问作者CalebK