You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

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后Tab图标高亮延迟

解决方案

将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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.23 05:52:14