Приведенное ниже представление помещено в NavigationStack. Моя главная цель — иметь представление верхней панели с расширяющимся фоном под панелью навигации, верхняя панель должна иметь тень внизу, а внизу — ScrollView с некоторым содержимым.
Код: Выделить всё
struct ContentView: View {
var body: some View {
VStack (spacing: 0) {
HStack {
Text("Title")
}
.frame(maxWidth: .infinity)
.padding()
.background(.red)
.compositingGroup()
.shadow(color: .black, radius: 5)
.zIndex(1)
ScrollView {
VStack(spacing: 0) {
ForEach((1...100), id: \.self) {
Text("\($0)…")
.frame(maxWidth: .infinity)
.background(.white)
}
}
}
}
}
}
Чтобы сделать тень, примененную к представлению заголовка, видимой, мне пришлось изменить zIndex представления на 1, чтобы тень рисовалась над содержимым представления прокрутки. Он отлично работает, но имеет очень странный побочный эффект. С помощью этого кода, когда представление прокрутки начинает прокручиваться, цвет панели навигации меняется, см. ниже.
Если я не изменю zIndex строки заголовка, эффекта не будет. вот так, но тени не видно.
Подробнее здесь:
https://stackoverflow.com/questions/778 ... ng-started