Разработка

Используем диалог подтверждения в SwiftUI

Структурированные варианты действий в диалоге подтверждения позволяют пользователям легко сделать выбор, не чувствуя себя перегруженными, добавляя ясность в пользовательский путь и сохраняя интерфейс чистым и сфокусированным.

Опубликовано

2 месяца назад

13.01.2025

Автор:

AppTractor

Экран confirmationDialog — это компонент SwiftUI, который представляет временное диалоговое окно для подтверждения действия и предоставления набора связанных с ним опций. Он появляется в нижней части экрана и предлагает пользователям кнопки для выбора.

В экосистеме Apple он используется, когда вы хотите:

Представить пользователю набор опций или конкретный контекст;
Подтвердить намерение пользователя, прежде чем приступить к действию, которое может быть потенциально опасным;
Предложить способ отменить действие и отказаться от него.

.confirmationDialog(
    // 1. The title of the Sheet
    "Title for the confirmation Dialog Sheet",
    
    // 2. The bool to enable the presentation of the sheet
    isPresented: $isPresented, 
    
    // 3. The visibility of the title
    titleVisibility: .visible, 
    
    // 4. Data to be presented
    presenting: dataToPresent
    
) { data in
    // 5. Buttons for different types of actions
    // a. A destructive action
    Button("Confirm", role: .destructive) {
        // Do something
    }
    // b. Different Options Actions
    Button("An action") {
        // Do something
    }
    Button("Another action") {
        // Do something
    }
    
    // c. Cancel the action
    Button("Cancel", role: .cancel) {
        isPresented = false
    }
}

​x
 
