Компонент ScrollView в SwiftUI автоматически обрезает свое содержимое, чтобы элементы прокрутки всегда оставались полностью внутри области контейнера. Однако, использую модификатор scrollClipDisabled()
, стандартное поведение можно изменить, отключив обрезку контента.
Важно: Изменение поведения не влияет на обработку касаний пользователя, т.е. область касания остается в пределах ScrollView
. По умолчанию, когда элементы находятся внутри ScrollView
, все касания по этим элементам обрабатываются как взаимодействие с ними. Однако, если элементы выходят за границы ScrollView
из-за использования scrollClipDisabled()
, любые касания по "выпавшим" элементам не будут регистрироваться как взаимодействие с ними. Вместо этого, эти касания будут регистрироваться как взаимодействие с тем, что находится под этими элементами.
Поэтому, хотя scrollClipDisabled()
может быть полезным для создания визуальных эффектов, таких как тени, которые выходят за пределы области прокрутки, его стоит использовать с осторожностью, чтобы не создавать проблем с интерфейсом пользователя. В частности, если критически важные элементы управления оказываются вне области прокрутки и становятся неработоспособными, это может привести к проблемам с пользовательским опытом.
Давайте рассмотрим c VStack
, в котором сверху и снизу расположены статичные текстовые элементы, а между ними - область с прокруткой. При начале прокрутки элементы этой области будут располагаться прямо под верхним текстом, но в процессе прокрутки они смогут выходить за его границы:
VStack {
Text("Fixed at the top")
.frame(maxWidth: .infinity)
.frame(height: 100)
.background(.green)
.foregroundStyle(.white)
ScrollView {
ForEach(0..<5) { _ in
Text("Scrolling")
.frame(maxWidth: .infinity)
.frame(height: 200)
.background(.blue)
.foregroundStyle(.white)
}
}
.scrollClipDisabled()
Text("Fixed at the bottom")
.frame(maxWidth: .infinity)
.frame(height: 100)
.background(.green)
.foregroundStyle(.white)
}
При работе с модификатором scrollClipDisabled()
важно помнить о двух вещах:
Вы можете задать свою форму обрезки, чтобы контролировать, насколько далеко элементы будут выходить за границы области прокрутки. Например, если после применения отступов
padding()
вы добавите форму обрезки в виде прямоугольникаclipShape(.rect)
, элементы не будут "выпадать" за пределы области бесконечно.Поскольку элементы прокрутки теперь могут перекрывать окружающие их элементы, вам может потребоваться использовать модификатор
zIndex()
для корректировки их вертикального расположения. Например, если у других элементов используется стандартный Z-индекс, то применениеzIndex(1)
к ScrollView заставит его дочерние элементы отрисовываться поверх других элементов.