主页 / coding / 问题 / 79302255
Accepted
CalebK
Asked: 2024-12-23 13:48:43 +0800 CST

修改弹出窗口中的内容会导致奇怪的重新加载和滚动动画，而不是流畅的动画

  • 772

我正在尝试制作一个弹出窗口，其内容会根据上述选择动态扩展。我本来希望没有动画，或者理想情况下弹出窗口会逐渐扩展其新内容，但结果却像是我在弹出窗口中放置了一个滚动视图，您可以看到菜单重新加载。

有趣的是，如果您对按钮执行相同的操作，只是修改状态属性，则此动画不会发生。

我猜在某种意义上，我将动画系统与不稳定的 ID 混淆了，但我试过在所有内容上都放置 .id() 参数，但并没有解决问题。

在此处输入图片描述

struct DropdownTestView: View {
    @State var presentPopover: Bool = false
    @State var choice: Int = 0

    var body: some View {
        VStack {
            Button {
                presentPopover = true
            } label: {
                Text("Press To Choose")
            }
            .popover(isPresented: $presentPopover) {
                popoverView
                    .padding()
            }
            Spacer()
        }
        .padding()
    }

    var popoverView: some View {
        VStack(alignment: .leading) {
            Divider()

            Menu {
                ForEach(0..<6) { num in
                    Button {
                        choice = num
                    } label: {
                        Text("\(num)")
                    }
                }
            } label: {
                Text("Make A Choice")
            }

            if choice != 0 {
                Divider()
                HStack {
                    Text("WRONG CHOICE")
                }
            }
        }
        .frame(width: 220)
    }
}

我尝试过这样的事情：

HStack {
    Text("WRONG CHOICE")
}
.opacity(choice != 0 ? 1.0 : 0)
.frame(choice != 0 ? 30, 0)

但这也不起作用。

2 个回答

  1. 您需要将弹出框的内容更改为View结构体而不是计算变量，并在其中进行绑定。此外，将相关变量组合到它们自己的结构体中也是一个好主意。例如

    struct PopoverConfig {
    var isPresented = false
    var choice = 0
}

struct DropdownTestView: View {
    @State var popover = PopoverConfig()

    var body: some View {
        VStack {
            Button {
                popover.isPresented = true
            } label: {
                Text("Press To Choose")
            }
            .popover(isPresented: $popover.isPresented) {
                PopoverView(choice: $popover.choice)
                    .padding()
            }
            Spacer()
        }
        .padding()
    }
}

struct PopoverView: View {
    @Binding var choice: Int

    var body: some View {
        VStack(alignment: .leading) {
            Divider()

            Menu {
                ForEach(0..<6) { num in
                    Button {
                        choice = num
                    } label: {
                        Text("\(num)")
                    }
                }
            } label: {
                Text("Make A Choice")
                Text("Currently \(choice, format: .number)")
            }

            if choice != 0 {
                Divider()
                HStack {
                    Text("WRONG CHOICE")
                }
            }
        }
        .frame(width: 220)
    }
}
    • 1
  2. Best Answer

    内容大小的改变似乎立即生效，但弹出窗口大小的改变是动画效果。如果显示的锚点是 ，那就没问题了.top，但看起来它可能是这样的.center。

    解决方法是，尝试将弹出内容包装在 中ScrollView。ScrollView为高度变化提供“缓冲”：

    .popover(isPresented: $presentPopover) {
    ScrollView {
        popoverView
            .padding()
    }
}

    动画片

    附言：另一种解决方法是改用自定义弹出窗口。然后，您可以按照自己喜欢的方式设置弹出窗口的样式，还可以控制动画的工作方式。iOS SwiftUI 需要显示没有“箭头”的弹出窗口的答案提供了一个示例实现（这是我的答案）。

    • 1

相关问题