Question

我们如何获取ContentView的背景图像而不是其子视图，并保持可滚动内容在NavBar下消失的行为？

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

我尝试了使用Image（“ MoonPhoto”）和列表的ZStack，

但是大多数情况下，我尝试使用此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显示模式。希望，这会有所帮助。

外观如何（也适用于黑暗模式）

list with background

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()
    }
}

ContentView（SwiftUI）的背景图像不是子视图，但具有正确的滚动行为

1 个答案: