mercredi 30 novembre 2022

SwiftUI how to make UI Responsiv

UI on iPhone Pro Max here the UI is not in the right place

UI on iPhone Pro thats perfectly

Hello I am new to SwiftUI and have a question. I had to implement the UI with the Star and the Number Count. I did everything, but when I switch the phones my UI is miss placed depends on the iPhone I choose. How can I fix that ? I search in the Internet for Responsiveness in SwiftUI but it didn't really helped me. I thought also that SwiftUI does most of the Responsiveness because I know in UIKIT you have to declare the constraints by yourself. Thanks for helping me, the Code is below. I also have after the CustomerCardPoints an List which works perfectly but since I added the CustomerCardPoints there is a small space between the Views, if anybody has experience how can I fix that also? (Not Necessary)

var body: some View {
        VStack(spacing: 0) {
             
                shopModel.logo
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                    .frame(maxWidth: 200, maxHeight: 100)
                    .padding([.top, .leading, .trailing])
                
                Text(shopModel.name)
                    .fontWeight(.bold)
                    .padding()
                
            CustomerCardPoints()
            
            }


struct CustomerCardPoints: View {
    var body: some View {
            VStack(){
                ZStack() {
                    Image("Slice")
                        .resizable()
                        .aspectRatio(contentMode: .fit)
                        .frame(maxWidth: 180, maxHeight: 60)
                        .offset(x: 160, y: -127)
                    HStack(alignment: .firstTextBaseline) {
                        Text("22")
                            .font(.system(size: 19))
                            .fontWeight(.bold)
                            .foregroundColor(.white)
                            .offset(x: 237, y: -126)
                        Image("favoriten")
                            .resizable()
                            .aspectRatio(contentMode: .fit)
                            .frame(width: 110, height: 25)
                            .offset(x: 132, y: -120)
                        
                    }
                }
                
            }
        }
    }

Aucun commentaire:

Enregistrer un commentaire