How can I add a NavigationLink without changing my UI?

Question

My question is how I can add a NavigationLink to the code below without changing the UI. I tried around for a few hours, but unfortunately without success. So if someone could help me that would be nice. I also found this but unfortunately, the answers did not work for me. Maybe I did something wrong

import SwiftUI

struct ContentView: View {
    var body: some View {
        UITableView.appearance().separatorStyle = .none

        return NavigationView {
            List {
                CardView()
                    .listRowInsets(EdgeInsets())
            }
            .navigationBarTitle("Title")
        }
    }
}

struct CardView: View {
    var body: some View {
        VStack {
            // NavigationLink(destination: EmptyView()) {
                Image("Image")
                    .resizable()
                    .aspectRatio(contentMode: .fit)

                HStack {
                    VStack(alignment: .leading) {
                        Text("Title")
                            .font(.system(size: 20))
                            .fontWeight(.semibold)
                            .foregroundColor(.primary)
                            .lineLimit(3)
                        Text("Subtitle")
                            .font(.caption)
                            .foregroundColor(.secondary)
                    }
                    .layoutPriority(100)

                    Spacer()
                    Image(systemName: SFSymbolName.chevron_right)
                        .foregroundColor(.secondary)
                        .font(Font.body.weight(.semibold))
                }
                .padding([.leading, .bottom, .trailing], 16)
                .padding(.top, 5)
            // }
        }
        .background(Color("CustomCardViewColor"))
        .cornerRadius(10)
        .padding(.all, 0.1)
        .overlay(
            RoundedRectangle(cornerRadius: 10)
                .stroke(Color(.sRGB, red: 150/255, green: 150/255, blue: 150/255, opacity: 0.1), lineWidth: 1)
        )
        .padding([.top, .leading, .trailing])
    }
}

score 1 · Answer 1 · answered Nov 14 '19 at 21:01

You may just wrap it around the image of chevron_right. So you can click it to the next page

  HStack {
                VStack(alignment: .leading) {
                    Text("Title")
                        .font(.system(size: 20))
                        .fontWeight(.semibold)
                        .foregroundColor(.primary)
                        .lineLimit(3)
                    Text("Subtitle")
                        .font(.caption)
                        .foregroundColor(.secondary)
                }
                .layoutPriority(100)

                Spacer()
                NavigationLink.init(destination: Text("Temp Link")) {
                Image(systemName:  SFSymbolName.chevron_right)
                    .foregroundColor(.secondary)
                    .font(Font.body.weight(.semibold))

                }
            }

score 1 · Accepted Answer · answered Nov 14 '19 at 21:32

The reason your UI changes drastically is that NavigationLink wraps its content in an implicit HStack, placing your Image to the left of your HStack. You have a couple options, depending on whether you want to use the automatic disclosure chevron or your own styled one.

To use the system chevron:

HStack {
    VStack(alignment: .leading) {
        Text("Title")
            .font(.system(size: 20))
            .fontWeight(.semibold)
            .foregroundColor(.primary)
            .lineLimit(3)
        Text("Subtitle")
            .font(.caption)
            .foregroundColor(.secondary)
    }
    .layoutPriority(100)

    Spacer()

    // this simply places the chevron approximately where yours is
    NavigationLink(destination: EmptyView()) {
        EmptyView()
    }
}

If you want your own:

HStack {
    VStack(alignment: .leading) {
        Text("Title")
            .font(.system(size: 20))
            .fontWeight(.semibold)
            .foregroundColor(.primary)
            .lineLimit(3)
        Text("Subtitle")
            .font(.caption)
            .foregroundColor(.secondary)
    }
    .layoutPriority(100)

    Spacer()

    // this hidden NavigationLink makes the whole row clickable
    NavigationLink(destination: EmptyView()) {
        EmptyView()
    }.opacity(0)

    // your chevron is displayed
    Image(systemName:  SFSymbolName.chevron_right)
        .foregroundColor(.secondary)
        .font(Font.body.weight(.semibold))
}

The top is with the system chevron, the bottom uses yours

How can I add a NavigationLink without changing my UI?

2 Answers2