Как создать интерактивный интерфейс для приложения ToDo с использованием шаблона MVVM ??
Цель этой статьи
В этой статье вы узнаете, как работать с шаблоном проектирования MVVM, создав рабочее приложение. Мы увидим, как мы написали код для пользовательского интерфейса и как мы обрабатываем модели представления и модели.
Исходные коды проекта
Вы сможете загрузить исходный код из репозитория ниже, просто поставьте ему звезду. Всего наилучшего .
Запуск проекта
Приложение, которое мы собираемся создать, называется TaskManager. После просмотра приведенного выше GIF-изображения вы можете ознакомиться с особенностями этого приложения. Если нет, то скачайте проект и запустите его на своем iPhone.
Понимание модели
Первое, что я предпочитаю создавать, это Модель приложения, теперь давайте разберемся, как выглядит наша модель.
- CaseIterable: это протокол, который автоматически синтезирует набор всех случаев в вашем перечислении в указанном порядке.
- Идентифицируемый: он обеспечивает устойчивое представление об идентичности класса или типа значения.
- Equatable: позволяет сравнивать два объекта.
Строка 11: Мы создаем структуру данных, которая нам нужна для нашего приложения.
Строка 21: у нас может быть три приоритета: нормальный, средний и высокий. Также мы создаем id как rawValue, чтобы мы могли управлять нашими приоритетами.
Строка 56: Чтобы показать задачи, основанные на разном расположении, нам нужны особые случаи.
Понимание модели представления
Теперь пришло время понять модель представления, которая является логической частью нашего приложения, где мы будем создавать наш массив данных и выполнять с ним действия.
Строка 12: Создание массива для наших данных типа Task с некоторыми данными по умолчанию. Также в следующих нескольких строках мы по умолчанию определяем sortype как алфавитный.
Строка 23: два метода добавления новой задачи и удаления задачи. Также метод сортировки данных на основе того, что пользователи выбрали в сегменте в пользовательском интерфейсе.
Строка 33: Сортировка данных по выбору пользователей путем сравнения необработанных значений имен, дат и приоритетов.
Создание хорошей модели просмотра - важная часть каждого приложения. В этом приложении мы обрабатываем каждую операцию из пользовательского интерфейса, пользовательский интерфейс должен отвечать только за отображение данных путем использования модели просмотра или наоборот.
Понимание взглядов
Представление задач. В этом представлении содержится отображаемая информация о задаче. Существуют простые HStacks и VStacks, а также несколько штрихов для стилизации фона.
TaskListView: в этом представлении мы извлекаем данные из модели представления и показываем их в цикле.
SortPickerView: это представление будет содержать средство выбора даты, которое также обновит даты в наших данных в модели просмотра.
AddTaskView: это представление позволяет пользователю вводить данные и добавлять задачу.
TaskSearchView: это представление позволяет пользователю выполнять поиск по задаче с помощью некоторого представления поиска с анимацией.
MainViewModifier: есть несколько модификаторов, которые можно добавить в основное представление содержимого.
ContentView: это основное представление, в котором мы вызываем каждое представление и передаем модель просмотра.
Расширение
Вот расширение для доступа к некоторым событиям textfeild.
Завершение
Попробуйте создать собственное приложение на основе того, что я создал, следите за потоком.
Куда пойти отсюда ?
Мои социальные сети: LinkedIn - GitHub
Проверьте эту ссылку: https://bit.ly/38HOQeb
Хлопайте, если вам понравилась эта статья!
Благодарю вас !
