Как сделать так, чтобы верхняя часть фона списка оставалась фиксированной?
Как сделать так, чтобы верхняя часть фона списка оставалась фиксированной?
Например, здесь верхняя часть фона списка (светло-серая) не должна сдвигаться вверх. Другими словами, фону списка должно быть разрешено перемещаться только к нижней части экрана.
import SwiftUI
import Foundation
struct Attendance: Identifiable {
let id = UUID()
let name: String
}
struct AttendanceRow: View {
var attendance: Attendance
var body: some View {
HStack {
Text(attendance.name)
}
.padding(.vertical, 20)
}
}
struct ContentView: View {
let attendances = [
Attendance(name: "John"),
Attendance(name: "Michael"),
Attendance(name: "Steve"),
Attendance(name: "Donald"),
Attendance(name: "Johathan"),
Attendance(name: "William"),
Attendance(name: "Dave"),
Attendance(name: "Richard"),
Attendance(name: "Boris"),
Attendance(name: "Catherine"),
Attendance(name: "Susan")
]
var body: some View {
NavigationView {
VStack {
List {
ForEach(attendances) { attendance in
AttendanceRow(attendance: attendance)
}
}
}
}
}
}
Да, я не хочу, чтобы светло-серый цвет выходил за пределы верхней части экрана.
Избавьтесь от списка и добавьте фон в стек.
Ответы 1
Если вы просто пытаетесь удалить пространство над списком, то этот ответ на вопрос Удалить верхнее отступы из списка может помочь. Затем:
- Чтобы предотвратить прокрутку списка через безопасную область в верхней части экрана, добавьте номинальное верхнее дополнение, равное 1. Это нарушит контакт с краем безопасной области.
- Чтобы заполнить остальную часть экрана тем же фоном, что и окружающий список, примените
UIColor.systemGroupedBackgroundв качестве фона кVStack.
NavigationView {
VStack {
List {
Section {
ForEach(attendances) { attendance in
AttendanceRow(attendance: attendance)
}
} header: {
Spacer(minLength: 0)
.listRowInsets(EdgeInsets())
}
}
.environment(\.defaultMinListHeaderHeight, 0)
.padding(.top, 1)
}
.background(Color(.systemGroupedBackground))
}
EDIT2. Судя по вашим комментариям, один из способов сохранить углы фиксированными и круглыми - это «приклеить» закругленные углы в качестве наложения. Если цвет соответствует цвету фона, то они видны только при прокрутке списка вверх, в остальное время они просто сливаются с фоном.
NavigationView {
VStack {
List {
Section {
ForEach(attendances) { attendance in
AttendanceRow(attendance: attendance)
}
} header: {
Spacer(minLength: 0)
.listRowInsets(EdgeInsets())
}
}
.environment(\.defaultMinListHeaderHeight, 0)
.overlay {
RoundedRectangle(cornerRadius: 10)
.fill()
.blendMode(.destinationOut)
.padding(.horizontal, 20)
.background(Color(.systemGroupedBackground))
.compositingGroup()
.ignoresSafeArea(edges: .bottom)
.allowsHitTesting(false)
}
.padding(.top, 1)
}
.background(Color(.systemGroupedBackground))
}
[
Отлично, это дает желаемый эффект. Не хватает только одного: углы списка всегда должны быть закруглены.
(Углы должны оставаться закругленными)
Спасибо, что уделили время, но я хочу, чтобы список вел себя как раньше, но с закругленными углами. Текущее поведение: s4.ezgif.com/tmp/ezgif-4-2dab8301b7.gif Запрошенное поведение (но со скругленными углами): s3.ezgif.com/tmp/ezgif-3-bb05a0fbac.gif
Срок действия ваших ссылок на изображения истек @Adventure
@Radioactive Вот рабочие ссылки. Текущее поведение: imgur.com/dckAPKT Запрошенное поведение (но всегда со скругленными углами): imgur.com/TE4AwWj
@Adventure Итак, если я правильно понимаю: когда вы тянете список вниз сверху, фон (с закругленными углами) должен казаться прикрепленным к строкам и перемещаться вниз вместе со строками. Но когда вы прокручиваете вверх, фон должен казаться отделенным от строк и оставаться на месте. То же самое касается нижнего края (в обратном порядке). Правильный?
Вот отредактированный GIF, который показывает именно то, что мне нужно, я изо всех сил старался прояснить это: i.imgur.com/lZVPin2.gif
«Когда вы тянете список вниз сверху, фон (с закругленными углами) должен казаться прикрепленным к строкам и перемещаться вниз вместе со строками. Но когда вы прокручиваете вверх, фон должен казаться отделенным от строк. и должен оставаться на месте». Да, для верхнего края. Поведение нижнего края по умолчанию в порядке, как в отредактированном GIF.
@Adventure ОК, ответ снова обновлен. Измените цвет фона (в наложении) на что-то вроде Color.orange, чтобы увидеть, что происходит.
Итак, вы хотите перемещать только содержимое внутри него? Я правильно понял?