1

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

我应该在 navigationLink 的每个新闻卡片中添加一个喜欢/不喜欢的按钮，而不是被带到 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")
                                }
                            }
                        }
                    }
                }
            }
        }
    }

目前，按钮操作（喜欢/不喜欢）将不会执行，因为每当按下按钮时，navigationLink 会将您带到目标视图。我已经尝试过这个几乎相同的问题，但它无法解决这个问题。

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

谢谢。

4

2 回答 2

2

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

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

于 2020-12-14T20:29:04.770 回答
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 \($0 + 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)
                }
            }
        }
    }
  }
}
于 2020-05-01T18:20:30.770 回答