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

Макрос SwiftUI #Preview

До введения нового макроса #Preview вы определяете структуру, соответствующую протоколу PreviewProvider, для создания предварительного просмотра представления. Вот пример:

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

С помощью макросов #Preview вы указываете Xcode создать предварительный просмотр следующим образом:

// The basic syntax
#Preview {
    ContentView()
}
 
// Configure the preview's name
#Preview("Pie Chart View") {
    PieChartView()
}

Как видите, #Preview упрощает определение превью. При желании вы можете передать макросу #Preview имя, чтобы настроить имя предварительного просмотра.

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

Предварительный просмотр нескольких представлений

При использовании PreviewProvider вы можете встроить несколько представлений для предварительного просмотра с помощью Group.

struct ArticleView_Previews: PreviewProvider {
    static var previews: some View {
        Group {
            ArticleListView()
                                .previewDisplayName("Article List View")
 
                        ArticleView()
                .previewDisplayName("Article View")
        }
    }
}

Если вы используете макрос #Preview, вы можете определить несколько блоков секций #Preview. Например…