首页
学习
活动
专区
工具
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使用该选择器。

    27920

    SwiftUI内容边距

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

    16232

    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.2K10

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

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

    12.2K20

    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.2K20

    Airbnb 三阶段 SwiftUI 迁移实践

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

    21210

    SwiftUI 中用 Text 实现图文混排

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

    4.4K30

    SwiftUI-数据流

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

    10.1K20

    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 之间建立桥梁。

    6.9K10

    SwiftUI:Alert弹窗

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

    5.4K20

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

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

    87240

    如何SwiftUI创建悬浮操作按钮

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

    14232

    避免 SwiftUI 视图重复计算

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

    9.2K81

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

    因此,如果你正在创建一个视图来显示可滚动内容,并可能进行选择操作,那么在 iOS 和 macOS 上使用 List 将有最好体验。...阅读 The SwiftUI Layout Protocol [11]了解如何创建自定义布局。创建从底部开始滚动视图Q:我如何实现一个在底部对齐滚动视图,在 macOS 上会不会有糟糕性能?...将背景扩展到安全区域Q:如果我有一个自定义容器类型,可以接受一个顶部和底部视图,是否有办法让 API 调用者将所提供视图背景扩展到安全区域内,同时将内容( 如文本或按钮 )保留在安全区域内?...macOS APIQ:对于运行 Monterey Mac,能否如何SwiftUI 中实现下面需求建议:打开一个窗口在该窗口中初始化数据找到所有打开窗口确定一个窗口是否打开从不在该窗口视图关闭一个窗口...连锁动画Q:在 SwiftUI 中,如何实现连锁动画?例如,我想先给一个视图做动画,当动画完成后立即启动另一个动画。A:不幸是,目前不可能实现连锁动画。

    14.8K30

    SwiftUI 4.0 全新导航系统

    基于类型响应式目标视图处理机制 比如下面的代码是在老版本( 4.0 之前 )SwiftUI使用编程式跳转一种方式: struct NavigationViewDemo: View { @...: 由于无需在 NavigationLink 中指定目标视图,因此无须创建多余视图实例 对由同一类型值驱动目标进行统一管理( 可以将堆栈中所有视图 NavigationLink 处理程序统一到根视图中...分栏布局 在 SwiftUI 4.0 之前版本,可以这样使用 NavigationView 来创建拥有左右两个栏编程式导航视图: class MyStore: ObservableObject {...NavigationView 创建按钮 } .navigationTitle("Detail") // 为 Detail 栏中 NavigationView...相当一部分开发者由于版本适配原因并不会使用 API ,因此,每个人都需要认真考虑如下问题: 如何从新 API 中获得灵感 如何在老版本中运用编程式导航思想 如何让新老版本程序都能享受系统提供便利

    10.3K62
    领券