Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

swiftui clipped not cut image

Hi I've a problem with image in SwiftUi, I've this layout: e

The image and fitness are cliccable but when i click on fitness open the page of image.

This is my code:

VStack {
    HStack(alignment: .center) {
        NavigationLink(destination: FullNewsListView(category: "Fitness")) {
            Text("Fitness")
                .foregroundColor(Color("#29B1B3"))
                .font(Font.custom("AvenirNextLTPro-Bold", size: 20))
            Image("forward_blue")
        }
        Spacer()
        }
    .padding(.bottom, 10)
    VStack(alignment: .leading, spacing: 10) {
        HStack {
            URLImage(URL(string: "http://myPhoto")!) { proxy in
                proxy.image
                    .renderingMode(.original)
                    .resizable()
                    .aspectRatio(contentMode: .fill)
                    .frame(minWidth: 0, maxWidth: .infinity)
                    .frame(height: 180)
                    .cornerRadius(12)
                    .clipped()

            }

        }
        HStack {
            Text(api.newsFitnessHome.news!.title)
                .foregroundColor(.black)
                .font(Font.custom("AvenirNextLTPro-Demi", size: 15))
                .opacity(0.8)
                .lineSpacing(5)
                .lineLimit(2)
                .fixedSize(horizontal: false, vertical: true)
            Spacer()
        }
    }
}
.padding(.horizontal, 30)
like image 264
Stefano Toppi Avatar asked Sep 05 '25 05:09

Stefano Toppi


1 Answers

Cannot test because no all components available, but I suppose this is due to image hit area, see below some assumptions

URLImage(URL(string: "http://myPhoto")!) { proxy in
    proxy.image
        .renderingMode(.original)
        .resizable()
        .aspectRatio(contentMode: .fill)
        .frame(minWidth: 0, maxWidth: .infinity)
        .frame(height: 180)
        .cornerRadius(12)
        .clipped()
        .contentShape(Rectangle())      // try this
}
//.contentShape(Rectangle())      // or here
like image 162
Asperi Avatar answered Sep 07 '25 19:09

Asperi