IOS开发

Wesley13
• 阅读 701

在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 运行预览

IOS开发

总结

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

声明

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

点赞
收藏
评论区
推荐文章
待兔 待兔
4个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
皕杰报表小结
1.在使用皕杰报表时,我们会发现皕杰报表总共有下列五个视图区我们可以关闭或打开每个视图区,方便我们的报表设计。有的时候我们关闭了某个视图的话,我们可以通过点击左上角的视图菜单来重新打开我们所需要用的视图区域。这时候我们点击每个视图的左上角就会发现有分离按钮
Stella981 Stella981
3年前
Graphics View绘图架构(二)
GraphicsView结构的主要类包括:视图类QGraphicsView、场景类QGraphicsScene、和各种图形项类(基类都是QGraphicsItem)1\.QGraphicsView用于观察一个场景的物理窗口  场景小于视图,整个场景在视图中可见;当场景大于视图时,试图自动提供卷滚条  QGraphicsView的视口坐标等
Wesley13 Wesley13
3年前
mysql(视图 事务 索引 外键)
视图视图本质就是对查询的封装创建视图(定义视图 起名以v\_开头)createviewv\_studentsasselectclasses.nameas c\_name,students.\fromstudentsinnerjoinclassesonstudents.cls\_idclasses.id;查
Easter79 Easter79
3年前
SwiftUI直通车系列(2)—— 列表视图
SwiftUI直通车系列(2)——列表视图  列表视图的开发中非常常用的页面元素。SwiftUI中也有专门用来渲染列表的元素提供。一、编写行视图   列表实际上是一组行视图的组合,在布局列表视图之前,你首先需要定义好行视图的布局。例如,我们使用一个Image元素和两个Tex
Wesley13 Wesley13
3年前
AJAX之跨域请求
  一、引子  我现在开启了两个django项目,分别叫Demo1和Demo2,Demo1中有一个路径‘http://127.0.0.1:8000/index/’,对应的视图是index视图返回一个index页面,页面中只有一个button按钮,按钮绑定了一个单击事件,点击之后会发送一个ajax请求,请求的路径为‘http://127.0.
Wesley13 Wesley13
3年前
MySQL学习笔记20
二十、使用视图1、视图视图是虚拟的表。与包含数据的表不一样,视图只包含使用时动态检索数据的查询。例如:SELECTcust\_name,cust\_contact     FROMcustomers,orders,orderitems     WHEREcustomers.cust\_idorder
Wesley13 Wesley13
3年前
MySQL视图,函数,触发器,存储过程
1\.视图  视图是一个虚拟表,它的本质是根据SQL语句获取动态的数据集,并为其命名,用户使用时只需使用【名称】即可获取结果集,可以将该结果集当做表来使用。使用视图我们可以把查询过程中的临时表摘出来,用视图去实现,这样以后再想操作该临时表的数据时就无需重写复杂的sql了,直接去视图中查找即可,但视图有明显地效率问题,并且视
Wesley13 Wesley13
3年前
MySQL基础知识——VIEW视图
点击关注上方“SQL数据库开发”,设为“置顶或星标”,第一时间送达干货视图的定义视图是可视化的表。本章讲解如何创建、更新和删除视图。为什么使用视图视图在数据库中应用的比较频繁,主要基于以下几点:重用SQL语句。化复杂的SQL操作。在编写查询后,可以方
Easter79 Easter79
3年前
SwiftUI 跨组件数据传递
作者:Cyandev,iOS和MacOS开发者,目前就职于字节跳动0x00前言众所周知,SwiftUI的开发模式与React、Flutter非常相似,即都是声明式UI,由数据驱动(产生)视图,视图也会与数据自动保持同步,框架层会帮你处理“绑定”的问题。在声明式UI中不存在命令式地让一个视图变成xxx