SwiftUI TabView图标强调色高亮延迟:Sheet关闭后卡顿
问题:拖拽关闭Sheet后Tab图标高亮延迟
我实现了一个包含2个项目的TabView,第一个项目的NavigationStack工具栏右侧有一个按钮,点击该按钮会打开Sheet模态视图。当拖拽关闭该Sheet时,对应Tab的心形图标的高亮状态会出现延迟。
原代码:
struct ContentView: View { @State private var showSheet = false var body: some View { TabView { NavigationStack { Text("First Tab") .toolbar { ToolbarItem(placement: .topBarTrailing) { Button { showSheet = true } label: { Image(systemName: "gear") } } } .sheet(isPresented: $showSheet, content: { Text("Sheet view...") }) } .tabItem { Label("Tab 1", systemImage: "heart") } Text("Second Tab") .tabItem { Label("Tab 2", systemImage: "bag") } } }}

解决方案
将Sheet的修饰符从NavigationStack内部移到TabView层级,让Sheet属于整个TabView而不是单个NavigationStack,即可消除高亮延迟问题。
修改后的代码:
struct ContentView: View { @State private var showSheet = false var body: some View { TabView { NavigationStack { Text("First Tab") .toolbar { ToolbarItem(placement: .topBarTrailing) { Button { showSheet = true } label: { Image(systemName: "gear") } } } } .tabItem { Label("Tab 1", systemImage: "heart") } Text("Second Tab") .tabItem { Label("Tab 2", systemImage: "bag") } } .sheet(isPresented: $showSheet) { Text("Sheet view...") } }}
原因说明
当Sheet附加在NavigationStack上时,拖拽关闭Sheet的动画结束后,NavigationStack内部的状态更新会滞后于TabView的UI状态同步,导致Tab图标高亮出现延迟。将Sheet提升到TabView层级后,状态更新会与TabView的UI状态保持一致,延迟问题自然消失。
内容的提问来源于stack exchange,提问作者Rajbeer Singh
相关产品推荐
相关产品推荐

