如何使用 NavigationLink 进行列表视图滑动操作
How to use NavigationLink for List view swipe action
我想知道如何将 NavigationLink 放入下面代码中的 swipeActions 部分。代码本身编译没有任何问题,但是当我点击“编辑”link 时没有任何反应。我的意图是通过点击“编辑”来显示另一个视图。
谢谢
var body: some View {
List {
ForEach(processes, id: \.id) { process in
NavigationLink(process.name!, destination: MeasurementsView(procID: process.id!, procName: process.name!))
.swipeActions() {
Button("Delete") {
deleteProcess = true
}.tint(.red)
NavigationLink("Edit", destination: ProcessView(procID: process.id!, procName: process.name!)).tint(.blue)
}
}
}
}
它不起作用,因为 swipeActions
上下文超出 NavigationView
。相反,我们可以使用相同的 NavigationLink
进行条件导航,具体取决于操作。
这是可能方法的简化演示 - 使目标有条件并使用 link 的编程激活。
测试 Xcode 13.2 / iOS 15.2
struct ContentView: View {
var body: some View {
NavigationView {
List {
ForEach(0..<2, id: \.id) {
// separate into standalone view for better
// state management
ProcessRowView(process: [=10=])
}
}
}
}
}
struct ProcessRowView: View {
enum Action {
case view
case edit
}
@State private var isActive = false
@State private var action: Action?
let process: Int
var body: some View {
// by default navigate as-is
NavigationLink("Item: \(process)", destination: destination, isActive: $isActive)
.swipeActions() {
Button("Delete") {
}.tint(.red)
Button("Edit") {
action = .edit // specific action
isActive = true // activate link programmatically
}.tint(.blue)
}
.onChange(of: isActive) {
if ![=10=] {
action = nil // reset back
}
}
}
@ViewBuilder
private var destination: some View {
// construct destination depending on action
if case .edit = action {
Text("ProcessView")
} else {
// just to demo different type destinations
Color.yellow.overlay(Text("MeasurementsView"))
}
}
}
我想知道如何将 NavigationLink 放入下面代码中的 swipeActions 部分。代码本身编译没有任何问题,但是当我点击“编辑”link 时没有任何反应。我的意图是通过点击“编辑”来显示另一个视图。 谢谢
var body: some View {
List {
ForEach(processes, id: \.id) { process in
NavigationLink(process.name!, destination: MeasurementsView(procID: process.id!, procName: process.name!))
.swipeActions() {
Button("Delete") {
deleteProcess = true
}.tint(.red)
NavigationLink("Edit", destination: ProcessView(procID: process.id!, procName: process.name!)).tint(.blue)
}
}
}
}
它不起作用,因为 swipeActions
上下文超出 NavigationView
。相反,我们可以使用相同的 NavigationLink
进行条件导航,具体取决于操作。
这是可能方法的简化演示 - 使目标有条件并使用 link 的编程激活。
测试 Xcode 13.2 / iOS 15.2
struct ContentView: View {
var body: some View {
NavigationView {
List {
ForEach(0..<2, id: \.id) {
// separate into standalone view for better
// state management
ProcessRowView(process: [=10=])
}
}
}
}
}
struct ProcessRowView: View {
enum Action {
case view
case edit
}
@State private var isActive = false
@State private var action: Action?
let process: Int
var body: some View {
// by default navigate as-is
NavigationLink("Item: \(process)", destination: destination, isActive: $isActive)
.swipeActions() {
Button("Delete") {
}.tint(.red)
Button("Edit") {
action = .edit // specific action
isActive = true // activate link programmatically
}.tint(.blue)
}
.onChange(of: isActive) {
if ![=10=] {
action = nil // reset back
}
}
}
@ViewBuilder
private var destination: some View {
// construct destination depending on action
if case .edit = action {
Text("ProcessView")
} else {
// just to demo different type destinations
Color.yellow.overlay(Text("MeasurementsView"))
}
}
}