SwiftUI按钮背景图适配文本：解决背景过大问题

你的问题核心是背景图没有被文本区域的尺寸约束，导致按钮被原图尺寸撑大。以下是两种可行的修正方案：

方案一：使用 background 修饰符（推荐） #

通过给文本设置合适的内边距，让背景图跟随文本的尺寸自适应，同时用 clipped() 裁剪超出部分：

Button(action: {}) {
    Text("Button hi how are you how are you")
        .padding(.horizontal, 20) // 控制水平方向的留白
        .padding(.vertical, 12)   // 控制垂直方向的留白
}
.background(
    Image("yellow")
        .resizable()
        .scaledToFill()
)
.clipped() // 裁剪超出文本布局区域的图片内容

方案二：使用 ZStack 嵌套 #

让图片填充整个 ZStack（ZStack 的尺寸由内部 Text 决定），同样通过 clipped() 处理溢出：

Button(action: {}) {
    ZStack {
        Image("yellow")
            .resizable()
            .scaledToFill()
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .clipped()
        
        Text("Button hi how are you how are you")
            .padding(.horizontal, 20)
            .padding(.vertical, 12)
    }
}

额外提示 #

如果背景图是带圆角的样式，可以在 clipped() 后添加 .cornerRadius(8)（数值按需调整），让按钮样式更自然。调整 Text 的 padding 参数可以灵活控制背景图包裹文本的松紧程度。

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