Поля содержимого в 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")
        }
    }
}

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)
        }
    }
}

xxxxxxxxxx

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
            )
        }
    }
}

xxxxxxxxxx

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. Наконец-то у нас появился способ управлять ею и сделать наши приложения еще более доступными и адаптируемыми под разные размеры экрана. Надеюсь, вам понравился этот пост.

Источник