首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何使用UIHostingController/SwiftUI创建一个关闭视图的按钮?

使用UIHostingController/SwiftUI创建一个关闭视图的按钮可以通过以下步骤实现:

  1. 首先,确保你的项目中已经导入了SwiftUI框架。
  2. 创建一个新的SwiftUI视图,可以命名为"ContentView"。
  3. 在"ContentView"中,使用Button视图创建一个关闭按钮。代码示例如下:
代码语言:txt
复制
import SwiftUI

struct ContentView: View {
    @Environment(\.presentationMode) var presentationMode
    
    var body: some View {
        VStack {
            Text("Hello, World!")
            Button(action: {
                self.presentationMode.wrappedValue.dismiss()
            }) {
                Text("关闭视图")
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}
  1. 在你的UIViewController中,使用UIHostingController将SwiftUI视图包装起来,并将其作为根视图添加到视图层级中。代码示例如下:
代码语言:txt
复制
import UIKit
import SwiftUI

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let contentView = ContentView()
        let hostingController = UIHostingController(rootView: contentView)
        
        addChild(hostingController)
        view.addSubview(hostingController.view)
        
        hostingController.view.translatesAutoresizingMaskIntoConstraints = false
        hostingController.view.topAnchor.constraint(equalTo: view.topAnchor).isActive = true
        hostingController.view.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
        hostingController.view.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true
        hostingController.view.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true
        
        hostingController.didMove(toParent: self)
    }
}

通过以上步骤,你就可以在SwiftUI视图中创建一个关闭按钮,并在点击按钮时关闭当前视图。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

从用SwiftUI搭建项目说起

SwiftUI 谈声明式 UI 与类型系统 跨平台: 在最新swiftUI 5.1中,我们创建一个MultilPlatform App有了下面这些区别: ·Before func...实时预览: 这个画布显示控制是在下图标注地方,当然当你创建一个SwiftUIView时候它是默认创建展示,要是不见了就在下面去找: ?...搭建这样一个场景构建一个基本应用,包括登录和数据处理以及iOS常见控件在SwiftUI一些具体使用,这个项目会随着学习进度慢慢把所有的内容都基本补齐,下面是最基本导航+标签git效果。...SwiftUI 将会把使用过 @State 修饰器属性存储到一个特殊内存区域,并且这个区域和 View struct 是隔离....当 @State 装饰过属性发生了变化,SwiftUI 会根据新属性值重新创建视图 */ @State private var selectedTab = 0 var

4.5K20
  • 使用 SwiftUI 创建一个灵活选择器

    使用 UIKit 时,我总是将这种类型视图实现为具有特定 UICollectionViewFlowLayout UICollectionView。但在 SwiftUI 中该如何实现呢?...让我们来看看使用 SwiftUI 创建灵活选择器实现! 可选择协议 选择器最重要部分是,我们可以通过该视图组件选择一些所需选项。因此,首先创建一个 Selectable 协议。...FlexiblePicker 视图 最后,当所有逻辑准备好后,我们需要实现一个视图主体。如我之前所提到视图使用嵌套 ForEach 循环创建。...总结 这篇文章介绍了如何使用 SwiftUI 构建一个灵活选择器(FlexiblePicker),用于选择多个选项。...然后,详细介绍了实现该选择器逻辑,包括如何处理选项布局、宽度和高度,以及如何处理用户与按钮交互。 最后,提供了一个简单视图实现,可以在 SwiftUI使用该选择器。

    29720

    SwiftUI内容边距

    今天,我们将了解 SwiftUI 引入新内容边距概念以及它与安全区域区别。创建示例让我们从一个简单示例开始,演示带有一百个项目的列表。...可运行 Demo提供一个基于提供代码片段简化版本Swift Playground示例,用于演示如何使用contentMargins视图修饰符来管理内容边距。...(rootView: ContentView())PlaygroundPage.current.liveView = viewController在这个示例中,我们创建一个简单列表视图,其中包含 20...总结本文介绍了 SwiftUI内容边距管理,通过对比安全区域概念,解释了内容边距重要性。文章从创建示例开始,展示了在列表视图如何处理内容边距问题。...最后,引入了 contentMargins 视图修饰符,并详细解释了其用法和参数,以及如何使用它来管理内容边距。通过本文,读者可以更好地理解并掌握 SwiftUI 中内容边距管理技巧。

