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

Question

附上我非常简单的 SwiftUI 应用程序的代码后，我遇到了视觉问题：

在 TabView 内的页面之间导航时，底部的标签栏有漂亮的半透明背景，来回导航看起来不错 - 如果子页面高于屏幕尺寸：

当第二页 (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 下方没有可滚动内容时的默认外观。

对我有用的一个 work-around 正在修改 onAppear 语句中的 TabBar：

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

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

ios - TabView in SwiftUI loses background when content of the NavigationView is too short

xcode

swiftui

ios15