如何防止SwiftUI渲染整个表视图时,使用自定义警报视图在它的顶部?



我有一个5个选项卡视图。当我的视图模型的属性为真时,警报视图将显示在顶部?但是每次显示警告时,整个选项卡视图都会被重新绘制,从而导致高cpu使用率。

我希望无论用户在哪个选项卡中都显示警报,所以我在选项卡视图上做了一个ZStack来显示警报。但是我如何防止SwiftUI重新绘制整个选项卡视图?

struct ContentView: View {
var body: some View {
ZStack {
TabView() {
MiniPlayer(content:
BrowseView()
)
.tabItem {
Group {
Image(systemName: "square.grid.2x2")
Text("Browse")
}
.onTapGesture {
selectedTab = 0
}
}
.tag(0)

MiniPlayer(content:
AllSongsListView()
)
.tabItem {
Group {
Image(systemName: "music.note")
Text("Songs")
}
.onTapGesture {
selectedTab = 1
}
}
.tag(1)

MiniPlayer(content:
PlaylistsView()
)
.tabItem {
Group {
Image(systemName: "music.note.list")
Text("Playlists")
}
.onTapGesture {
selectedTab = 2
}
}
.tag(2)

MiniPlayer(content:
MoreView()
)
.tabItem {
Group {
Image(systemName: "ellipsis")
Text("More")
}
.onTapGesture {
selectedTab = 3
}
}
.tag(3)
}

Alert()
}
.ignoresSafeArea(.keyboard)
}
}
struct Alert: View {
@EnvironmentObject var manager: Manager

var body: some View {
if manager.showSuccessAlert {
VStack {
VStack {
Text("Successful.")
.font(.system(size: 20, weight: .bold, design: .rounded))
.multilineTextAlignment(.center)
}
.frame(height: 50)
.frame(maxWidth: .infinity)
.foregroundColor(.white)
.background(Color.blue)
.clipShape(Capsule())

Spacer()
}
.zIndex(1)
.onAppear {
DispatchQueue.main.asyncAfter(deadline: .now() + 4) {
withAnimation {

manager.showSuccessAlert = false
}
}
}
.transition(.asymmetric(insertion: .move(edge: .top), removal: .move(edge: .top)))
}
}
}

我知道这个线程是旧的,但我发现它和一个修复,而有一个类似的问题…

当在不属于默认/主选项卡的视图中显示警报时,警报将触发,应用程序将自动导航回默认选项卡。

在为每个标签添加标签后修复了这个问题。

的例子:

@State private var selection: Tab = .workout
enum Tab {
case workout, exercises, history, testing
}
var body: some View {
TabView(selection: $selection) {
WorkoutRootView()
.tabItem {
Label("Workout", systemImage: "figure.strengthtraining.traditional")
}
.tag(Tab.workout)

ExerciseListRootView()
.tabItem {
Label("Exercises", systemImage: "dumbbell")
}
.tag(Tab.exercises)

HistoryRootView()
.tabItem {
Label("History", systemImage: "calendar")
}
.tag(Tab.history)

尝试将整个TabView移动到分隔视图中,使ZStack看起来像

ZStack {
TabsContentView()      // << move everything inside !!
Alert()
}

最新更新