SwiftUI如何实现带文本与图片的指定自定义样式按钮

目标效果参考 #

你需要实现的是图中第二个带深色边框、尺寸紧凑、文字旁带取消图标的Cancel按钮。原纯Text实现无法直接插入图片，直接用Button套HStack会出现尺寸过大的问题，核心原因是没有对齐原实现的修饰符层级、缺少图片尺寸约束、没有移除系统Button默认样式的干扰。

问题根因 #

• 原纯Text版本的修饰符是内边距→固定frame→背景→外层5pt边距→边框→圆角的层级，之前的Button实现把padding加在了最外层，层级错乱导致整体尺寸膨胀
• 自定义图片没有做尺寸适配，原生资源尺寸会撑大HStack布局
• 系统Button默认自带内边距和点击样式，没有显式移除的话会干扰自定义布局

可直接复用的实现代码 #

Button(action: {
    // 替换为你的按钮点击业务逻辑
}) {
    HStack(spacing: 4) { // 按需调整文字和图标间距，匹配视觉效果
        Text("Cancel")
            .font(.subheadline)
        Image("cross-cancel")
            .resizable()
            .scaledToFit()
            .frame(width: 12, height: 12) // 图标尺寸匹配文字大小，可微调
    }
    .foregroundColor(.white) // 统一设置文字、图标颜色，无需重复声明
    .padding()
    .frame(width: 100, height: 20) // 和原纯Text版本完全一致的内部内容尺寸
    .background(Color(red: 0 / 255, green: 94 / 255, blue: 149 / 255))
    .padding(5) // 外层留出5pt空间展示边框
    .border(Color(red: 0 / 255, green: 94 / 255, blue: 149 / 255), width: 5)
    .cornerRadius(15)
}
.buttonStyle(.plain) // 关键：移除系统Button默认的内边距、高亮样式干扰

关键调整说明 #

• 所有尺寸、颜色、圆角、边框参数完全对齐你原来的纯Text实现，不会出现视觉偏差
• 图标加了缩放和固定尺寸约束，不会因为图片资源本身大小撑乱布局
• 用.plain按钮样式屏蔽系统默认按钮的布局干扰，完全走自定义外观
• HStack的spacing参数可以根据视觉稿微调，控制文字和图标的间隔到最优效果

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