Мобильная разработка on Telegram: “🤩 Продвинутые техники работы с List в SwiftUI Ч…”

🤩 Продвинутые техники работы с List в SwiftUI

Чтобы создавать эффективные и динамичные списки в SwiftUI, можно идти двумя путями: остановиться на базовом функционале или использовать все возможности List. Расскажу о продвинутых приемах работы с List, которые помогут сделать ваши приложения мощнее, интерфейсы — удобнее, а код — более читабельным.

❓ Что такое List в SwiftUI?

List — это компонент, который отображает данные в виде вертикально прокручиваемого списка. Это мощный инструмент, позволяющий строить интерфейсы с различными уровнями сложности.

Простой пример использования:

struct SimpleListView: View {
    let items = ["Apple", "Banana", "Cherry", "Date", "Elderberry"]

    var body: some View {
        List(items, id: \.self) { item in
            Text(item)
        }
    }
}

Теперь разберем, как улучшить работу с List с помощью кастомизации, оптимизации и тестирования.

1. Кастомизация строк списка

Как сделать строки в списке более интересными? Добавьте изображения, кнопки и другие элементы интерфейса.

struct CustomRowListView: View {
let items = ["Apple", "Banana", "Cherry", "Date", "Elderberry"]

var body: some View {
List(items, id: \.self) { item in
HStack {
Image(systemName: "leaf")
.foregroundColor(.green)
Text(item)
.font(.headline)
Spacer()
Button(action: {
print("\(item) selected")
}) {
Image(systemName: "info.circle")
}
}
}
}
}

Этот подход позволяет добавить интерактивности и визуальной привлекательности вашему приложению.

2. Группировка элементов с помощью секций

Чтобы логически разделить данные, можно использовать заголовки и нижние колонтитулы для секций.

struct SectionedListView: View {
let fruits = ["Apple", "Banana", "Cherry"]
let vegetables = ["Carrot", "Lettuce", "Tomato"]

var body: some View {
List {
Section(header: Text("Fruits")) {
ForEach(fruits, id: \.self) { item in
Text(item)
}
}
Section(header: Text("Vegetables")) {
ForEach(vegetables, id: \.self) { item in
Text(item)
}
}
}
}
}

Секции помогают пользователям легче ориентироваться в данных и находить нужное.

3. Действия по свайпу

C их помощью удалять или редачить элементы списка много проще.

struct SwipeActionListView: View {
@State private var items = ["Apple", "Banana", "Cherry", "Date", "Elderberry"]

var body: some View {
List {
ForEach(items, id: \.self) { item in
Text(item)
.swipeActions {
Button(role: .destructive) {
if let index = items.firstIndex(of: item) {
items.remove(at: index)
}
} label: {
Label("Delete", systemImage: "trash")
}
}
}
}
}
}

Эта функциональность особенно удобна для списков задач или приложений с активным взаимодействием с пользователем.

4. Поиск в списке

С этой функцией пользователь быстрее найдет нужные данные.

struct SearchableListView: View {
@State private var searchText = ""
let items = ["Apple", "Banana", "Cherry", "Date", "Elderberry"]

var filteredItems: [String] {
if searchText.isEmpty {
return items
} else {
return items.filter { $0.contains(searchText) }
}
}

var body: some View {
List(filteredItems, id: \.self) { item in
Text(item)
}
.searchable(text: $searchText)
}
}

Добавление поиска делает списки более интерактивными и удобными.

Эти техники помогут вам создавать более динамичные и удобные интерфейсы.

Кто будет внедрять фичи — велком в комменты ⬇️