Итак, у меня есть этот код:
struct ContentView: View {
@State private var names = ["Ted", "Barney", "Lily", "Robin", "Marshal"]
var body: some View {
List {
ForEach(names, id: \.self) { name in
ListRowView(name: name)
}
.onDelete(perform: deleteName)
}
.listStyle(.plain)
.scrollContentBackground(.hidden)
}
func deleteName(at offsets: IndexSet) {
names.remove(atOffsets: offsets)
}
}
struct ListRowView: View {
let name: String
var body: some View {
HStack {
iconView
titleView
Spacer()
}
.background(
RoundedRectangle(cornerRadius: 20)
.fill(.purple)
)
}
var titleView: some View {
Text("\(name)")
.foregroundStyle(.white)
}
var iconView: some View {
Circle()
.fill(Color.white.opacity(0.2))
.frame(width: 80, height: 80)
.padding()
}
}
когда я смахиваю, чтобы удалить, это выглядит так:
но я пытаюсь добиться чего-то вроде этого:
Я хочу, чтобы красный вид, который появляется справа при пролистывании, был частью фона строки. Я не знаю, как объяснить это лучше. Возможно, я неправильно применяю фоновый вид?
Вы можете добиться очень близкого дизайна, используя собственные API, комбинируя списки стилей Section
и insetGrouped
:
List {
ForEach(names, id: \.self) { name in
Section { // 👈 Separate cells
ListRowView(name: name)
}
}
.onDelete(perform: deleteName)
.listRowBackground(Color.purple) /// 👈 Use a simple background color
.listRowInsets(.init()) // 👈 Fit the content to the edges of the cell
.listSectionSpacing(16) // 👈 Nicer spacing
}
.listStyle(.insetGrouped) // 👈 Make the sections appear rounded
.scrollContentBackground(.hidden)
Да, спасибо, все работает, как и ожидалось. Я думаю, что использование раздела вряд ли может быть проблемой позже. Увидим...
Чтобы достичь того, что вы ищете, вам нужны собственные ячейки с собственной реализацией, чтобы можно было провести их по экрану...