Как использовать модификатор отредактированный
В этом руководстве мы собираемся создать пользовательский интерфейс, похожий на Instagram, чтобы продемонстрировать функциональность отредактированного модификатора. Пользовательский интерфейс будет включать пост и один комментарий для простоты.
Комментарии
Во-первых, нам нужно создать структуру для данных комментария. Возможно, вам потребуется добавить переменную для изображения профиля каждого комментария. Для учебника мы сохраняем только имя пользователя и комментарий к нему.
Создайте представление с горизонтальным стеком внутри и добавьте два объединенных Text() представления. Убедитесь, что тексты имеют начальное выравнивание и ширину экрана, используя .infinity. Мы сделаем то же самое для большинства элементов пользовательского интерфейса, которые мы добавим дальше.
Сообщения
Создайте структуру для данных публикации. Добавьте к нему переменные, которые вы найдете ниже. Последняя переменная будет иметь тип CommentData, который мы создали выше. Для более реалистичного подхода вам понадобится массив для первых нескольких комментариев, чтобы сократить время загрузки, а не только верхний комментарий.
Создайте структурный вид для сообщений. Добавьте переменную типа PostData и VStack внутри переменной тела. Внутри стека у нас будет три раздела: в верхней части сообщения, в самом сообщении и под сообщением.
В первом разделе добавьте Image() и передайте ему изображение профиля, которое есть в нашей переменной postData. Используйте модификатор .clipShape() и придайте ему форму Circle(), чтобы сделать нашу фотографию профиля круглой. В качестве имени пользователя вставьте Text() и передайте ему имя пользователя, хранящееся в нашей переменной postData.
Во втором разделе вставьте Image() для фотографии публикации и ограничьте ее максимальную высоту. Используйте здесь модификатор .scaledToFit(). Мы не хотим, чтобы изображение было обрезано с какой-либо стороны, в отличие от фото профиля.
Под постом мы хотим видеть количество лайков и комментариев. Добавьте изображение сердца в Image() и количество лайков в Text(). Затем проделайте то же самое с комментариями. Добавьте изображение с описанием комментариев, а затем количество комментариев. Для изображений вы можете использовать символы SF, которые предлагает Apple, как показано ниже:
В последнем разделе у нас будет описание сообщения и CommentView. У нас есть переменная, которая хранит наш верхний комментарий внутри структуры PostData, которую мы создали выше. Мы можем передать его CommentView вот так:
ContentView
Чтобы продемонстрировать, над чем мы работали, мы создадим переменную PostData. Заполните все параметры. Старайтесь не использовать однострочное предложение для описания и комментария, так как это повлияет на внешний вид заполнителей. Для поста я использовал изображение от sparklin_pink_lemonade. Выбранное изображение повлияет на размеры заполнителя из-за модификатора scaledToFit. Цвет заполнителя будет цветом переднего плана, который вы выбираете для элементов пользовательского интерфейса.
Внутри тела добавьте ScrollView с двумя PostViews, разделенными разделителем. Добавьте модификатор .redacted(reason: .placeholder) ко второму PostView, затем запустите приложение, чтобы увидеть результаты.
Спасибо за прочтение!
