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

时间:2020-05-17 19:01:50

标签: swift xcode swiftui

xcode swiftui中下面的代码将生成之前屏幕,但是我想将“房屋”图像移动到“房屋”文本上方(请参见“后”屏幕),我有花了整整一天的时间,我不知道如何使它成为可能,如果有人愿意介入寻求帮助,将不胜感激!下面提供了完整的代码...

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 个答案:

答案 0 :(得分:0)

这是一个解决方案。在Xcode 11.4 / iOS 13.4上进行了测试。

demo


    const path = `${timestamp}`;

    const projectId = await auth.getProjectId();

    // we change the action for importDocuments
    const url = `https://firestore.googleapis.com/v1/projects/${projectId}/databases/(default):importDocuments`;
    const backup_route = `gs://${BUCKET_NAME}/${path}`;
    return client.request({
        url,
        method: 'POST',
        data: {
            inputUriPrefix: backup_route,
        }
    }).then(async (res: any) => {
        console.log(`Began backup restore from folder ${backup_route}`);
        return Promise.resolve(res.data.name);
    }).catch(async (e) => {
        return Promise.reject(new functions.https.HttpsError('internal', e.message));
    })