    17632

    SwiftUI TextField 进阶 —— 事件、焦点、键盘

    SwiftUI 3.0 中,苹果为开发者提供了一个远好于预期解决方案,同 onSubmit 类似,可以从更高视图层次来统一对视图 TextField 进行焦点判断和管理。...基础用法 SwiftUI 提供了一个 FocusState 属性包装器,用来帮助我们判断该视图 TextField 是否获得焦点。...对于同一个视图多个 TextField,你可以创建多个 FocusState 来分别关联对应 TextField,例如: struct OnFocusDemo:View{ @FocusState...使用快捷键获得焦点 当一个视图中有多个 TextField(包括 SecureField)时,我们可以直接使用Tab键按顺序在 TextField 中切换焦点,但 SwiftUI 并没有直接提供使用快捷键让某个...将键盘辅助视图集成到 toolbar 逻辑中也有些令人令人费解。 通过 UIKit 创建 当前阶段,通过 UIKit 来创建键盘辅助视图仍是 SwiftUI最优方案。

    13.3K10

    Ask Apple 2022 与 SwiftUI 有关问答(上)

    使用 environmentObject 情况下,如何避免创建实例视图被重新计算Q:如何在避免重新计算顶层视图 body 情况下,在不同子树两个子视图之间共享状态( 例如 ObservableObject...onAppear、init、viewDidLoadQ:在我应用程序中,我在 UIHostingController 中托管了 SwiftUI 视图,这些视图都处于一个 UITabBarController...A:当在其他类型 UIViewControllers 中使用 UIHostingController 时,你可能会通过调用托管控制器方法来触发视图加载提前发生。...如何改善一个包含大量 UITextField 视图效率Q:我有一个包含 132 个 UITextField SwiftUI 视图。我知道这个数量很大,但这是由业务逻辑决定。...使用它们应该只创建一个实例,然后可以在子视图中读取。这应该不会增加内存使用( 如果有的话,请提出反馈 )。如果你向你模型对象追加越来越多数据,你可能会增加内存使用,这是很正常

    12.3K20

    iOS13 Scene Delegate

    ,包括要创建场景类型,用于管理场景代理对象以及包含要显示初始视图控制器StoryBoard。...application(_:didDiscardSceneSessions:) : 在分屏中关闭其中一个或多个scene时候回调用,可以在该函数中销毁场景所使用资源。...四、SwiftUI中SceneDelegate SwiftUI创建iOS 13项目,所以SwiftUI应用程序主要依靠SceneDelegate来设置应用程序初始UI。...接着为SwiftUI项目创建了ContentView实例,并通过使用UIHostingController将其添加为根视图控制器。 该控制器用于将基于SwiftUI视图显示在屏幕上。...scene(_: willConnectTo: options: )函数内,创建一个SwiftUI视图,将其放置在托管控制器中,然后将控制器分配给window属性视图控制器,并将该窗口放置在应用程序

    5.3K20

    Airbnb 三阶段 SwiftUI 迁移实践

    如上所述,第一步是基于一系列风格使用 SwiftUI 重建现有的设计系统,这些风格可以通过修饰符实例化并传给视图。这为开发人员使用几行代码轻松定制 UI 组件提供了基础。...第二步是构建基础设施,实现基于 UIKit Epoxy 视图SwiftUI 视图之间双向桥接。桥接实现细节可以在原文中找到。...Airbnb 工程师做出一个决定是将 Epoxy 单向数据流应用到 SwiftUI,将 ObservableOject 作为状态类基础,在每次状态变化时触发 SwiftUI 重新渲染。...为此,他们为每个定义视图变体起了一个名字,以便与他们快照测试服务一起使用,并让所有视图变体遵循 Xcode PreviewProvider 协议,以便使用 Xcode 预览。...Bodayle 解释说,与 UIKit 实现相比,现在代码量大约减少到原来六分之一,而且没有出现与 SwiftUI 响应性相关性能损失,除了实例化 UIHostingController一点开销

    22110

    SwiftUI 中用 Text 实现图文混排

    一个和一组在 SwiftUI 中,Text 是使用频率最高几个组件之一,几乎所有的文字显示操作均由其完成。随着 SwiftUI 版本不断提升,Text 功能也得到持续地增强。...因此,我们必须通过某种手段让图片尺寸也能自动适应动态类型改变。使用 SwiftUI 提供 @ScaledMetric 属性包装器,可以创建能够跟随动态类型自动缩放数值。...,需要提供分辨率较高原始图片,这样会造成更多系统负担方案二:在 Text 上使用覆盖视图方案二解决思路不使用预制图片,通过 SwiftUI 视图创建标签根据标签视图尺寸创建空白占位图片在 Text...,不使用预制图片,使用 SwiftUI 视图创建标签将标签视图转换成图片添加到 Text 中进行混排TitleWithDynamicImage(title: "佳农 马来西亚冷冻 猫山王浏览果肉 D197...在低版本 SwiftUI 中,可以通过用 UIHostingController 包裹视图方式,在 UIKit 下完成图片转换操作。

    4.4K30

    AVKit框架详细解析(四) —— 基于AVKit 和 AVFoundation框架视频流App构建

    将播放器视为能够一次管理一个媒体资产播放控制器对象。 3) VideoPlayer 是一个方便 SwiftUI 视图,需要播放器对象才能发挥作用。 您可以使用它来播放视频。...AVPlayerLayer } 为了能够在 SwiftUI使用视图,您需要使用 UIViewRepresentable 创建一个包装器。...对于每一项,您: 1) 从每个视频剪辑对象 URL 创建一个 AVURLAsset。 2) 然后,您使用播放器可用于控制播放asset创建一个 AVPlayerItem。...您会在左上角看到画中画按钮……否则不会! 缺点是,在撰写本文时,iOS 14.5是可用最新版本,VideoPlayer SwiftUI 视图未显示画中画按钮。...如果你想使用画中画,你需要使用 AVPlayerViewController,它属于 UIKit。 好处是你知道如何SwiftUI 和 UIKit 之间建立桥梁。

    7K10

    SwiftUI-数据流

    数据处理基本原则 Data Access as a Dependency:在 SwiftUI 中数据一旦被使用就会成为视图依赖,也就是说当数据发生变化了,视图展示也会跟随变化,不会像 MVC 模式下那样要不停同步数据和视图之间状态变化...A Single Source Of Truth: 保持单一数据源,在 SwiftUI 中不同视图之间如果要访问同样数据,不需要各自持有数据,直接共用一个数据源即可,这样做好处是无需手动处理视图和数据同步...数据流图 从上图可以看出SwiftUI 数据流转过程: 用户对界面进行操作,产生一个操作行为 action 该行为触发数据状态改变 数据状态变化会触发视图重绘 SwiftUI 内部按需更新视图,...最终再次呈现给用户,等待下次界面操作 注意 在 SwiftUI 中,开发者只需要构建一个视图可依赖数据源,保持数据单向有序流转即可,其他数据和视图状态同步问题 SwiftUI 帮你管理,所以 ViewController...,这种视图拼装方式大大提高了界面开发灵活性和复用性,视图组件化并任意组合方式是 SwiftUI 官方非常鼓励做法。

    10.2K20

    SwiftUI:Alert弹窗

    如果发生重要事件,通知用户一种常见方法是使用警报Alert弹窗-根据您需要,该弹出窗口包含标题,消息和一个或两个按钮。 但是请考虑一下:何时应该显示警报以及如何显示Alert?...视图是我们程序状态函数,Alert也不例外。因此,我们不用说“显示警报”,而是创建警报并设置显示警报条件。...基本SwiftUIAlert具有标题,消息和一个关闭按钮,如下所示: Alert(title: Text("Hello SwiftUI!")...更有趣是我们如何显示警报:我们不将警报分配给变量,然后编写诸如myAlert.show()之类东西,因为这将回到旧“一系列事件”思维方式。...相反,我们创建一些状态来跟踪警报是否显示,如下所示: @State private var showingAlert = false 然后,我们将警报附加到用户界面的某处,告诉它使用该状态来确定是否显示警报

    5.5K20

    【visionOS】从零开始创建一个visionOS程序

    这样才可以在使用SwiftUI创建新应用,充分利用visionOS中提供沉浸感。...视图为您界面提供基本内容,您可以使用SwiftUI修饰符自定义视图外观和行为。...将指针移动到窗口栏旁边圆圈上,显示窗口关闭按钮。将光标移动到窗口一个角落,以将窗口栏变为调整大小控件。 tips:应用程序不能控制窗口在空间中位置。...下面的例子展示了一个使用RealityView来显示3D球体视图视图闭包中代码为球体创建一个RealityKit实体,在球体表面应用纹理,并将球体添加到视图内容中。...要创建一个volume,添加一个WindowGroup场景到你应用程序,并将其样式设置为volumetric。这个样式告诉SwiftUI为3D内容创建一个窗口。在卷中包含您想要任何2D或3D视图

    94240

    如何SwiftUI创建悬浮操作按钮

    下面我们就来详细介绍一下还如何实现这个悬浮按钮需求。创建悬浮操作按钮如何 SwiftUI 创建一个类似 Twitter App 中悬浮按钮。...悬浮按钮带有一个轻微阴影。这是要实现悬浮按钮所有行为。让我们逐步实现这些需求。在此之前,需要先创建并初始化一个屏幕用来承载这个悬浮按钮。...要使视图出现在另一个视图前面,可以使用 ZStack 或 overlay 修饰符。...将一个按钮放在内容视图上。这将在列表视图上添加一个加号图像按钮。示例运行截图如下:悬浮按钮位于屏幕右下角接着,是需要实现需求中第二步,使按钮与内容视图对齐到右下角。...总结在本文中,我们学习了如何SwiftUI创建一个悬浮操作按钮,它是 Android 和 Material Design 中常用 UI 元素。通过逐步实现悬浮按钮各个特性来完成这个过程。

    16332

    避免 SwiftUI 视图重复计算

    符合 DynamicProperty 协议属性包装器 几乎每一个 SwiftUI 使用者,在学习 SwiftUI 第一天就会接触到例如 @State、@Binding 这些会引发视图更新属性包装器...每次创建过程都会重新创建一个引用对象,因此假设使用上面的代码( 用 @ObservedObject 创建实例 ),让 @ObservedObject 指向一个不稳定引用实例时,很容易出现一些怪异现象...我们知道,在视图存续期中,SwiftUI 通常会多次地创建视图类型实例。...创建新实例 将新实例与 SwiftUI 当前使用实例进行比对 如实例发生变化,用新实例替换当前实例,对实例 body 求值,并用新视图值替换老视图视图存续期不会因为实体更替有所改变 由于...func sendID(_ id: Int) { self.selection = id } } 当点击某一个 CellView 视图按钮后,所有的 CellView ( 当前

    9.3K81

    掌握 SwiftUI task 修饰器

    task(priority: .background) { // do something}任务优先级并不会影响创建任务所使用线程task vs onChange另一个版本 task 修饰器则提供了类似...task_longrun1_2022-08-07_09.07.44.2022-08-07 09_09_38我们本意是通过按钮来开启和关闭计时器显示以控制任务生命周期( 关闭时结束任务 ),但在点击...task 修饰器在视图创建异步任务,除了方便使用基于 async/await 语法 API 外,开发者也希望能够让这些任务运行在后台线程中,以减少主线程负担。...非常遗憾,当前上文中所有的使用 task 创建异步任务都是运行在主线程当中。...作为一个事件源类型 Source of Truth,每当接收到一个消息时,它都会导致 SwiftUI视图 body 重新求值。

    2.2K30
    领券