.confirmationDialog(    // 1. The title of the Sheet    "Title for the confirmation Dialog Sheet",        // 2. The bool to enable the presentation of the sheet    isPresented: $isPresented,         // 3. The visibility of the title    titleVisibility: .visible,         // 4. Data to be presented    presenting: dataToPresent    ) { data in    // 5. Buttons for different types of actions    // a. A destructive action    Button("Confirm", role: .destructive) {        // Do something    }    // b. Different Options Actions    Button("An action") {        // Do something    }    Button("Another action") {        // Do something    }        // c. Cancel the action    Button("Cancel", role: .cancel) {        isPresented = false    }}

ConfirmDialog(_:isPresented:titleVisibility:presenting:actions:) — это метод, который принимает несколько параметров, а именно:

titleKey: локализованная строка, описывающая заголовок диалога;
isPresented: булево значение, позволяющее представить диалог;
titleVisibility: управляет видимостью заголовка. Значение по умолчанию установлено как automatic и адаптируется в зависимости от платформы и контекста, но может быть переопределено на visible или hidden в зависимости от того, должен ли заголовок всегда отображаться или нет;
presenting: любой тип данных, которые должны быть представлены в диалоге и которыми можно манипулировать;
actions — набор действий, которые пользователь может выбрать для выполнения:
- например, удаление данных навсегда;
- различные действия, не играющие особой роли;
- действие, позволяющее закрыть лист без выполнения каких-либо действий.

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

import SwiftUI

struct DotsView: View {
    
    @State var isPresented: Bool = false
    @State var settingData: SettingData = .init(dotsTurnedOn: true, colorModality: .random)
    var body: some View {
        ZStack {
            Color.black
                .ignoresSafeArea()
            VStack(spacing: 0) {
                ForEach(0..<90) { row in
                    HStack(spacing: 2) {
                        ForEach(0..<40) { column in
                            LightingDot(settingData: $settingData)
                        }
                    }.offset(x: row%2 == 0 ? 0 : 7.5, y: 0)
                }
            }
            if settingData.dotsTurnedOn{
                Button {
                    isPresented.toggle()
                } label: {
                    Text("Change Color")
                }
                .buttonStyle(.borderedProminent)
                
                // The confirmation dialog
                .confirmationDialog("Are you sure you want to change color of the dots?", isPresented: $isPresented, titleVisibility: .visible, presenting: $settingData, actions: { action in
                    Button("Turn off the colors", role: .destructive){
                        settingData.dotsTurnedOn = false
                        settingData.colorModality = .off
                    }
                    Button("Random"){
                        settingData.colorModality = .random
                    }
                    Button("Pink"){
                        settingData.colorModality = .pink
                    }
                    Button("Teal"){
                        settingData.colorModality = .teal
                    }
                    Button("Yellow"){
                        settingData.colorModality = .yellow
                    }
                    Button ("Cancel", role: .cancel){
                        isPresented = false
                    }
                    Button ("Cancel", role: .cancel){
                    isPresented = false
                    }
                }).padding(.top, 600)
          
            } else {
                Text("The dots are off and cannot be turned on again.")
                    .foregroundStyle(.white)
            }
        }
    }
}

struct LightingDot: View {
    @Binding var settingData: SettingData
    @State private var isFlashing: Bool = false
    var body: some View{
        Circle()
            .fill(settingData.color)
            .frame(width: 15, height: 15)
            .opacity(self.isFlashing ? 0.8 : 0.3)
        
            .animation(settingData.dotsTurnedOn ? Animation.easeInOut(duration: Double.random(in: 0.5...1.5)).repeatForever(autoreverses: true) : nil, value: Double.random(in: 0.5...1.5))
            .onAppear {
                self.isFlashing = true
            }
    }
 }


struct SettingData{
    var dotsTurnedOn: Bool
    var colorModality: ColorModality
    
    enum ColorModality: String{
        case teal = "teal"
        case yellow = "yellow"
        case pink = "pink"
        case random = "random"
        case off = "off"
    }
    
    var color: Color {
        switch colorModality{
        case .teal: return Color.teal
        case .yellow: return Color.yellow
        case .pink: return Color.pink
        case .random: return [Color.teal, Color.yellow, Color.purple, Color.pink].randomElement()!
        case .off: return Color.clear
        }
    }
}

xxxxxxxxxx
 
import SwiftUI​struct DotsView: View {        @State var isPresented: Bool = false    @State var settingData: SettingData = .init(dotsTurnedOn: true, colorModality: .random)    var body: some View {        ZStack {            Color.black                .ignoresSafeArea()            VStack(spacing: 0) {                ForEach(0..<90) { row in                    HStack(spacing: 2) {                        ForEach(0..<40) { column in                            LightingDot(settingData: $settingData)                        }                    }.offset(x: row%2 == 0 ? 0 : 7.5, y: 0)                }            }            if settingData.dotsTurnedOn{                Button {                    isPresented.toggle()                } label: {                    Text("Change Color")                }                .buttonStyle(.borderedProminent)                                // The confirmation dialog                .confirmationDialog("Are you sure you want to change color of the dots?", isPresented: $isPresented, titleVisibility: .visible, presenting: $settingData, actions: { action in                    Button("Turn off the colors", role: .destructive){                        settingData.dotsTurnedOn = false                        settingData.colorModality = .off                    }                    Button("Random"){                        settingData.colorModality = .random                    }                    Button("Pink"){                        settingData.colorModality = .pink                    }                    Button("Teal"){                        settingData.colorModality = .teal                    }                    Button("Yellow"){                        settingData.colorModality = .yellow                    }                    Button ("Cancel", role: .cancel){                        isPresented = false                    }                    Button ("Cancel", role: .cancel){                    isPresented = false                    }                }).padding(.top, 600)                      } else {                Text("The dots are off and cannot be turned on again.")                    .foregroundStyle(.white)            }        }    }}​struct LightingDot: View {    @Binding var settingData: SettingData    @State private var isFlashing: Bool = false    var body: some View{        Circle()            .fill(settingData.color)            .frame(width: 15, height: 15)            .opacity(self.isFlashing ? 0.8 : 0.3)                    .animation(settingData.dotsTurnedOn ? Animation.easeInOut(duration: Double.random(in: 0.5...1.5)).repeatForever(autoreverses: true) : nil, value: Double.random(in: 0.5...1.5))            .onAppear {                self.isFlashing = true            }    } }​​struct SettingData{    var dotsTurnedOn: Bool    var colorModality: ColorModality        enum ColorModality: String{        case teal = "teal"        case yellow = "yellow"        case pink = "pink"        case random = "random"        case off = "off"    }        var color: Color {        switch colorModality{        case .teal: return Color.teal        case .yellow: return Color.yellow        case .pink: return Color.pink        case .random: return [Color.teal, Color.yellow, Color.purple, Color.pink].randomElement()!        case .off: return Color.clear        }    }}

Видеоплеер

Media error: Format(s) not supported or source(s) not found

Скачать файл: https://apptractor.ru/wp-content/uploads/2025/01/bottom.mp4?_=1

00:00

Используйте клавиши вверх/вниз, чтобы увеличить или уменьшить громкость.

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

Это гарантирует, что пользователю будут представлены четкие варианты, когда он захочет изменить настройки цвета, а также защитит от непреднамеренных действий, таких как отключение точек навсегда.

Использование диалога подтверждения в SwiftUI улучшает как функциональность, так и пользовательский опыт.

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

Если вы нашли опечатку - выделите ее и нажмите Ctrl + Enter! Для связи с нами вы можете использовать info@apptractor.ru.