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

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()
    }
}
评论
不是本人
不是本人

这是一个解决方案。已通过Xcode 11.4 / iOS 13.4测试。

demo

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)
    }
}
点赞
评论