Разработка
Поля содержимого в SwiftUI
В SwiftUI появился набор модификаторов представлений, позволяющий эффективно управлять безопасной областью в наших представлениях. Во многих случаях безопасная область — это то место, где вы хотите разместить свой контент. Сегодня мы узнаем о новой концепции content margin, которую представил SwiftUI, и о том, чем она отличается от safe area (безопасной области).
Начнем с простого примера, демонстрирующего список с сотней элементов.
struct ContentView: View { var body: some View { NavigationStack { List { ForEach(1..<100) { index in Text("Item \(index)") } } .font(.title) .navigationTitle("Item list") } } }
Как вы можете видеть в примере выше, мы размещаем представление List
с кучей представлений Text
внутри. Это может отлично смотреться на iPhone, но на iPad это выглядит очень странно, поскольку весь текст размещается с краю, а центр экрана остается пустым.
При использовании UIKit у нас есть readableContentGuide
. Буквально, это еще одна безопасная область, которая адаптируется к размеру экрана, но только для вашего текстового контента. К сожалению, в SwiftUI у нас нет доступа к readableContentGuide
.
Мы можем обойти эту проблему, увеличив безопасную область на iPad следующим образом:
struct ContentView: View { @Environment(\.horizontalSizeClass) private var sizeClass var body: some View { NavigationStack { List { ForEach(1..<100) { index in Text("Item \(index)") } } .font(.title) .navigationTitle("Item list") .safeAreaPadding(.horizontal, sizeClass == .regular ? 200 : 0) } } }
Мы смогли сместить содержимое к центру на iPad с помощью значения окружения horizontalSizeClass
и модификатора вида safeAreaPadding
. Однако, как вы можете видеть, это также смещает скроллбар от края к центру.
Нам нужен способ разграничить содержимое и панель инструментов в представлении и сдвинуть только содержимое, оставив панель инструментов на прежнем месте. К счастью, в SwiftUI появился новый модификатор представления contentMargins
, позволяющий сдвигать определенный тип содержимого в View.
struct ContentView: View { @Environment(\.horizontalSizeClass) private var sizeClass var body: some View { NavigationStack { List { ForEach(1..<100) { index in Text("Item \(index)") } } .font(.title) .navigationTitle("Item list") .contentMargins( .horizontal, sizeClass == .regular ? 200 : 0, for: .scrollContent ) } } }
Как видно из примера выше, мы используем модификатор вида contentMargins
, чтобы сместить только прокручиваемое содержимое внутри безопасной области. Но при этом полоса прокрутки остается на границе представления.
Модификатор вида contentMargins
принимает несколько параметров, позволяющих настраивать его поведение. Первый параметр — это край, который мы хотим сместить. Он может быть leading, trailing, top, horizontal, vertical или all, все сразу. Второй параметр — объем пространства, на которое мы хотим сдвинуться. Третий параметр — экземпляр типа ContentMarginPlacement
, который позволяет нам указать место, которое мы хотим сдвинуть. Например, это может быть scrollContent
, как в нашем примере. Другой вариант — scrollIndicators
, который смещает только индикатор.
contentMargins
— это важнейший элемент управления безопасной областью, которого раньше не хватало в SwiftUI. Наконец-то у нас появился способ управлять ею и сделать наши приложения еще более доступными и адаптируемыми под разные размеры экрана. Надеюсь, вам понравился этот пост.
-
Новости2 недели назад
Видеозвонки с Лили, Приключения и пианино — обновления Duolingo
-
Новости2 недели назад
Видео и подкасты о мобильной разработке 2024.39
-
Видео и подкасты для разработчиков6 дней назад
Lua – идеальный встраиваемый язык
-
Разработка2 недели назад
Android сломался или я чего-то не понимаю? — Обсуждение на Reddit