问题描述
我注意到,当至少有一个@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
}
}
}
使用 toolbar
是另一个问题-即使在没有计时器视图的情况下,在打开第一张工作表后也无法使用,这就是原因
可以看到按钮布局已损坏并且位于工具栏区域之外,这就是为什么点击测试失败的原因-这是应该报告的Apple缺陷。
解决方法1:
将工具栏放置在导航视图之外(在视觉上工具栏较小,但有时可能是合适的,因为按钮可以正常工作
NavigationView {
// ... other code
}
.toolbar {
ToolbarItem(placement: .bottomBar) {
Button(action: {
showModal.toggle()
},label: {
Text("Open Modal")
})
}
}