Home > Software engineering >  Swift/SwiftUI: Background image blocks out image and text
Swift/SwiftUI: Background image blocks out image and text

Time:10-29

When I use this code, the background works fine, but the other image, text and title are completely blocked out by it.

struct MainView: View {
    var body: some View {
        VStack(alignment: .leading, spacing: -4.0) {
            Image("acdemo")
            //background
                .edgesIgnoringSafeArea(.all)
                .blur(radius: /*@START_MENU_TOKEN@*/40.0/*@END_MENU_TOKEN@*/)
                
            
            Image("acdemo")
                .renderingMode(.original)
                    .resizable(capInsets: EdgeInsets(top: 0.0, leading: 0.0, bottom: 0.0, trailing: 0.0))
                    .aspectRatio(contentMode: .fit)
                    .frame(width: 300.0, alignment: .top)
                    .cornerRadius(/*@START_MENU_TOKEN@*/40.0/*@END_MENU_TOKEN@*/)
                    .shadow(radius: /*@START_MENU_TOKEN@*/4/*@END_MENU_TOKEN@*/)
            Spacer()
                .frame(height: 30)
            Text("Title")
                .font(.title)
                .fontWeight(.bold)
                .foregroundColor(Color.white)
                .multilineTextAlignment(.leading)
                .padding(.leading, 6.0)
                .shadow(radius: /*@START_MENU_TOKEN@*/4/*@END_MENU_TOKEN@*/)
            Text("Artist")
                .font(.title)
                .fontWeight(.regular)
                .foregroundColor(Color.white)
                .multilineTextAlignment(.leading)
                .padding(.leading, 6.0)
                .shadow(radius: /*@START_MENU_TOKEN@*/4/*@END_MENU_TOKEN@*/)
        }
                
    }
}

It's probably a very simple fix, I'm very new to Swift.

CodePudding user response:

Try it like that:

struct MainView: View {
var body: some View {
    ZStack {
        Image("acdemo")
        //background
            .edgesIgnoringSafeArea(.all)
            .blur(radius: /*@START_MENU_TOKEN@*/40.0/*@END_MENU_TOKEN@*/)
        VStack(alignment: .leading, spacing: -4.0) {
            Image("acdemo")
                .renderingMode(.original)
                .resizable(capInsets: EdgeInsets(top: 0.0, leading: 0.0, bottom: 0.0, trailing: 0.0))
                .aspectRatio(contentMode: .fit)
                .frame(width: 300.0, alignment: .top)
                .cornerRadius(/*@START_MENU_TOKEN@*/40.0/*@END_MENU_TOKEN@*/)
                .shadow(radius: /*@START_MENU_TOKEN@*/4/*@END_MENU_TOKEN@*/)
            Spacer()
                .frame(height: 30)
            Text("Title")
                .font(.title)
                .fontWeight(.bold)
                .foregroundColor(Color.white)
                .multilineTextAlignment(.leading)
                .padding(.leading, 6.0)
                .shadow(radius: /*@START_MENU_TOKEN@*/4/*@END_MENU_TOKEN@*/)
            Text("Artist")
                .font(.title)
                .fontWeight(.regular)
                .foregroundColor(Color.white)
                .multilineTextAlignment(.leading)
                .padding(.leading, 6.0)
                .shadow(radius: /*@START_MENU_TOKEN@*/4/*@END_MENU_TOKEN@*/)
        }
    }
}

}

  • Related