IOS在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上面，点击这里获取代码 。

以上所述是小编给大家介绍的IOS在SwiftUI中显示模态视图的实例代码，希望对大家有所帮助，也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • iOS SwiftUI 颜色渐变填充效果的实现

    SwiftUI 为我们提供了各种梯度选项,所有这些选项都可以通过多种方式使用. Gradient 渐变器 A color gradient represented as an array of color stops, each having a parametric location value. gradient是一组颜色的合集,每个颜色都忽略位置参数 LinearGradient 线性渐变器 线性渐变器拥有沿轴进行渐变函数,我们可以自定义设置颜色空间.起点和终点. 下面我们看看Linear

  • IOS在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

  • Angular 实现输入框中显示文章标签的实例代码

    Angular 实现输入框中显示文章标签的实例代码

    很多网站发帖的时候标签输入框看起来像是在 <input> 元素中直接显示标签. 比如这种 一开始以为是把 <span> 放在 <input> 中, 看了下 Stack Overflow 和 SegmentFault 的实现方式, 原来是用一个 <div> 把 <span> 和 <input> 包起来, 然后让 <div> 模仿出输入框的样式. 再给 <div> 加上eventListensor, 点击 <

  • iOS中 LGLAlertView 提示框的实例代码

    使用与iOS8 以后,只是把系统的UIAlertController进行了封装,省的每次用的时候要写很多的代码.封装后只需要一句代码即可 , deome 地址 :https://github.com/liguoliangiOS/LGLAlertView.git 上代码LGLAlertView.h: #import <Foundation/Foundation.h> #import <UIKit/UIKit.h> typedef NS_ENUM(NSInteger, LGLAlert

  • Android中显示GIF动画的实现代码

    Android中显示GIF动画的实现代码

    本文实例讲述了Android中显示GIF动画的实现代码.分享给大家供大家参考,具体如下: gif图动画在android中还是比较常用的,比如像新浪微博中,有很多gif图片,而且展示非常好,所以我也想弄一个.经过我多方的搜索资料和整理,终于弄出来了,其实github上有很多开源的gif的展示代码,我下载过几个,但是都不是很理想,不是我完全想要的.所以有时候就得自己学会总结,把开源的东西整理成自己的,现在无聊,也正好有朋友需要,所以现在整理了一下,留着以后备用! 废话不多说,直接上图: 在这里主要用

  • python Matplotlib底图中鼠标滑过显示隐藏内容的实例代码

    python Matplotlib底图中鼠标滑过显示隐藏内容的实例代码

    在使用Matplotlib画图过程中,有些内容必须鼠标点击或者划过才可以显示,这个问题可以依赖于annotate(s='str' ,xy=(x,y) ,xytext=(l1,l2) ,..)这个函数,其中s 为注释文本内容 , xy 为被注释的坐标点, xytext 为注释文字的坐标位置,其他参数可自行百度哈.当鼠标滑过时候,将其设置为可见,默认情况下为隐藏.下面是一个小例子: # -*- coding: UTF-8 -*- import matplotlib.pyplot as plt fig

  • java中对list分页并显示数据到页面实例代码

    有时候需要根据条件查询得出的数据较多,需要分页显示到页面上.这时点击下一页就不方便每次带查询条件在数据库中分页.可以在list中进行分页. page的model类: public class Page { private Integer currentPage;//当前页 private int pageSize;//每页显示记录条数 private int totalPage;//总页数 private List<?> dataList;//每页显示的数据 private int star;

  • Android 模拟新闻APP显示界面滑动优化实例代码

    内容: 1.滑动优化(滑动时不加载图片,停止才加载) 2.第一次进入时手动加载 代码如下: 1.界面布局 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="horizontal" android:

  • IOS NSUserDefault 记住用户名及密码功能的实例代码

    一般的登录界面都会有一个记住密码的选项,要实现这个功能可以使用NSUserDefault,这里只是讲解明文的处理方式,虽然这样是有一定的风险性的但是目前只是了解如何实现这个功能: 首先声明一个NSUserDefault对象: let userDefaults = NSUserDefaults.standardUserDefaults() //本地操作所需 然后根据是否记住密码按钮的状态来判断是否要为用户名和密码设置值,如果是记住密码,那么需要取出需要记住的密码,并且为这两个TextField赋值

  • SpringMVC中使用Thymeleaf模板引擎实例代码

    本文研究的主要是SpringMVC中使用Thymeleaf模板引擎的相关内容,具体介绍如下. Thymeleaf提供了一组Spring集成,允许您将其用作Spring MVC应用程序中全面替代JSP的功能. Maven依赖 <!-- thymeleaf-spring4 --> <dependency> <groupId>org.thymeleaf</groupId> <artifactId>thymeleaf-spring4</artifa

  • 在Vue项目中使用d3.js的实例代码

    之前写一个 Demo里面 有些东西要使用d3实现一些效果 但是在很多论坛找资源都找不到可以在Vue里面使用D3.js的方法,npm 上面的D3相对来说 可以说是很不人性化了 完全没有说 在webpack上怎么使用D3.js 最后折腾很久 看到某位外国大佬 看他的案例 成功的实现了在Vue项目里面实现D3的使用 首先安装 npm install d3 --save-dev 以防万一,然后看package.json 安装完成 在我们开始之前,让我们渲染一个Vue组件,它使用常规的D3 DOM操作呈现

随机推荐