SwiftUI 如何在Button内部图片下方添加属于按钮可交互区域的文字

你遇到的问题是修饰符的添加位置错误导致的：之前你将背景、圆角等样式直接加在Button视图上，所以按钮的全部内容区域都会应用这些样式，文字自然也会被包裹在灰色背景内。

你只需要将图片专属的样式修饰符移动到Image视图上，再用VStack包裹Image和Text作为按钮的label即可，这样文字会展示在图片下方，且整体都属于按钮的可交互区域，实现你想要的效果：

Button {
    print("tapped")
} label: {
    // 垂直排列图片和文字，整体属于按钮交互区域
    VStack(spacing: 8) { // 可自行调整图片和文字的间距数值
        Image("Wand")
            .resizable()
            .frame(width: 100, height: 100)
            .background(Color.gray)
            .cornerRadius(20)
        // 下方的按钮文字
        Text("自定义按钮文字")
            .font(.title3)
            .foregroundColor(.black)
    }
}
// 如果需要扩大按钮的点击热区，可在此处添加padding修饰符
// .padding()

如果需要调整图片、文字的样式或者二者的间距，修改对应参数即可。

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