SwiftUI - Как управлять ScrollView программно

iOS Dev

SwiftUI - Как управлять ScrollView программно

Создайте экран чата и управляйте просмотром прокрутки

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

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

1. Запустите проект Xcode

Давайте создадим новый проект в Xcode. В моем случае я назвал проект «Чат».

2. Спланируйте экран

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

Если сломать составляющие экрана, то будет:

• Заголовок
• Два разных типа сообщения чата
• Текстовое поле
• Кнопка отправки

3. Создайте модельный класс для сообщения.

Сначала создайте каталог с именем «Model» в каталоге «Shared» и там создайте новый файл Swift с именем «MessageModel.swift».

В этом приложении наш класс модели представляет четыре данных:

1. Идентификатор, позволяющий однозначно идентифицировать сообщение чата.
2. Фактическое текстовое сообщение
3. Время сообщения
4. Кто автор сообщения

Скопируем следующий код в MessageModel.swift файл.

struct MessageModel определяет модель данных. В этой модели id и time будут автоматически сгенерированы во время создания экземпляра MessageModel.. isAuthor - это логическое свойство, в котором true означает, что сообщение создано автором, который видит экран.

Для простоты, когда автор что-то пишет, мы временно отвечаем поддельным серверным сообщением. Вот почему мы определили getRndomAnswer статическую функцию в этой модели сообщения.

4. Создайте представление карточки для сообщения.

Давайте определим карточку для отдельного сообщения. Создайте новый файл с именем «MessageCardView.swift» и скопируйте следующий код.

Если вы запустите предварительный просмотр, вы увидите следующий экран.

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

2. Мы определили некоторые вычисленные свойства, которые дают нам динамическое значение на основе свойства isAuthor. Например, цвет фона сообщения автора будет оранжевым, а цвет фона ответного сообщения поддельного сервера будет зеленым.

3. Затем мы создали реальное представление карточки сообщения и с помощью Spacer() скорректировали размещение карточек.

5. Реализуйте функцию чата в приложении.

Теперь давайте обновим файл ContentView.swift. Удалите существующий код и скопируйте следующий код.

5.1 Сохраненные свойства

Сначала мы определили некоторые сохраненные свойства. messageList сохранит все сообщения между автором и фальшивыми сообщениями с сервера.

authorMessage будет использоваться для привязки к текстовому полю для хранения сообщения пользователя.

Пространство имен bottomID определено для идентификации представления. Вы можете указать идентификатор любого представления с помощью пространства имен. Этот bottomId используется для автоматической прокрутки прокрутки.

5.2 Заголовок

Определен простой заголовок для отображения заголовка «Беседа» в верхней части экрана.

5.3 Просмотр чата

Эта часть жизненно важна. Мы использовали ScrollViewReader для чтения ScrollView. Здесь мы использовали LazyVStack для отображения сообщений. При использовании MessageCardView сообщения будут отображаться.

После цикла ForEach вы увидите Text("").id(bottomID). Здесь мы определили пустое текстовое представление с идентификатором.

Затем мы использовали модификатор .onReceive и подписчика Just, чтобы подписаться на изменения messageList.

Если messageList обновляется, будет выполнена .onReceivepart, и мы использовали оператор scrollView.scrollTo(bottomID), который будет прокручивать до последнего сообщения внизу.

5.4 Функция добавления сообщений

Функция addMessageToMessageList проверит некоторые предварительные условия, создаст экземпляр MessageModel и добавит messageList.

Внизу, используя DispatchQueue, мы добавим фальшивое случайное сообщение к messageList, которое имитирует ответ сервера.

5.5 Просмотр нижнего колонтитула

Представление footer создает представление нижнего колонтитула, в котором будут отображаться текстовое поле и кнопка. Текстовое поле привязано к состоянию $authorMessage, и при нажатии кнопки будет выполнен метод addMessageToMessageList().

5.6 Тело

Наконец, создается основной вид для создания нужного нам экрана.

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

Надеюсь, вы понимаете, как легко создать экран чата с помощью SwiftUI. Вот исходный код полного приложения.

👨🏼‍💻 Если вам понравился этот пост, вы можете оставить до пятидесяти 👏👏👏 аплодисментов. Если у вас есть вопросы или мнения, дайте мне знать в комментариях.