SwiftUI TextField在与NavigationPath一起使用时,神秘地破坏了导航动画。

huangapple go评论66阅读模式
英文:

SwiftUI TextField mysteriously breaks navigation animation when used with NavigationPath

问题

The animation issue you're encountering when showing the modal and then pushing the navigation stack may be related to SwiftUI's view hierarchy and state management. Here are some observations and potential solutions:

  1. TextField in the Modal: TextFields in SwiftUI can sometimes cause unexpected behavior when used inside modals. Changing it to a regular Text() might have resolved the animation issue because it doesn't trigger the same complex updates.

  2. NavigationPath() as a Published Variable: When you moved NavigationPath() to become a state of ContentView instead of a published variable in NavCordinator, it might have changed the timing of updates and resolved the issue. Published variables can cause SwiftUI to refresh views when they change, and the order of these updates can affect animations.

  3. StateObject for Sharing: You mentioned the need for NavCordinator to be a StateObject for sharing it across views. If this is necessary, you might need to experiment with different ways of managing the state to find a balance between sharing and animation stability.

It's possible that SwiftUI's view updating and state management are interacting in a way that causes the animation to break. Unfortunately, without access to a running code environment, it's challenging to provide a precise solution. You may need to further investigate and experiment with the code to find a suitable compromise that meets your requirements while maintaining animation stability.

英文:

MRE

enum HomeDestination: Int, CaseIterable, Hashable, Identifiable {
    case a
    var id: Int { rawValue }
    var name: String {
        switch self {
        case .a: return "A"
        }
    }
}

class NavCordinator: ObservableObject {
    @Published var navMenu = NavigationPath()
}

struct Popup : View {
    @State var text: String = ""
    var body: some View {
        VStack {
            TextField("Text", text: $text)
        }
    }
}
struct ContentView: View {
    @State private var selectedMenu: HomeDestination?
    @StateObject private var navCord: NavCordinator = NavCordinator()
    @State var showCreate = false

    var body: some View {
        NavigationSplitView {
            VStack {
                List(HomeDestination.allCases, selection: $selectedMenu) { menu in
                    NavigationLink(value: menu) {
                        Text(menu.name)
                    }
                }
                ZStack {
                    Button("Create") {
                        showCreate.toggle()
                    }
                }
            }
            .sheet(isPresented: $showCreate) {
                Popup()
            }

        } detail: {
            NavigationStack(path: $navCord.navMenu) {
                switch selectedMenu {
                case .a:
                    Text("A")
                case .none:
                    Text("hi")
                }
            }
        }
    }
}

If you run that code and show the modal first, and then try to push the nav stack you will see the animation breaks.

The animation will come back by changing one of the two changes:

  1. Change TextField to a regular Text() in the modal
    or
  2. Move the NavigationPath() to become a state of ContentView instead of a published variable

But I don't understand what is breaking it and how to fix it because I need it to be a stateObject (so that it can be shared to other views) and I also need TextField

答案1

得分: 0

以下是翻译好的部分:
在另一个论坛上提供了一个答案。 基本上,如果将.sheet移到NavigationSplitView的顶级,则此错误会消失。

英文:

An answer was provided in another forum. Basically this bug is gone if you move .sheet to the top level of NavigationSplitView

huangapple
  • 本文由 发表于 2023年5月14日 10:41:47
  • 转载请务必保留本文链接:https://go.coder-hub.com/76245598.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定