当前位置： 移动技术网 > IT编程>移动开发>IOS > iOS开发 - 在SwiftUI中显示模态视图

iOS开发 - 在SwiftUI中显示模态视图

2020年03月09日  | 移动技术网IT编程  | 我要评论

时角,安平,新年留言

在swiftui中显示模态视图

简介

这里教大家如何弹出一个简单的模态视图。分别有两个页面，contentview和gcpresentedview，以下对应简称为a和b。我们要做的是在a视图中点击按钮跳转到b视图，然后再从b视图点击按钮返回到a视图。

步骤

在a视图中创建按钮和模态视图代码

struct contentview: view {
    @state var ispresented = false
    
    var body: some view {
        button(action: {
            self.ispresented = true
        }, label: {
            text("present modally")
        })
        .sheet(ispresented: $ispresented) {
            gcpresentedview()
        }
    }
}

使用@state对属性进行修饰，在 swiftui 内部会自动转换为一对getter,setter，对这个属性进行赋值时会触发视图更新。

$ispresented能够将值引用（引用方法是在值前方加一个$符号），当引用的值发生改变时，这个改变会向外传递。

.sheet方法用于弹出一个模态视图，在swiftui中的定义为。

public func sheet<content>(ispresented: binding<bool>, ondismiss: (() -> void)? = nil, @viewbuilder content: @escaping () -> content) -> some view where content : view

在b视图中创建按钮和关闭模态视图代码

struct gcpresentedview: view {
    @environment(\.presentationmode) var mode
    
    var body: some view {
        button(action: {
            self.mode.wrappedvalue.dismiss()
        }, label: {
            text("dismiss")
        })
    }
}

@environment获取环境变量presentationmode，我们可以通过这个变量调用wrappedvalue.dismiss()可以关闭模态视图。

直接在 xcode 运行预览

总结

使用 swiftui 框架处理界面方便很多，不用太多的定义，我们只需要将界面进行描述出来就可以了。这个教程示例中使用到了 button 和 text 控件，也用到了@state, binding, @environment 技术点。教程很简单，放上来大家一起学习，教程里的代码已放在了github上面，点击这里获取代码。

声明

博文作者：garveycalvin
博文出处：http://www.cnblogs.com/garveycalvin/
本文版权归作者和博客园共有，欢迎转载，但须保留此段声明，并给出原文链接，谢谢合作！

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网