如何在不更改 UI 的情況下添加 NavigationLink？

Question

我的問題是如何在不更改 UI 的情況下將 NavigationLink 添加到下面的代碼中。 我嘗試了幾個小時，但不幸的是沒有成功。 因此，如果有人可以幫助我，那就太好了。 我也發現了這一點，但不幸的是，答案對我不起作用。 也許我做錯了什么

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])
    }
}

Answer 1

您可以將其包裹在 chevron_right 的圖像周圍。 所以你可以點擊它進入下一頁

  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))

                }
            }

Answer 2

您的 UI 發生巨大變化的原因是NavigationLink將其內容包裝在隱式HStack中，將您的Image放在HStack的左側。 您有幾個選擇，具體取決於您是要使用自動披露 V 形還是您自己的樣式。

要使用系統 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()
    }
}

如果你想要自己的：

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))
}

頂部是系統人字形，底部是你的