Теперь в каждом приложении есть сообщения. Вот как вы можете быстро встроить обмен сообщениями в свое приложение
Модель чата
Начнем с создания перечисления для позиций пузырьков. Пузырьки могут быть в правой или левой части экрана:
Теперь мы можем создать нашу модель, которая хранит наши сообщения, положения пузырей и текст, вводимый пользователем. В этом уроке мы собираемся сохранить положение последнего пузыря чата в переменной, чтобы мы могли чередовать левое и правое положение пузыря:
Пузырь чата
Нам нужно создать пузырек чата, используя ViewBuilder. Внутри нашей переменной body мы можем создать форму пузыря. В этом уроке мы используем RoundedRectangle и изображение системы стрелок, чтобы создать форму пузыря.
Если всплывающее окно находится справа, оно не должно расширяться до левого края экрана и наоборот. Используйте отступы, чтобы контролировать, насколько пузырек может расширяться. Используйте модификатор рамки, чтобы отрегулировать выравнивание пузыря:
Пользовательский ScrollView
Если вы хотите, чтобы ваш ScrollView прокручивался автоматически, вы можете использовать приведенный ниже код, предоставленный Asperi on Stack Overflow:
Строительство чата
Теперь мы можем использовать нашу модель и пользовательский ScrollView, чтобы просмотреть сообщения и добавить их в пользовательский интерфейс. Внутри закрытия содержимого ChatBubble у нас будет текстовое представление, которое принимает последнее сообщение, сохраненное в нашем массиве сообщений.
Под нашим пользовательским ScrollView нам нужно добавить текстовый редактор с кнопкой отправки. Мы используем текстовый редактор вместо текстового поля, потому что не хотим, чтобы кнопка возврата на клавиатуре закрывала клавиатуру. Вместо этого мы хотим добавить новую строку.
Внутри нашей кнопки закрытия, когда текстовый редактор не пуст, нам нужно добавить сообщение и его позицию в массивы модели, а затем очистить текстовый редактор:
Наконец, добавьте представление Chat внутрь нашего ContentView и запустите приложение:
Все сделано! Спасибо за прочтение.
