@Previewable: динамические превью SwiftUI

В Xcode 16 появился макрос @Previewable для превьюшек SwiftUI, позволяющий использовать динамические свойства в предварительном просмотре. Вы сможете делать более богатые и динамичные превью ваших представлений SwiftUI без необходимости оборачивать состояние внутри дочерних представлений.

Swift и SwiftUI используют макросы, чтобы скрыть детали реализации, и этот новый attached-macro — отличный пример уменьшения количества шаблонного кода.

Что такое макрос @Previewable?

Когда вы раньше использовали макрос #Preview, вы, скорее всего, сталкивались с ситуацией, когда не могли определить локальные переменные состояния. Эти переменные полезны, когда вы хотите динамически тестировать свои представления внутри предварительных просмотров SwiftUI.

Например, у вас может быть превью, представляющее переключатель:

#Preview("On") {
    Toggle("Enable slow animations", isOn: .constant(true))
}

#Preview("Off") {
    Toggle("Enable slow animations", isOn: .constant(false))
}

Как вы можете видеть, мы определили два отдельных превью для каждого состояния переключения. Это также будет отражено в навигаторе предварительного просмотра SwiftUI с вкладками «Включено» и «Выключено» для переключения представлений. К сожалению, не было способа сохранить локальное состояние, если мы не обернули тумблер внутри контейнерного представления:

struct TogglePreviewContainer: View {
    @State private var isOn: Bool = false
    
    var body: some View {
        Toggle("Enable slow animations", isOn: $isOn)
    }
}

#Preview("Dynamic") {
    TogglePreviewContainer()
}

Это приводит к появлению шаблонного кода, который лучше не писать, поэтому команда SwiftUI решила ввести вместо него новый макрос @Previewable:

#Preview("New in Xcode 16") {
    /// Using `@Previewable`, you can use dynamic properties inline.
    @Previewable @State var isOn: Bool = false
    
    Toggle("Enable slow animations", isOn: $isOn)
}

Пометка переменной макросом previewable позволяет использовать динамические свойства в предварительных просмотрах SwiftUI. Другими словами, вы сможете напрямую взаимодействовать с вашим тумблером и видеть, как он работает:

Видео демонстрирует, как предварительный просмотр SwiftUI стал интерактивным, по сравнению с ранее определенными предварительными просмотрами, которые не реагируют на нажатия.

Как работает макрос @Previewable?

Как показано ниже, макрос пишет код, аналогичный тому, что мы делали раньше вручную. Как мы узнали в “Макросы Swift: Расширение Swift с помощью новых видов выражений”, мы можем заглянуть в макрос и посмотреть, какой код он сгенерировал:

Макрос @Previewable оборачивает ваш предварительный просмотр внутри представления, чтобы обеспечить локальные свойства состояния.

Как вы видите, макрос сгенерировал представление __P_Previewable_Transform_Wrapper, которое обернуло наш тумблер. Выделенные декларации становятся свойствами представления, а все остальные утверждения формируют тело представления. В целом, этот новый макрос сокращает количество кода и позволяет писать компактные и интерактивные предварительные просмотры SwiftUI.

Заключение

Xcode 16 улучшил способ определения предварительных просмотров SwiftUI для представлений, содержащих состояние. Нам больше не нужно оборачивать наши элементы в пользовательские контейнеры, но мы можем напрямую взаимодействовать со свойствами, используя макрос @Previewable.

Источник