VStack 按钮中的图像和按钮标题

Posted 2023-02-24

【中文标题】VStack 按钮中的图像和按钮标题

【英文标题】：Image and Button title in VStack button

【发布时间】：2020-05-17 19:01:50

【问题描述】：

xcode swiftui 中的以下代码将生成 BEFORE 屏幕，但 我想将 House 图像移动到“Houses”文本上方（参见 AFTER 屏幕），我有花了一整天的时间，我无法弄清楚如何使它成为可能，如果有人愿意介入寻求帮助，将不胜感激！下面提供了完整的代码...

Before and After VStack button

import SwiftUI

struct LightGreenButton: View 
    var body: some View 
        VStack 

            Image(systemName: "house")
              .resizable()
              .frame(width: 50, height: 50, alignment: .center)
              //.opacity(0.6)
              .clipped()
              .foregroundColor(Color(#colorLiteral(red: 0.005, green: 0.4422248602, blue: 0.3870742321, alpha: 1)))
              .offset(x: 0, y: 0)


            Text("Houses")
                .font(.system(size: 20, weight: .semibold, design: .rounded))
                .frame(width: 150, height: 100)
                .foregroundColor(Color(#colorLiteral(red: 0.005, green: 0.4422248602, blue: 0.3870742321, alpha: 1)))
                .background(
                    ZStack 
                        Color(#colorLiteral(red: 0.6574724317, green: 0.8923466802, blue: 0.8671938181, alpha: 1))

                        RoundedRectangle(cornerRadius: 16, style: .continuous)
                            .foregroundColor(.white)
                            .blur(radius: 4)
                            .offset(x: -8, y: -8)

                        RoundedRectangle(cornerRadius: 16, style: .continuous)
                            .fill(
                                LinearGradient(gradient: Gradient(colors: [Color(#colorLiteral(red: 0.6574724317, green: 0.8923466802, blue: 0.8671938181, alpha: 1)), Color.white]), startPoint: .topLeading, endPoint: .bottomTrailing)
                        )
                            .padding(2)
                            .blur(radius: 1)
                    


                )

                .clipShape(RoundedRectangle(cornerRadius: 16, style: .continuous))
                .shadow(color: Color(#colorLiteral(red: 0.8696053624, green: 0.8697276711, blue: 0.8695667386, alpha: 1)), radius: 20, x: 20, y: 20)
                .shadow(color: Color(#colorLiteral(red: 1, green: 1, blue: 1, alpha: 1)), radius: 20, x: -20, y: -20)
        
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(Color(#colorLiteral(red: 0.9447055279, green: 0.954059048, blue: 0.954059048, alpha: 1)))
        .edgesIgnoringSafeArea(.all)
    


struct LightGreenButton_Previews: PreviewProvider 
    static var previews: some View 
        LightGreenButton()
    

【参考方案1】：

这里有一个解决方案。使用 Xcode 11.4 / ios 13.4 测试。

struct LightGreenButton: View 
    var body: some View 
        VStack 

            Image(systemName: "house")
              .resizable()
              .frame(width: 50, height: 50, alignment: .center)
              //.opacity(0.6)
              .clipped()
              .foregroundColor(Color(#colorLiteral(red: 0.005, green: 0.4422248602, blue: 0.3870742321, alpha: 1)))
              .offset(x: 0, y: 0)


            Text("Houses")
                .font(.system(size: 20, weight: .semibold, design: .rounded))
                .foregroundColor(Color(#colorLiteral(red: 0.005, green: 0.4422248602, blue: 0.3870742321, alpha: 1)))
        
        .frame(width: 150, height: 100)
        .background(
            ZStack 
                Color(#colorLiteral(red: 0.6574724317, green: 0.8923466802, blue: 0.8671938181, alpha: 1))

                RoundedRectangle(cornerRadius: 16, style: .continuous)
                    .foregroundColor(.white)
                    .blur(radius: 4)
                    .offset(x: -8, y: -8)

                RoundedRectangle(cornerRadius: 16, style: .continuous)
                    .fill(
                        LinearGradient(gradient: Gradient(colors: [Color(#colorLiteral(red: 0.6574724317, green: 0.8923466802, blue: 0.8671938181, alpha: 1)), Color.white]), startPoint: .topLeading, endPoint: .bottomTrailing)
                )
                    .padding(2)
                    .blur(radius: 1)
            )

            .clipShape(RoundedRectangle(cornerRadius: 16, style: .continuous))
            .shadow(color: Color(#colorLiteral(red: 0.8696053624, green: 0.8697276711, blue: 0.8695667386, alpha: 1)), radius: 20, x: 20, y: 20)
            .shadow(color: Color(#colorLiteral(red: 1, green: 1, blue: 1, alpha: 1)), radius: 20, x: -20, y: -20)
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(Color(#colorLiteral(red: 0.9447055279, green: 0.954059048, blue: 0.954059048, alpha: 1)))
        .edgesIgnoringSafeArea(.all)