Stefano Toppi
Stefano Toppi

Reputation: 656

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)

Upvotes: 4

Views: 1595

Answers (2)

Asperi
Asperi

Reputation: 258097

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

Upvotes: 11

could you try this setup:

        VStack {
            HStack(alignment: .center) {
                NavigationLink(destination: FullNewsListView(category: "Fitness")) {
                    HStack {
                        Text("Fitness")
                            //   .foregroundColor(Color("#29B1B3"))
                            .font(Font.custom("AvenirNextLTPro-Bold", size: 20))
                        Image("forward_blue")
                        Spacer()
                    }
                }
                Spacer()
            }.padding(.bottom, 10)
        }

....

Also .foregroundColor(Color("#29B1B3")) does not work for me.

Upvotes: 0

Related Questions