Создайте приложение, похожее на доставку, в SwiftUI

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

Давайте посмотрим на окончательный вид.

Ключевые функции

Давайте посмотрим на некоторые функции, которые мы собираемся использовать.

  1. JSONDecoder(): используется при декодировании базы данных JSON.
  2. sort(), filter(): Используется при работе со списком моделей, которые мы используем.

Как видите, ничего сложного. Тогда давайте погрузимся.

Установить модель

Давайте сначала настроим нашу модель, чтобы немного упростить обработку данных.

Для удобства я сделал новый тип данных с именем Food, который содержит все виды кухонь. Изначально пользовательский тип данных не Codable, но, сделав сам enum Codable, мы можем легко справиться с этим. Если вы хотите узнать о Codable, смотрите здесь. Проще говоря, это упрощает кодирование/декодирование JSON.

Если вы хотите создать более сложный код, вы можете написать собственные правила кодирования, как это сделал я в исходном коде, прикрепленном внизу этого поста. Однако в этом случае, кажется, не возникает никаких ошибок без правил кодирования, декодирования.

Загрузить данные из базы данных (JSON)

Для удобства мы будем использовать локальный файл для данных. Давайте напишем ListViewModel для загрузки данных из файла. Файл JSON выглядит следующим образом:

Благодаря codable мы можем очень легко декодировать JSON.

Теперь все, что нам нужно сделать, это просто импортировать файл .json (Обратите внимание, что перед этим нужно добавить цель), получив локальный URL-адрес файла Bundle.main.url и передав его Data(contentOf: ) для получения данных. Тогда JSONDecoder().decode() сделает за вас остальную кропотливую работу. После этого мы наконец можем получить список Store информации, декодированной из DBdata.json.

Подключиться к просмотру

Как вы видели в предварительном просмотре результатов, мы собираемся добавить панель приложения, содержащую панель поиска и параметры сортировки.

Начнем с корневого представления, ListView.

Список

Наиболее заметной частью, вероятно, является часть filter. Мы можем получить отфильтрованную Store информацию, используя .filter() в ForEach. Ключевые слова фильтрации, такие как inputText и isOnSale, будут обрабатываться в файле AppBarView. Прошу прощения за лень, я реализовал поиск только по тегу «В продаже». Если вы хотите добавить больше тегов, это хороший способ избежать жесткого кодирования и использовать список ключевых слов тегов.

Кроме этого, я использовал LazyVstack, чтобы предотвратить прерывистые страницы. И это все для этого представления. Давайте перейдем к AppBarView сейчас.

AppBarView

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

Я написал перечисление SortBy для удобства, как вы можете видеть во втором коде (обновлено ListViewModel.swift). Этот метод особенно удобен для упрощения обработки сложных условий и улучшения читаемости. Класс picker, который я использовал в первом коде (AppBarView.swift), также является лучшим предложением для создания представления select-option, которое доступно с iOS 14.

Теперь давайте взглянем на последний вид, который содержит реальную форму, StoreView.

Просмотр магазина

Это простой макет, так что, вероятно, вы ничего не сможете понять. Но, как вы могли заметить, в DBdata.json форма imageURL немного странная. Для этого я сделал расширение, которое извлекает изображения из этого странного пути.

Готово. Теперь вы можете получить тот же результат, который я показал в начале.

Полный исходный код