SwiftUI Modal Alert

作者: 一粒咸瓜子 | 来源:发表于2021-12-09 14:03 被阅读0次

记录一个状态值,操作触发状态值的改变进而引发弹出动作

Modal

.sheet(isPresented: <Binding<Bool>>, content: <() -> View>)

// 如果仅在当前页面管理,则只需要声明成 @State 即可
@State var isModal = false

var body: some View {
    // ...
    Button("Modal") {
        // 改变状态值
        isModal = true
    }.sheet(isPresented: self.$isModal) {
         modalView()
    }
}

dimiss

法一:标志位传递

在内页中声明 @Binding var isModal: Bool,将外部标志位 isModal 传递到内页,内页操作触发标志位改变,引发界面刷新

法二:block(推荐)

在内页声明 @State var closeActionBlock: (()->())?,按钮点击时抛出事件让外部响应,改变标志位触发界面刷新

Button("Modal") {
    // 改变状态值
    isModal = true
}.sheet(isPresented: self.$isModal) {
    modalView {
        self.$isModal = false
    }         
}

法三:使用环境变量进行页面的自我管理

内页自我管理:

// iOS13:
@Environment (\.presentationMode) var presentationMode

Button("dimiss me") {    
presentationMode.wrappedValue.dismiss()
}

// iOS15:
@Environment (\.dismiss) var dismiss

Button("dismiss me") {    
    dismiss()
}

不过这种方法需要注意几点:

  • 消失整个界面的时候,只能引出来的界面(例如NavigationView或者弹出的Alert、Sheet、Popover),不然 .presentationMode.wrappedValue.isPresented 的值是 false,自然无法 dismiss()

  • 弹出的Alert、Sheet或者Popover之类的,使用这个方法消失的是激活弹出的那个界面,而不是弹出之后的界面。


Alert

.alert(isPresented: <Binding<Bool>>, actions: <() -> View>)

@State var isAlert = false

var body: some View {
    // ...
    Text("Tap")
        .onTapGesture {
            // 改变状态值
            isAlert = true
        }.alert(isPresented: self.$isAlert) {
            Alert(
                title: Text("Title"),
                message:Text("message"),
                primaryButton:
                    Alert.Button.default(Text("cancel")),
                secondaryButton:
                    Alert.Button.default(Text("copy"), action:{
                        UIPasteboard.general.string = "hello world"
                    })
            )
        }
}

.alert<Item>(item: Binding<Item?>, content: (Item) -> Alert) -> some View where Item : Identifiable

alert(item:content:) 接受一个 Identifiable? 的绑定,当这个绑定值不为 nil 时,显示一个弹框。

.alert(item: settingsBinding.loginError) { error in 
    Alert(title: Text(error.localizedDescription))
}

enum AppError: Error, Identifiable {
    var id: String { localizedDescription }
    case passwordWrong
}

extension AppError: LocalizedError {
    var localizedDescription: String {
        switch self {
        case .passwordWrong: return "密码错误"
        }
    }
}

相关文章

  • SwiftUI Modal Alert

    记录一个状态值,操作触发状态值的改变进而引发弹出动作 Modal .sheet(isPresented: >, ...

  • 重新定义移动端提示框

    vue-modal Alert alertProps 参数 Confirm confirmProps 参数 Toa...

  • NSAlert

    注意事项: 执行run Modal 会block 主线程等alert 退出modal 状态之后,主线程恢复运行。m...

  • RN分享会

    内容 介绍下页面导航,常用控件:viewpager、scrollView、modal常用api:Alert 、To...

  • SwiftUI:Alert 弹窗

    如果发生重要事件,通知用户的一种常见方法是使用警报Alert弹窗-根据您的需要,该弹出窗口包含标题,消息和一个或两...

  • SwiftUI iOS 提示组件之 经典仿Apple Music

    实战需求 SwiftUI iOS 提示组件之 经典仿Apple Music和 AppStore反馈Alert To...

  • 产品随想:关于反馈(feedback)

    ant.design里反馈定义了几种形式,包括警告提示(Alert),抽屉(Drawer),对话框(Modal),...

  • SwiftUI-Modal presentations

    模态演示文稿 在单独的视图中呈现内容,以提供有重点的互动。 要提请注意一个重要的、范围狭窄的任务,您会显示一个模态...

  • bootstrap的弹窗

    bootstrap的弹窗叫modal,不是客户端的alert或者dialog,妈蛋傻傻github搜了半天,思维定...

  • oc中的alert 之modal

    微信小程序中的modal的使用以清除系统缓存为例: 欢迎更多开发者加qq 556120515 群进来交流

网友评论

    本文标题:SwiftUI Modal Alert

    本文链接:https://www.haomeiwen.com/subject/hnsffrtx.html