Фон ZStack игнорирует безопасную область, хотя содержимое ее учитывает, все вместе прокручиваются в ScrollView ⇐ IOS

[Anonymous]

Я пытаюсь создать ScrollView с содержимым вверху, который имеет следующие требования:

• Содержимое (1. VStack) должно находиться в ZStack с цветом фона (или изображением)
• Фон должен простираться от края до края (игнорировать безопасную область)
• Само содержимое должно соответствовать безопасности область
• Весь ZStack (фон + содержимое) и остальная часть ScrollView (например, 2. VStack) должны прокручиваться вместе с содержимым ScrollView

Проблема:
Как вы можете видеть на изображении, фон выходит за пределы безопасной области, как предполагалось. Однако контент (1-й VStack) расположен за вырезом. Но контент должен быть выровнен нормально и оставаться полностью видимым.
Я не могу понять, как добиться такого макета. Простое добавление фона за ScrollView не работает, потому что мне нужно, чтобы фон прокручивался вместе с содержимым, а не оставался фиксированным.
На прикрепленном изображении вы можете видеть, что VStack должен учитывать безопасную область, но фон должен простираться под ней.
Что я пробовал:
Я пробовал разные подходы и делюсь одним из них ниже, но ни одна из моих попыток не сработала. далеко.

Код: Выделить всё

struct DemoView: View {
var body: some View {
ScrollView {
ZStack {
Color.blue
// 1. VStack
VStack {
Text("1. Hello World")
Text("2. Hello World")
Text("3. Hello World")
Text("4. Hello World")
Text("5. Hello World")
}
.safeAreaPadding()
}

// 2. VStack
VStack {
Text("1. More text")
Text("2. More text")
Text("3. More text")
Text("4. More text")
Text("5. More text")
}
}
.ignoresSafeArea()
}
}

#Preview {
DemoView()
}

Буду благодарен за любые предложения по решению этой проблемы.

Подробнее здесь: https://stackoverflow.com/questions/798 ... rolling-to