SwiftUI带图片按钮中如何在图片下方添加文本

你可以通过简化视图结构并使用更合理的布局方式替代负padding，以下是两种可行方案：

方案一：调整VStack的间距参数 #

直接通过VStack的spacing属性控制图片与文本的距离，比负padding更直观可控：

struct MainView: View {
    var body: some View {
        ZStack{
            Color(App_Color.background_color)
                .edgesIgnoringSafeArea(.all)
            
            Button(action: {}) {
                // 用单个VStack承载图片和文本，设置负间距让文本贴近图片底部
                VStack(spacing: -10) { 
                    Image("Image")
                        .resizable()
                        .frame(width: 120, height: 120)
                        .cornerRadius(30)
                    
                    Text("ZWIERZĘTA")
                        .foregroundColor(.orange)
                        .bold()
                        // .font(.custom("AmaticSC-Regular", size: 15))
                }
            }
        }
    }
}

方案二：用Spacer固定文本到按钮底部 #

如果需要文本始终处于按钮区域的底部，可通过固定VStack高度+Spacer的方式实现：

struct MainView: View {
    var body: some View {
        ZStack{
            Color(App_Color.background_color)
                .edgesIgnoringSafeArea(.all)
            
            Button(action: {}) {
                VStack(alignment: .center) {
                    Image("Image")
                        .resizable()
                        .frame(width: 120, height: 120)
                        .cornerRadius(30)
                    
                    // Spacer填充图片与文本间的剩余空间，将文本推到底部
                    Spacer()
                    
                    Text("ZWIERZĘTA")
                        .foregroundColor(.orange)
                        .bold()
                        // .font(.custom("AmaticSC-Regular", size: 15))
                }
                .frame(height: 150) // 设置按钮标签的总高度，按需调整
            }
        }
    }
}

额外优化建议 #

• 视图命名遵循Swift规范，将Main_view改为MainView（驼峰式命名）
• 移除原代码中多余的ZStack/VStack嵌套，减少布局层级，提升渲染效率

内容的提问来源于stack exchange，提问作者Mateusz Papież