ios - 当 NavigationView 的内容太短时，SwiftUI 中的 TabView 会丢失背景

Question

附加了我非常简单的 SwiftUI 应用程序的代码，我正在努力解决一个视觉问题：

1. 当在 TabView 内的页面之间导航时，底部的选项卡栏有一个漂亮的半透明背景，并且前后导航看起来很不错 - 如果子页面比屏幕尺寸高：

2. 当第二页（DetailView）的内容短于屏幕尺寸时，选项卡栏的背景会消失，并且在向后导航时会导致非常烦人的重叠效果：

SwiftUI、iOS 15 中有解决方案吗？

代码：

import SwiftUI

struct ContentView: View {
    @State private var isDetailActive = false

    var body: some View {
        TabView {
            NavigationView {
                ScrollView {
                    VStack {
                        Text("Custom title")
                            .frame(maxWidth: .infinity)
                            .padding(20)
                            .background(Color(red: 0.1, green: 0.1, blue: 0.1))
                    }

                    ForEach(1..<50) {_ in
                        NavigationLink(destination: DetailView(isVisible: $isDetailActive), isActive: $isDetailActive) {
                            Text("Hello, world!")
                                .padding(10)
                        }
                    }
                }
                .navigationBarHidden(true)
                .navigationTitle("Navigation title")
            }
            .tabItem {
                Image(systemName: "house")
                Text("Test")
            }
        }
    }
}

struct DetailView: View {
    @Binding var isVisible: Bool

    var body: some View {
        ScrollView {
            VStack {
                Button(action: {
                    isVisible = false
                }) {
                    Text("Back")
                        .frame(maxWidth: .infinity)
                        .padding(20)
                        .background(Color(red: 0.1, green: 0.1, blue: 0.1))
                }

                ForEach(0..<10) { item in       // <-- change this to 20 to simulate a larger page
                    Text("Text")
                        .padding(10)
                }
            }
        }
        .navigationBarHidden(true)
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
            .colorScheme(.dark)
    }
}

Answer 1

iOS 15 更改了 TabBar 下方没有任何可滚动内容时的默认外观。

对我有用的解决方法是修改 onAppear 语句中的 TabBar：

TabView {
    ...
}
.onAppear {
    let tabBarAppearance = UITabBarAppearance()
    tabBarAppearance.configureWithDefaultBackground()
    UITabBar.appearance().scrollEdgeAppearance = tabBarAppearance
}