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

SwiftUI:获取视图的框架?

SwiftUI是一种用于构建用户界面的声明式框架,它是苹果公司推出的一种前端开发工具。在SwiftUI中,要获取视图的框架可以使用GeometryReader。

GeometryReader是一个视图容器,它可以提供关于父视图大小和位置的信息。通过将视图放置在GeometryReader中,可以获取到视图的框架信息。

使用GeometryReader可以通过闭包的方式获取视图的框架。在闭包中,可以使用GeometryProxy对象来访问视图的框架信息。例如,可以使用GeometryProxy的size属性获取视图的大小,使用GeometryProxy的frame(in:)方法获取视图在父视图坐标系中的位置和大小。

下面是一个示例代码,展示了如何使用GeometryReader获取视图的框架:

代码语言:txt
复制
import SwiftUI

struct ContentView: View {
    var body: some View {
        GeometryReader { geometry in
            Text("Hello, World!")
                .frame(width: geometry.size.width, height: geometry.size.height)
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

在上面的示例中,GeometryReader包裹了一个Text视图,并设置了Text视图的框架大小与父视图的大小相同。

总结一下,SwiftUI中获取视图的框架可以使用GeometryReader,并通过GeometryProxy对象来访问视图的框架信息。

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

相关·内容

避免 SwiftUI 视图重复计算

随着近年来有关 SwiftUI 文章与书籍越来越多,开发者应该都已经清楚地掌握了 —— “视图是状态函数” 这一 SwiftUI 基本概念。...每个视图都有与其对应状态,当状态变化时,SwiftUI 都将重新计算与其对应视图 body 值。...当 SwiftUI视图视图树上删除时,会一并完成对 SwiftUI 数据池以及关联清理工作。如此,使用 State 包装变量,其存续期将与视图存续期保持完全一致。...并且 SwiftUI 会在其变化时自动更新( 重新计算 )对应视图SwiftUI 上有一个困扰了不少人问题:为什么无法在视图构造函数中,更改 State 包装变量值?...我们知道,在视图存续期中,SwiftUI 通常会多次地创建视图类型实例。

9.3K81

用NavigationViewKit增强SwiftUI导航视图

用NavigationViewKit增强SwiftUI导航视图 如果想获得更好阅读体验,请访问我博客 www.fatbobman.com[1] 最近一直在为我iOS健康管理app健康笔记3.0[...由于SwiftUI原生提供导航手段能力有限,因此在之前版本中,NavigationView总是使用不是那么顺手。...•SwiftUI原生风格扩展功能调用方法尽可能同原生SwiftUI方式类似 请访问Github下载NavigationViewKit[4] NavigationViewManager 简介 开发者对NavigationView...可以通过 @Environment(\.currentNaviationViewName) var tag 获取到当前NavigationView注册Tag,便于视图在不同NavigtionView...视图中支持SwiftUI原生所有定义,例如toolbar、navigationTitle等。 目前在启用转场动画时,title和toolbar会在转场动画后才显示,观感稍有不足。日后尝试解决。

3.2K20
  • SwiftUI视图显示和隐藏动画

    SwiftUI最强大功能之一是能够自定义视图显示和隐藏方式。以前,您已经了解了如何使用常规if条件有条件地包含视图,这意味着当条件更改时,我们可以从视图层次结构中插入或移除视图。...转换控制插入和删除方式,我们可以使用内置转换,以不同方式组合它们,甚至创建完全自定义转换。...首先,我们添加一些可以操作状态: @State private var isShowingRed = false 接下来,我们使用该状态作为显示矩形条件: if isShowingRed {...通过使用withAnimation()包装状态更改,我们可以获得SwiftUI默认视图转换,如下所示: withAnimation { self.isShowingRed.toggle() }...一个有用方法是不对称,它允许我们在显示视图时使用一个转换,在视图消失时使用另一个转换。

    4.6K30

    为什么 SwiftUI 视图使用结构体

    如果您曾经为 UIKit 或 AppKit(Apple iOS 和 macOS 原始用户界面框架)编程,您会知道它们使用类而非结构体来构造视图。...SwiftUI 并非如此:我们更喜欢将结构体用于整体视图,这有两个原因。 首先,有一个性能因素:结构体比类更简单,更快。...在 SwiftUI 中,我们所有的视图都是简单结构体,几乎可以自由创建。想想看:如果您制作一个仅包含一个整数结构体,则结构体整个大小就是:一个整数。没有其他。...1000 个 SwiftUI 视图甚至 100,000 个 SwiftUI 视图也是如此。他们是如此之快,以至于不再值得考虑。...通过生成不会随时间变化视图SwiftUI 鼓励我们转向更具功能性设计方法:在将数据转换为 UI 时,我们视图变成简单,惰性东西,而不是会失去控制智能化东西。

    2.4K50

    为什么SwiftUI视图使用结构体?

    如果您曾经为UIKit或AppKit(AppleiOS和macOS原始用户界面框架)编程,您会知道它们使用类而非结构体来构造视图。...SwiftUI并非如此:我们更喜欢将结构体用于整体视图,这有两个原因。 首先,有一个性能因素:结构体比类更简单,更快。...在SwiftUI中,我们所有的视图都是简单结构体,几乎可以自由创建。想想看:如果您制作一个仅包含一个整数结构体,则结构体整个大小就是:一个整数。没有其他。...得益于现代iPhone强大功能,我不会慎重考虑后创建1000个整数甚至100,000个整数——眨眼之间就会发生。1000个SwiftUI视图甚至100,000个SwiftUI视图也是如此。...通过生成不会随时间变化视图SwiftUI鼓励我们转向更具功能性设计方法:在将数据转换为UI时,我们视图变成简单,惰性东西,而不是会失去控制智能化东西。

    3.2K10

    SwiftUI中使用UIKit视图

    通常需要开发者在UIViewRepresentable视图Coordinator(协调器)中做一些工作,从而保证两个框架SwiftUI同UIKit)代码之间沟通和联系。...•同SwiftUI框架保持沟通上文中,我们提到UIViewRepresentable作为原始类型,需要主动承担更多SwiftUI框架或其他视图之间沟通工作。...在协调器中,我们可以通过双向绑定(Binding),通知中心(notificationCenter)或其他例如Redux模式单项数据流等方式,将UIKit视图内部状态报告给SwiftUI框架或其他需要模块...在makeUIView中,我们使用textfield.text = text获取了Demo视图中name值,但makeUIView只会执行一次。...学会使用很容易,但想用好确实有一定难度。在UIKit视图SwiftUI视图之间共享可变状态和复杂交互通常相当复杂,需要我们在这两种框架之间构建各种桥接层。

    8.2K22

    SheetKit——SwiftUI模态视图扩展库

    SheetKit——SwiftUI模态视图扩展库 新写了个SwiftUI Sheet扩展库,添加对可变高度Sheet支持。...主要因为SwiftUI中重要视图展示模式:NavigationView、Sheet等都没有迅捷、简便重置能力。很难通过一两句代码将应用程序立即设置成我们想要视图状态。...•模态视图集中管理SwiftUI通常采用.sheet来创建模态视图,对于简单应用来说,这种形式非常直观,但如果应用程序逻辑比较复杂、需要模态视图众多,则上述方式就会让代码显得十分混乱,不易整理。...因此,在此种情况下,通常我们会将所有的模态视图集中管理起来,统一调用。请参阅我之前文章——在SwiftUI中,根据需求弹出不同Sheet[3]。...•新半高模态视图在WWDC 2021中,苹果为大家带来了期待已久半高模态视图。或许推出比较仓促,这种很受欢迎交互方式并没有提供SwiftUI版本,仅支持UIKit。

    2.9K20

    SwiftUI 视图中打开 URL 若干方法

    访问我博客 www.fatbobman.com[1] 可以获得更好阅读体验 本文将介绍在 SwiftUI 视图中打开 URL 若干种方式,其他内容还包括如何自动识别文本中内容并为其转换为可点击链接...image-20220520182722773 SwiftUI 1.0( iOS 13、Catalina ) 在视图中,开发者通常需要处理两种不同打开 URL 情况: 点击一个按钮( 或类似的部件...此时在 Button 中,我们可以直接通过 openURL 来完成在 SwiftUI 1.0 版本中通过调用其他框架 API 才能完成工作。...NSDataDetector(types: types) // 获取识别结果 let matches = detector.matches(in: text, options: [], range: NSRange...SwiftUI 视图中打开 URL 几种方法,不过读者应该也能从中感受到 SwiftUI 三年来不断进步,相信不久后 WWDC 2022 会为开发者带来更多惊喜。

    7.8K31

    构建稳定预览视图 —— SwiftUI 预览工作原理

    作为 SwiftUI 最引人注目的功能之一,预览功能吸引了不少开发者初次接触 SwiftUI。然而,随着项目规模增长,越来越多开发者发现预览功能并不如最初想象那么易用。...欢迎大家在 Discord 频道[2] 中进行更多地交流 让预览崩溃一段视图代码 不久前,Toomas Vahter 写了一篇博客 Bizarre error in SwiftUI preview[3...预览工作流程 我们对上面的探索过程进行一个梳理,大致上可以得到如下工作流程: Xcode 生成预览衍生代码文件 Xcode 编译整个项目,解析文件、获取预览视图实现、准备依赖其他资源 Xcode...编译预览衍生代码文件,创建动态库 Xcode 启动预览线程,在其中加载 _XCPreviewKit 框架和预览衍生文件生成 dylib XCPreviewKit 框架在预览线程中创建预览窗口 Xcode...但是,这也可能导致无法正常编译情况发生(例如本文中例子) 预览是以预览衍生文件作为入口,开发者必须在预览代码中为预览视图提供足够上下文信息( 例如注入所需环境对象 ) 总的来说,Xcode 预览功能虽然在视图开发流程中极为方便

    56210

    SwiftUI 中 accessibilityChildren 视图修饰符作用

    前言SwiftUI 为我们提供了一系列丰富视图修饰符,用于操作视图可访问性树。我已经介绍了其中许多,你可以在博客中找到它们。...accessibilityChildren 视图修饰符允许我们为视图创建一个可访问性容器,并使用 ViewBuilder 闭包提供视图元素进行填充。示例让我们来看一个简单示例。...SwiftUI 不会渲染我们通过 ViewBuilder 闭包传递视图,它仅用于填充可访问性树子元素。...运行截图:总结今天,我们了解了 SwiftUI 为我们提供又一个强大可访问性视图修饰符。...SwiftUI 凭借提供如此多友好 API,简化了我们为了使我们应用对每个人都具有可访问性而必须做工作,做得非常出色。

    11920

    SwiftUI 中实现视图居中若干种方法

    欢迎大家在 Discord 频道[2] 中进行更多地交流将某个视图在父视图中居中显示是一个常见需求,即使对于 SwiftUI 初学者来说这也并非难事。...请阅读 SwiftUI 布局 —— 对齐[5] ,了解更多有关 ZStack、overlay、background 对齐机制Geometry虽然有些大材小用,但当我们需要获取更多有关视图信息时,GeometryReader...Text 中心点与给定位置进行对齐( postion 是一个通过 CGPoint 来对齐中心点视图修饰器 )当然,你也可以获取 Text Geometry 信息,通过 offset 或 padding...我为本文这种通过多种方法来解决一个问题方式添加了【小题大作】标签,目前使用该便签文章还有:在 Core Data 中查询和使用 count 若干方法[6]、在 SwiftUI 视图中打开 URL.../[7] 在 SwiftUI 视图中打开 URL 若干方法: https://www.fatbobman.com/posts/open_url_in_swiftUI/[8] Twitter: https

    6.8K40

    SwiftUI 与 Core Data —— 数据获取

    本文中我们将探讨在 SwiftUI 视图中批量获取 Core Data 数据方式,并尝试创建一个可以使用 mock 数据 FetchRequest。...类 Redux 框架通常都建议开发者将整个 app 状态合成到一个单一结构实例中( State ,符合 Equatable 协议 ),视图通过观察状态变化( 有些框架支持切片式观察以改善性能 )...简单介绍一下我探索过程( 以 TCA 框架进行举例 ):在 Reducer 中获取并管理值数据在 task( 或 onAppear )中通过发送 Action 启动一个长期 Effect ,创建一个...当 SwiftUI视图存续期中重新创建视图描述实例时,自定义类型也将一并重新创建在视图存续期中,如果 SwiftUI 创新创建了视图描述实例,那么无论视图描述( 符合 View 协议 Struct...这样可以减少 ForEach 数据集变化频次,改善 SwiftUI 视图效率。

    4.6K30

    如何在 SwiftUI 视图中显示应用图标和版本

    在本文中,我将展示如何创建一个可访问 SwiftUI 视图,既能显示应用图标和版本,又能在各种文本大小和外观下看起来都很好:获取应用图标构建视图第一步是从主包中获取应用图标。...创建 SwiftUI 视图现在让我们将所有内容结合起来,创建一个 SwiftUI 视图,显示应用图标和版本:AppVersionInformationView.swiftimport SwiftUIstruct...这对于用户(无论是内部测试人员还是外部用户)来说,是一种快速识别应用版本和变体有效方法。我们通过从主包中检索 Info.plist 文件中相关键值,获取应用图标。...接着,我们采用类似的方法,通过读取 Info.plist 文件中 CFBundleShortVersionString 键值,获取应用版本信息。...在获取到应用图标和版本信息后,我们创建了一个 SwiftUI 视图来展示这些信息。该视图使用水平堆栈(HStack)布局,将应用图标和版本信息并排显示。

    17622

    如何在Xcode下预览含有Core Data元素SwiftUI视图

    如何在Xcode下预览含有Core Data元素SwiftUI视图SwiftUI诞生之日起,预览(Canvas Preview )一直是个让开发者又爱又恨功能。...SwiftUI预设了大量同系统有关环境值,通过设置或响应这些数据,我们可以修改系统配置或读取系统信息。 SwiftUI视图采用树状结构组织,在任意节点视图上注入环境数据都将影响该节点所有子视图。...因此,通常不推荐在视图中直接获取或操作Core Data数据(非常简单应用除外)。...将需求发送给Store,数据经过处理和加工后再提交给State,视图往往使用并非Core Data框架产生原生数据(比如说托管对象)。 @FetchRequest是个例外。...SwiftUI通常采用Redux开发模式,通过将获取Core Data数据转换成标准Swift结构从而避免在视图中使用托管对象上下文或托管对象。

    5.1K10

    SwiftUI Overlay Container 2 —— 可定制、高效、便捷视图管理器

    SwiftUI Overlay Container[1] 是一个用于 SwiftUI 视图容器组件。一个可定制、高效、便捷视图管理器。...近期我重写了该组件,除了实现了以前尚未支持功能外,更重要是,以此检验一下自己这段时间能力是否有所提高。 大家可以从 这里[3] 获取最新版本。...在 SwiftUI 中,描述视图已经变得十分容易,因此我们完全可以将上述场景中显示逻辑提炼出来,创建出一个可以覆盖更多使用场景库,帮助开发者组织视图显示风格和交互逻辑。...容器内视图可以通过该值获取容器信息(名称、尺寸、显示类型、队列类型)并执行撤销显示行为。...使用者通过调用容器管理器特定方法,让指定容器执行显示视图、撤销视图等工作。 容器管理器环境值 在 SwiftUI 中,视图代码通过环境值调用容器管理器。

    2.1K20

    Thinkphp5框架实现获取数据库数据到视图方法

    本文实例讲述了Thinkphp5框架实现获取数据库数据到视图方法。分享给大家供大家参考,具体如下: 这是学习thinkhp5基础篇笔记。...这里主要讲怎么配置数据库链接,以及查询数据库数据,并且最后将数据赋给视图。 数据库配置: thinkphp5数据库配置默认在conf下database.php下面。我数据库配置项目如下 <?...需要注意是,find和select是查询构造器方法,get和all是模型方法。但模型又是基于查询构造器,所以模型可以调用find和select方法,但是查询构造器不能调用get和all方法。...(CodeIgniter)框架进阶教程》、《Zend FrameWork框架入门教程》及《PHP模板技术总结》。...希望本文所述对大家基于ThinkPHP框架PHP程序设计有所帮助。

    1.3K10
    领券