主页 / coding / 问题 / 78534663
Accepted
Whirlwind
Asked: 2024-05-26 16:15:02 +0800 CST

显示警报时如何防止列表行动画

  • 772

我试图防止出现警报后出现“向后滑动”动画。以下是可重现的代码：

struct ContentView: View {
    @State private var showingAlert = false

    var body: some View {
        List {
            Text("Archive")
                .swipeActions(edge: .trailing, allowsFullSwipe: false) {

                    Button {
                        showingAlert = true
                    } label: {
                        Image(systemName: "archivebox.fill")
                    }
                    .tint(.yellow)
                }
                .alert("Archive?", isPresented: $showingAlert) {

                    Button("Archive") {
                       showingAlert = true
                    }
                    Button("Cancel", role: .cancel) {
                        showingAlert = false
                    }
                } message: {
                    Text("Some message")
                }
        }
    }
}

它看起来是这样的：

动图示例

但我希望该行保持在原位，以便存档按钮可见，并在用户交互时以动画方式返回（如果他们选择取消或存档）。我想这可能吗？

1 个回答

  1. Best Answer

    在显示滑动操作时显示警报的一种方法是用覆盖层覆盖操作按钮，并使用它来触发警报。

    • AGeometryReader可用于检测行何时向左偏移。这是一种非常可靠的检测滑动动作何时显示的方法。
    • 当显示滑动操作时，覆盖层的占位符将添加到行的背景中。该占位符用作 的源.matchedGeometryEffect。
    • 覆盖层显示在占位符上方。通过将不透明度设置为 0.001，它实际上是不可见的，但仍然可以接受点击手势。（如果您想看到叠加层，请将不透明度更改为 0.1。）
    • 覆盖层拦截对底层按钮的点击手势。如果点击覆盖层，则会显示警报。
    • 几乎最困难的部分是找到一种方法，让滑动操作在警报解除时再次消失。一种可行的粗略技术是更改行的 id。这会导致它被替换，而不显示滑动操作。不透明度过渡是可能的，但（不幸的是）操作按钮不会以动画方式再次关闭。
    struct ContentView: View {
    @State private var showingAlert = false
    @State private var rowWithSwipeActions: UUID?
    @State private var rowId = UUID()
    @Namespace private var ns
    var body: some View {
        ZStack {
            List {
                Text("Archive")
                    .id(rowId)
                    .swipeActions(edge: .trailing, allowsFullSwipe: false) {
                        Button {} label: {
                            Image(systemName: "archivebox.fill")
                        }
                        .tint(.yellow)
                    }
                    .listRowBackground(
                        GeometryReader { proxy in
                            let minX = proxy.frame(in: .global).minX
                            HStack(spacing: 0) {
                                Color(.secondarySystemGroupedBackground)
                                    .frame(width: proxy.size.width)
                                if minX < 0 {
                                    Color.clear
                                        .frame(minWidth: 74)
                                        .matchedGeometryEffect(id: rowId, in: ns, isSource: true)
                                        .onAppear { rowWithSwipeActions = rowId }
                                        .onDisappear { rowWithSwipeActions = nil }
                                }
                            }
                        }
                    )
            }
            .alert("Archive?", isPresented: $showingAlert) {
                Button("Archive") {
                    withAnimation { rowId = UUID() }
                }
                Button("Cancel", role: .cancel) {
                    withAnimation { rowId = UUID() }
                }
            } message: {
                Text("Some message")
            }
            if let rowWithSwipeActions {
                Color.black
                    .opacity(0.001)
                    .onTapGesture {
                        showingAlert = true
                    }
                    .matchedGeometryEffect(id: rowWithSwipeActions, in: ns, isSource: false)
            }
        }
    }
}

    动画片

    • 1

相关问题