Round corner swiftui

Question

Hi I have a question how do I round the edges of the Suggest view present in this swiftui ui? import SwiftUI

struct Topbar: View {
    var body: some View {
        ZStack(alignment: .trailing) {
            Text("Michele Rossi").padding(.top, 50)
                .frame(maxWidth: .infinity, alignment: .leading).padding()
                .font(Font.custom("Medium", size: 27)).foregroundColor(Color.white).padding(.top, 150)
            
            Text("Bentornato su MyEntzo").padding(.top, 80)
                .frame(maxWidth: .infinity, alignment: .leading).padding()
                .font(Font.custom("Medium", size: 22)).foregroundColor(Color.white).padding(.top, 200)
            
            Text("Non puoi accedere ai servizi di MyEntzo").padding(.top, 100).font(Font.headline.weight(.black))
                .frame(maxWidth: .infinity, alignment: .leading).padding()
                .font(Font.custom("Medium", size: 22)).foregroundColor(Color.white).padding(.top, 250)
        }
    }
}

struct Suggest: View {
    var body: some View {
        HStack {
            Text("SUGGERIMENTI\n\nCon la funzione di entrata tramite NFC non hai bisogno di selezionare quale sessione avviare")
                .frame(maxWidth: .infinity, alignment: .leading).padding()
                .font(Font.custom("Medium", size: 18)).foregroundColor(Color.white)
        }.background(Color(red: 57 / 255, green: 63 / 255, blue: 147 / 255)).frame(width: UIScreen.screenWidth - 50, height: 200)
    }
}

struct Sedi: View {
    var body: some View {
        HStack {
            Text("SUGGERIMENTI\n\nCon la funzione di entrata tramite NFC non hai bisogno di selezionare quale sessione avviare")
                .frame(maxWidth: .infinity, alignment: .leading).padding()
                .font(Font.custom("Medium", size: 18)).foregroundColor(Color.white)
        }.background(Color(red: 57 / 255, green: 63 / 255, blue: 147 / 255)).frame(width: UIScreen.screenWidth - 50, height: 200)
    }
}

struct TopBottom: View {
    @State private var isUnlocked = false
    
    func isPositionEnable() -> Bool {
        return checkPositionEnbaleUser()
    }
    
    var body: some View {
        VStack {
            RoundedRectangle(cornerRadius: 35)
                .fill(isPositionEnable() == false ? Color(red: 147 / 255, green: 57 / 255, blue: 63 / 255) : Color(red: 142 / 255, green: 89 / 255, blue: 238 / 255))
                .overlay(Topbar()
                )
                .frame(width: UIScreen.screenWidth, height: 500).padding(EdgeInsets(top: 0, leading: 0, bottom: UIScreen.screenHeight, trailing: 0))
        }
    }
}

struct FirstUiViewHome: View {
    var body: some View {
        TopBottom().overlay(Group {
            Suggest()
        })
    }
}

struct FirstUiViewHome_Previews: PreviewProvider {
    static var previews: some View {
        FirstUiViewHome()
    }
}

Answer 1

The problem is first you have to set text frame, then the background color and then cornerRadius modifier

struct Sedi: View {
var body: some View {
    HStack {
        Text("SUGGERIMENTI\n\nCon la funzione di entrata tramite NFC non hai bisogno di selezionare quale sessione avviare")
            .frame(maxWidth: .infinity, alignment: .leading).padding()
            .font(Font.custom("Medium", size: 18)).foregroundColor(Color.white)
    }
    .frame(width: UIScreen.screenWidth - 50, height: 200)
    .background(Color(red: 57 / 255, green: 63 / 255, blue: 147 / 255))
    .cornerRadius(30, corners: [.topLeft, .topRight])
  }
}

here is great extension for rounding corners

struct RoundedCorner: Shape {
var radius: CGFloat = .infinity
var cornerns: UIRectCorner = .allCorners

func path(in rect: CGRect) -> Path {
    let path = UIBezierPath(roundedRect: rect, byRoundingCorners: cornerns, cornerRadii: CGSize(width: radius, height: radius))
    return Path(path.cgPath)
  }
}
extension View {
func cornerRadius(_ radius: CGFloat, corners: UIRectCorner) -> some View 
   {
      clipShape(RoundedCorner(radius: radius, cornerns: corners))
   }
}