我有以下代碼：
struct ButtonTapTest: View {
let items = [1, 2, 3]
var body: some View {
List {
ForEach(items, id:\.self) { item in
CellTestView()
}
}
}
}
struct CellTestView:View {
var body: some View {
VStack {
Button {
print("TOP")
} label: {
Image(systemName: "play.fill")
.font(.system(size: 40))
.foregroundColor(.red)
}
.border(.red)
Spacer()
Button {
print("BOTTOM")
} label: {
Image(systemName: "play")
.font(.system(size: 40))
.foregroundColor(.red)
}
.border(.yellow)
}
}
}
創建以下螢屏：
問題：
無論我在何處點擊CellTestView. 我希望單獨的按鈕動作單獨觸發，每個按鈕僅在其按鈕被點擊時觸發，而不是在我點擊單元格上的其他任何地方時觸發。
您可以在下面的 gif 中看到，我點擊 的位置無關緊要，無論我點擊CellTestView視圖的哪個位置，兩個按鈕操作都會觸發，并且“頂部”和“底部”日志同時觸發。
我該如何解決這個問題，以便單元格中的兩個按鈕獨立地接收點擊，并且僅當點擊位于相關按鈕內時？
uj5u.com熱心網友回復：
每當串列行中有多個按鈕時，您需要手動將按鈕樣式設定為.borderless或.plain。這是因為按鈕“適應”了它們的背景關系。根據檔案：
如果您在容器內創建一個按鈕，如List，則該樣式將決議為該容器內該特定平臺的按鈕的推薦樣式。
因此，當您的按鈕位于串列中時，其點擊目標會擴展以填充該行，您將獲得高亮影片。當您有超過 2 個按鈕時，SwiftUI 不夠智能，無法阻止這種副作用，因此您需要buttonStyle手動設定。
CellTestView()
.buttonStyle(.borderless)
結果：
uj5u.com熱心網友回復：
我解決這個問題的方法是將每個按鈕包裝在它自己的 VStack 或 HStack 中。
uj5u.com熱心網友回復：
當您有一個串列時，點擊串列行將觸發兩個按鈕。嘗試使用此代碼使每個“按鈕”等效，分別觸發。
struct CellTestView: View {
var body: some View {
VStack {
Image(systemName: "play.fill") .font(.system(size: 40)).foregroundColor(.red).border(.red)
.onTapGesture {
print("-----> playFill \(playFill)")
}
Spacer()
Image(systemName: "play") .font(.system(size: 40)).foregroundColor(.red).border(.yellow)
.onTapGesture {
print("--> play \(play)")
}
}
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/384662.html
上一篇：使用高階函式reduce時出錯