Connect with us

Разработка

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

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

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

/

     
     

Экран 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
    }
}

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

  1. titleKey: локализованная строка, описывающая заголовок диалога;
  2. isPresented: булево значение, позволяющее представить диалог;
  3. titleVisibility: управляет видимостью заголовка. Значение по умолчанию установлено как automatic и адаптируется в зависимости от платформы и контекста, но может быть переопределено на visible или hidden в зависимости от того, должен ли заголовок всегда отображаться или нет;
  4. presenting: любой тип данных, которые должны быть представлены в диалоге и которыми можно манипулировать;
  5. 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
        }
    }
}

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

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

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

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

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

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

Популярное

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: