swiftui - ContentView (SwiftUI) 的背景图像不是 subview ，而是具有适当的滚动行为

Question

我们如何获得 ContentView 的背景图像而不是它的 subview 并保留可滚动内容在 NavBar 下消失的行为？

我发现，如果我将背景作为修饰符添加到 List 或 ScrollView，它不会更改 subview (例如 DetailView)上的背景，但可滚动内容不再在导航栏下消失，并且导航栏标题保持不变(参见图片#2)。但是，如果我修改了 NavigationView，它会恢复可滚动内容在导航栏下消失的行为(参见图 #3)，但它也更改了所有 subview 的背景(参见图 #4)

我尝试了一个带有 Image("MoonPhoto") 的 ZStack，然后是 List

但主要是我尝试了这个 ViewModifier 结构的不同位置:

struct BackgroundImage: ViewModifier {
    func body(content: Content) -> some View {
        content
            .opacity(0.8)
            .background(Image("history-in-hd-e5eDHbmHprg-unsplash")
            .resizable()
            .scaledToFill())
    }
}

这是 ContentView 的主体:

     var body: some View {
        NavigationView {
            List(missions) { mission in
                NavigationLink(destination: MissionView(mission: mission, astronauts: self.astronauts))
                {
                    Image(mission.image)
                        .resizable()
                        .scaledToFit()
                        .frame(width: 50, height: 50)

                    VStack(alignment: .leading) {
                        Text(mission.displayName)
                            .font(.headline)
                        Text(self.showCrew ? self.crewList(mission: mission) : mission.formattedLaunchDate)
                    }
                }
                .navigationBarTitle("Moonshot")
            }
            .navigationBarTitle("Moonshot")
            .navigationBarItems(leading:
                Button(self.showCrew ? "Show Launch date" : "Show crew") {
                    self.showCrew.toggle()
                }
            )
            .modifier(BackgroundImage()) //Modifying List
        } //If you move the above modifier here, the image shows an all subviews too
    }
}

Answer 1

我观察到的主要问题是关于 navigationBarTitle 修饰符的 .large DisplayMode。我找到了适合我的解决方案，但它仍然是一种解决方法。无论如何，您可以将其视为临时解决方案。

主要思想是将 List 包裹在 VStack 中，并使用 .inline 显示模式。希望，这会有所帮助。

这是它的外观(也适用于暗模式)

import SwiftUI

struct BackgroundImage: ViewModifier {
    func body(content: Content) -> some View {
        content
            .opacity(0.8)
            .background(Image("history-in-hd-e5eDHbmHprg-unsplash")
            .resizable()
            .scaledToFill())
    }
}


struct ContentView: View {
    var body: some View {
        NavigationView {
            VStack {
                List (1...20, id: \.self) { value in
                    NavigationLink(destination: Text("Details \(value)")) {
                        Text("\(value)")
                    }
                }
            }
            .modifier(BackgroundImage())
            .navigationBarTitle("Title", displayMode: .inline)
        }
    }
}

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