Список SwiftUI с возможностью поиска

Как разработчик iOS, вы можете часто сталкиваться с ситуациями, когда вам нужно отобразить список элементов в вашем приложении. Хотя простые списки легко реализовать с помощью SwiftUI, иногда вам нужно предоставить функцию поиска, чтобы помочь пользователям быстро находить определенные элементы. В этой статье мы рассмотрим, как создать список с возможностью поиска в SwiftUI.

Предварительные требования: чтобы следовать этому руководству, у вас должен быть некоторый опыт работы со Swift и SwiftUI, а также Xcode, установленный на вашем компьютере.

Шаг 1: Создайте новый проект SwiftUI Откройте Xcode и выберите «Создать новый проект Xcode». Выберите «Single View App» в качестве шаблона и установите для имени продукта значение «SearchableList». Затем нажмите Далее.

Шаг 2. Добавьте некоторые данные в проект. В этом руководстве мы будем использовать простой массив строк для представления элементов нашего списка. Добавьте следующий код в файл ContentView.swift:

struct ContentView: View {
    let items = ["Apple", "Banana", "Cherry", "Durian", "Elderberry", "Fig", "Grape", "Honeydew", "Imbe", "Jackfruit"]
    
    var body: some View {
        List(items, id: \.self) { item in
            Text(item)
        }
    }
}

Этот код создает представление списка, которое отображает массив элементов. Параметр id имеет значение \.self, что означает, что каждый элемент в списке будет однозначно идентифицирован своим значением.

Шаг 3: Добавьте панель поиска в представление Чтобы добавить панель поиска в наше представление, мы будем использовать модификатор searchable. Добавьте следующий код в структуру ContentView:

struct ContentView: View {
    let items = ["Apple", "Banana", "Cherry", "Durian", "Elderberry", "Fig", "Grape", "Honeydew", "Imbe", "Jackfruit"]
    @State private var searchText = ""

    var body: some View {
        NavigationView {
            List(items.filter({ searchText.isEmpty ? true : $0.localizedCaseInsensitiveContains(searchText) }), id: \.self) { item in
                Text(item)
            }
            .searchable(text: $searchText)
            .navigationTitle("Searchable List")
        }
    }
}

В этом коде мы добавили переменную @State с именем searchText, которая будет содержать текст, введенный в строку поиска. Затем мы оборачиваем наше существующее представление списка в NavigationView и применяем к нему модификатор searchable, передавая переменную searchText.

Мы также используем метод filter в нашем массиве items, чтобы отображать только те элементы, которые соответствуют искомому тексту. Если искомый текст пуст, мы возвращаем true для всех элементов, в противном случае мы используем localizedCaseInsensitiveContains, чтобы проверить, содержит ли элемент искомый текст.

Наконец, мы добавляем навигационный заголовок к представлению.

Шаг 4. Тестирование приложения Создайте и запустите приложение, и вы должны увидеть список элементов с панелью поиска вверху. Попробуйте ввести какой-нибудь текст и обратите внимание, как список обновляется, чтобы отображать только элементы, соответствующие искомому тексту.

Вывод: в этом уроке мы узнали, как создать список с возможностью поиска в SwiftUI. Мы использовали модификатор searchable, чтобы добавить панель поиска в наше представление, и отфильтровали список, чтобы отображались только те элементы, которые соответствуют тексту поиска. Обладая этими знаниями, вы можете легко создавать функции поиска в своих собственных приложениях.

Спасибо за чтение! Пожалуйста 👏 хлопайте, оставляйте комментарии и подписывайтесь, мне очень приятно! Это помогает мне узнать, какой контент интересует людей.