如何在 Swiftui 導航鏈接旁邊添加按鈕

Question

我正在制作一個簡單的清單應用程序，可讓您查看有關項目的更多詳細信息。 我希望能夠點擊復選框（圓圈按鈕）以刪除項目或單擊導航鏈接的 rest 以進入該單獨頁面。 這是我在導航視圖中嵌入列表的代碼：

List {
  ForEach(fruitIds, id: \.self) { fruitId in
    HStack {
      Button {
        fruitIds.removeLast()
        fruits.remove(at: fruitId)
      } label: {
        Image(systemName: "circle")
          .imageScale(.large)
          .foregroundColor(.accentColor)
      }
      NavigationLink(destination: Text(fruits[fruitId])) {
        Text(fruits[fruitId])
      }
    }
  }
} 

目前，按下按鈕或導航鏈接會將您帶到另一個屏幕，刪除該項目，然后將您送回列表。

我有這些 2 arrays 聲明 btw

@State var fruits: [String] = ["apple", "orange", "banana", "peach"]
@State var fruitIds: [Int] = [0, 1, 2, 3]

另外，我是 Swift 的新手，絕對有更好的方法來完成此列表。

Answer 1

我正在從這個答案中回答你的按鈕問題，所以請在此處給予信任。 也可以在.background()中使用帶有以編程方式觸發的NavigationLink的Button作為NavigationLink 。 讓它看起來像股票可能很棘手，這個解決方案可以滿足你的要求。 This 但是，您還詢問了列表，理解這個問題非常重要。

首先，如果可能的話，避免在List 、 ForEach等中使用id: \.self 。原因是它非常脆弱，當你嘗試刪除或移動項目時，或者如果你有列表中的兩個“相同”項目。 你真的應該為此使用可識別的結構。 對於這個答案，我正在使用：

struct Fruit: Identifiable {
    let id = UUID()
    var type: String
    // var color: Color, etc.
}

然后視圖變為：

struct FruitListView: View {
    
    //  This array can have duplicate fruits and the ForEach is unaffected as the id's are different.
    @State var fruits: [Fruit] = [Fruit(type: "apple"),
                                  Fruit(type: "orange"),
                                  Fruit(type: "orange"),
                                  Fruit(type: "banana"),
                                  Fruit(type: "banana"),
                                  Fruit(type: "peach")]
    
    var body: some View {
        List {
            // Since Fruit conforms to Identifiable, you do not need id:
            ForEach(fruits) { fruit in
                HStack {
                    Button {
                        fruits.removeAll(where: { $0.id == fruit.id })
                    } label: {
                        Image(systemName: "circle")
                            .imageScale(.large)
                            .foregroundColor(.accentColor)
                    }
                    .buttonStyle(PlainButtonStyle()) // This is necessary to capture the click
                    .frame(width: 40)
                    // .contentShape makes a larger tap area to take up the height of the row.
                    .contentShape(Rectangle())
                    // You can use fruit directly as it is a Fruit and an element of fruits
                    NavigationLink(destination: Text(fruit.type)) {
                        Text(fruit.type)
                    }
                }
            }
            // This is a standard delete. Try implementing it in your code. You will likely get a crash.
            .onDelete(perform: delete)
        }
    }
    
    func delete(at offsets: IndexSet) {
                fruits.remove(atOffsets: offsets)
    }
}