Как добиться такого визуального эффекта прокрутки формы, как в настройках iPhone ⇐ IOS

[Anonymous]

Я хочу добиться визуального представления ниже. Форма, включающая такие разделы, как приложение «Настройки» iPhone, но с закругленным визуальным элементом вверху. И я хочу, чтобы они прокручивались вместе и имели одинаковый цвет фона.


Код:

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

NavigationStack {
HStack {
Image("JoinUs") // Demo purpose
.resizable()
.frame(maxWidth: 360)
.aspectRatio(contentMode: .fit)
}
.background(.green)
.mask { RoundedRectangle(cornerRadius: 25) }
.padding()

Form {
Section {
Text("Voice")
Text("Speed")
Text("Pitch")
Text("Voice")
} header: {
Text("Sound")
}

Section {
Text("Text Size")
} header: {
Text("System")
}

Section {
Text("Voice")
Text("Speed")
Text("Pitch")
Text("Voice")
} header: {
Text("Sound")
}

Section {
Text("Voice")
Text("Speed")
Text("Pitch")
Text("Voice")
} header: {
Text("Sound")
}
}
.navigationTitle("Settings")

Вот что я получил:
[img]https://i.sstatic.net /G5f6oiQE.gif[/img]

Я заметил две проблемы:

• Белый фон верхнего представления HStack. -> Как отобразить тот же цвет фона, в данном случае серый цвет.
• Верхнее представление HStack не прокручивается при прокрутке формы -> Попробуйте поместить его в форму, можно будет прокручивать вместе но с меньшим размером, а также с проблемой белого фона.

[img]https://i.sstatic. net/26nRnOyMm.png[/img]


Подробнее здесь: https://stackoverflow.com/questions/783 ... s-settings