@State变量以较高的频率刷新视图时，导航栏/工具栏按钮无法正常工作

debugcn 发表于 Dev

沃尔克88

我注意到，当至少有一个@State变量经常刷新视图时，导航栏/工具栏按钮无法正常工作。

我创建了一个简单的应用程序对其进行测试。

在下面的代码示例中，您有3个触发模板的选项。在主视图中一个按钮，在工具栏中一个按钮，在导航栏中一个按钮。

当我的计时器未更新“数字”时，所有3个按钮均正常工作。当我启动计时器时，它将每隔0.1秒刷新一次视图，只有每次主视图中的按钮才会起作用。工具栏/导航栏中的按钮大部分时间都不起作用。（我的计时器的TimeInterval越短，按钮的作用就越少）

import SwiftUI

struct ContentView: View {

    @State private var number = 0
    @State private var showModal = false

    func startTimer() {
        Timer.scheduledTimer(withTimeInterval: 0.1, repeats: true) { (_) in
            number += 1
        }
    }

    var body: some View {

        NavigationView {
            VStack {
                Text("Count \(number)")
                Button(action: startTimer, label: {
                    Text("Start Timer")
                })

                Button(action: { showModal.toggle() }, label: {
                    Text("Open Modal")
                })
            }
            .navigationBarTitle("Home", displayMode: .inline)
            .navigationBarItems(leading:
                                    Button(action: {
                                        showModal.toggle()
                                    }, label: {
                                        Text("Open Modal")
                                    }))

            .toolbar {
                ToolbarItem(placement: .bottomBar) {
                    Button(action: {
                        showModal.toggle()
                    }, label: {
                        Text("Open Modal")
                    })
                }
            }
        }

        .sheet(isPresented: $showModal, content: {
            Text("Hello, World!")
        })

    }
}

有没有人知道是否有办法使两个按钮正常工作？

Xcode 12 beta 5和Xcode Xcode 11.6会发生此问题（没有工具栏，因为那里不可用）

他的脾气

number提供的变体中的状态会刷新整个视图，这是问题的结果，对于UI而言不是非常理想。

导航栏的解决方案（通常是好的样式）是将刷新部分分为独立视图，因此SwiftUI渲染引擎仅重建它。

经过Xcode 12b3 / iOS 14测试

struct TestOftenUpdate: View {

    @State private var showModal = false

    var body: some View {

        NavigationView {
            VStack {
                QuickTimerView()
                Button(action: { showModal.toggle() }, label: {
                    Text("Open Modal")
                })
            }
            .navigationBarTitle("Home", displayMode: .inline)
            .navigationBarItems(leading:
                                    Button(action: {
                                        showModal.toggle()
                                    }, label: {
                                        Text("Open Modal")
                                    }))

            .toolbar {
                ToolbarItem(placement: .bottomBar) {
                    Button(action: {
                        showModal.toggle()
                    }, label: {
                        Text("Open Modal")
                    })
                }
            }
        }

        .sheet(isPresented: $showModal, content: {
            Text("Hello, World!")
        })

    }
}

struct QuickTimerView: View {
    @State private var number = 0

    var body: some View {
        VStack {
            Text("Count \(number)")
            Button(action: startTimer, label: {
                Text("Start Timer")
            })
        }
    }

    func startTimer() {
        Timer.scheduledTimer(withTimeInterval: 0.1, repeats: true) { (_) in
            number += 1
        }
    }

}

Withtoolbar是另一个问题-即使没有计时器视图，在打开第一个工作表后它也不起作用，这就是为什么

如图所示，按钮布局已损坏且位于工具栏区域之外，这就是为什么命中测试失败的原因-这是应该报告的Apple缺陷。

解决方法1：

将工具栏放置在导航视图之外（在视觉上工具栏较小，但有时可能是合适的，因为按钮起作用了）

    NavigationView {
       // ... other code
    }
    .toolbar {
        ToolbarItem(placement: .bottomBar) {
            Button(action: {
                showModal.toggle()
            }, label: {
                Text("Open Modal")
            })
        }
    }

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。