NavigationLink 项目区域内的 SwiftUI 按钮处于非活动状态

Question

我有一个列表项视图，它在导航链接中显示一些新闻卡片。

我应该在 navigationLink 的每个新闻卡片中添加一个 like/unlike 按钮，而不会被带到 NavigationLink.destination 页面。

它看起来像是一个大按钮中的一个小按钮。当您单击那个小的时，执行小的而不执行大的。（注意：点击区域被两个按钮覆盖，小的优先）（在javascript中，好像是.stopPropaganda）

这是我的代码：


    var body: some View {
        NavigationView {
            List {
                ForEach(self.newsData.newsList, id:\.self) { articleID in
                    NavigationLink(destination: NewsDetail(articleID: articleID)) {
                        HStack {
                            Text(newsTitle)

                            Button(action: {
                                self.news.isBookmarked.toggle()
                            }) {
                                if self.news.isBookmarked {
                                    Image(systemName: "bookmark.fill")
                                } else {
                                    Image(systemName: "bookmark")
                                }
                            }
                        }
                    }
                }
            }
        }
    }

目前，按钮操作 (like/dislike) 不会执行，因为无论何时按下按钮，navigationLink 都会将您带到目标视图。我已经试过this almost same question，但还是不能解决这个问题。

有没有办法让这成为可能？

谢谢。

Answer 1

此代码完全符合您的要求。

struct Artcle {
  var text: String
  var isBookmarked: Bool = false
}

struct ArticleDetail: View {
  var article: Artcle
  var body: some View {
    Text(article.text)
  }
}

struct ArticleCell: View {
  var article: Artcle
  var toggle: () -> ()
  @State var showDetails = false
  var body: some View {
    HStack {
        Text(article.text)
        Spacer()
        Button(action: {
            self.toggle()
        }) {
            Image(systemName: article.isBookmarked ? "bookmark.fill" : "bookmark").padding()
        }
        .buttonStyle(BorderlessButtonStyle())
    }
    .overlay(
        NavigationLink(destination: ArticleDetail(article: article), isActive: $showDetails) { EmptyView() }
    )
    .onTapGesture {
        self.showDetails = true
    }
  }
}

struct ContentView: View {

  @State var articles: [Artcle]

  init() {
    _articles = State(initialValue: (0...10).map { Artcle(text: "Article \([=10=] + 1)") })
  }

  func toggleArticle(at index: Int) {
    articles[index].isBookmarked.toggle()
  }

  var body: some View {
    NavigationView {
        List {
            ForEach(Array(self.articles.enumerated()), id:\.offset) { offset, article in
                ArticleCell(article: article) {
                    self.toggleArticle(at: offset)
                }
            }
        }
    }
  }
}

Answer 2

从 XCode 12.3 开始，魔术是添加 .buttonStyle(PlainButtonStyle()) 或 BorderlessButtonStyle 到按钮，当所述按钮与列表中的 NavigationLink 位于同一行时。

如果没有这个特殊的咒语，整个列表行在按下按钮时被激活，反之亦然（按钮在 NavigationLink 被按下时被激活）。

NavigationLink 项目区域内的 SwiftUI 按钮处于非活动状态

SwiftUI button inactive inside NavigationLink item area

ios

swift

swiftui

swiftui-navigationlink