SwiftUI设置maxWidth后View自动占满宽度，如何让其仅占所需宽度？

解决方法 #

问题出在frame修饰符的应用位置——你把它加在了Button外层，导致按钮被强制占据最大宽度（180），不管内容实际需要多少空间。只需把frame(maxWidth: 180)移到Text层级，同时保留截断设置，就能实现“自适应宽度+最大宽度限制”的效果：

struct TestButton: View {
    let title: String

    var body: some View {
        Button {
            print(title)
        } label: {
            Text(title)
                .lineLimit(1)
                .frame(maxWidth: 180) // 将frame移到Text上
        }
        .background(.purple)
        .buttonStyle(PlainButtonStyle())
        .focusable()
    }
}

HStack {
    TestButton(title: "Bears")
    TestButton(title: "Battlestar Galactica")
}

原理说明 #

• 当frame(maxWidth: 180)作用于Text时，文本会在内容长度小于180时自适应宽度，超过180时自动截断并占据180宽度。
• Button会根据内部Text的实际尺寸调整自身大小，因此背景会精准包裹内容，不会出现多余空白。

如果需要让文本在按钮内左对齐（默认居中），可以给frame加上对齐参数：

.frame(maxWidth: 180, alignment: .leading)

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