Разработка
Используем диалог подтверждения в 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:)
— это метод, который принимает несколько параметров, а именно:
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 } } }
В этом примере, представление DotsView
создает интерактивную сетку анимированных, мигающих точек, меняющих свой цвет в зависимости от предпочтений пользователя. Благодаря диалогу подтверждения пользователь может выбрать цветовую модальность точек или отключить их.
Это гарантирует, что пользователю будут представлены четкие варианты, когда он захочет изменить настройки цвета, а также защитит от непреднамеренных действий, таких как отключение точек навсегда.
Использование диалога подтверждения в SwiftUI улучшает как функциональность, так и пользовательский опыт.
В примере, запрашивая подтверждение пользователя перед выполнением потенциально разрушительных действий, таких как постоянное отключение точек, диалог предотвращает ошибки и обеспечивает преднамеренное взаимодействие.
Структурированные варианты действий в диалоге подтверждения позволяют пользователям легко сделать выбор, не чувствуя себя перегруженными, добавляя ясность в пользовательский путь и сохраняя интерфейс чистым и сфокусированным.
-
Видео и подкасты для разработчиков4 недели назад
SwiftUI: алхимия приложений — превращаем идеи в реальность
-
Новости4 недели назад
Видео и подкасты о мобильной разработке 2025.3
-
Магазины приложений2 недели назад
Приложение Hot Tub появится на iOS в EC
-
Разработка3 недели назад
Смешивание цветов в SwiftUI