欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

IOS在SwiftUI中显示模态视图的实例代码

程序员文章站 2022-05-17 08:50:49
简介这里教大家如何弹出一个简单的模态视图。分别有两个页面,contentview和gcpresentedview,以下对应简称为a和b。我们要做的是在a视图中点击按钮跳转到b视图,然后再从b视图点击按...

简介

这里教大家如何弹出一个简单的模态视图。分别有两个页面,contentviewgcpresentedview,以下对应简称为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中显示模态视图的实例代码

总结

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

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