Question

我的问题是如何在不更改UI的情况下将NavigationLink添加到下面的代码。我尝试了几个小时，但不幸的是没有成功。因此，如果有人可以帮助我，那将是很好。我也找到了this，但不幸的是，答案对我没有用。也许我做错了事

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型字形还是自己样式的人字形。

要使用系统人字形：

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

顶部为人字形，底部使用您的人字形

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

2 个答案: