Как установить цвет фона ScrollView в NavigationView в SwiftUI

Question

Я не могу установить цвет фона в ScrollView в SwiftUI. Когда я использую .background(Color.red), фон обрезается, поэтому он не попадает под панель навигации и прокрутка кажется нарушенной. Я попробовал пару решений, но каждое из них не работает. У меня есть простая иерархия представлений

NavigationView {
    ScrollView([.vertical], showsIndicators: true) {
        VStack {
            ForEach(0...50, id: \.self) { _ in
                Text("Text text")
            }
        }
    }
    .navigationBarTitle("Title", displayMode: .large)
}
.navigationViewStyle(StackNavigationViewStyle())

, она работает, как и ожидалось

Теперь я хотел бы добавить цвет фона, Я пробовал следующие решения

1

NavigationView {
    ScrollView([.vertical], showsIndicators: true) {
        VStack {
            ForEach(0...50, id: \.self) { _ in
                Text("Text text")
            }
        }
    }
    .background(Color.red)
    .navigationBarTitle("Title", displayMode: .large)
}
.navigationViewStyle(StackNavigationViewStyle())

результат

2

NavigationView {
    ZStack {
        Color.red
        ScrollView([.vertical], showsIndicators: true) {
            VStack {
                ForEach(0...50, id: \.self) { _ in
                    Text("Text text")
                }
            }
        }
        .navigationBarTitle("Title", displayMode: .large)
    }
}
.navigationViewStyle(StackNavigationViewStyle())

результат

3

NavigationView {
    ZStack {
        Color.red.edgesIgnoringSafeArea([.all])
        ScrollView([.vertical], showsIndicators: true) {
            VStack {
                ForEach(0...50, id: \.self) { _ in
                    Text("Text text")
                }
            }
        }
        .navigationBarTitle("Title", displayMode: .large)
    }
}
.navigationViewStyle(StackNavigationViewStyle())

результат

Как установить цвет фона в ScrollView, упакованный в NavigationView?

// edit:

Анимация ниже представляет желаемый эффект (этосделано с UIKit).

Answer 1

Вы могли бы что-то вроде этого:

struct ContentView: View {
    init() {
        //Use this if NavigationBarTitle is with Large Font
        UINavigationBar.appearance().backgroundColor = .red
    }
    var body: some View {
        NavigationView {
            ScrollView([.vertical], showsIndicators: true) {
                VStack {
                    ForEach(0...70, id: \.self) { _ in
                        Text("Text text")
                    }
                }.frame(minWidth: 0, maxWidth: .infinity)
                    .background(Color(UIColor.red))
            }
            .navigationBarTitle("Title", displayMode: .large)
        }
        .navigationViewStyle(StackNavigationViewStyle())
    }
}

Было бы получить представление, которое выглядит так:

Я знаю, что это не полное решение из-за верхнего безопасного края, но, надеюсь, оно поможет вам стать немного ближе.

PS Я пытался игнорировать верхний безопасный край, но это вызывает проблемы с интервалом навигационной панели

Answer 2

Попробуйте код ниже, он должен работать, как вы ожидаете,

Снимок

struct ContentView: View {

   init() {
       //Use this if NavigationBarTitle is with Large Font
       UINavigationBar.appearance().backgroundColor = .red
   }
    var body: some View {
        NavigationView {

        ScrollView([.vertical], showsIndicators: true) {
            VStack {
                ForEach(0...50, id: \.self) { _ in
                    HStack {
                        Spacer()
                         Text("Text text")
                        Spacer()
                    }
                }
            }
            .background(Color.red)
        }
        .navigationBarTitle(Text("Title") , displayMode: .large)
        .edgesIgnoringSafeArea(.top)
    }.navigationViewStyle(StackNavigationViewStyle())
  }
}

Надеется, что это поможет!

Вывод: