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

如何在不使用GeometryReader的情况下读取视图数组中的视图宽度?

在不使用GeometryReader的情况下读取视图数组中的视图宽度,可以通过使用PreferenceKey来实现。

首先,我们需要创建一个自定义的PreferenceKey,用于存储视图宽度的值。假设我们将其命名为ViewWidthKey:

代码语言:txt
复制
struct ViewWidthKey: PreferenceKey {
    static var defaultValue: CGFloat = 0
    
    static func reduce(value: inout CGFloat, nextValue: () -> CGFloat) {
        value = nextValue()
    }
}

接下来,在视图数组中的每个视图中,我们可以使用background修饰符来设置一个读取视图宽度的回调函数,并将宽度值存储到ViewWidthKey中:

代码语言:txt
复制
struct ContentView: View {
    var body: some View {
        VStack {
            ForEach(0..<5) { index in
                Text("View \(index)")
                    .background(
                        GeometryReader { geometry in
                            Color.clear
                                .preference(key: ViewWidthKey.self, value: geometry.size.width)
                        }
                    )
            }
        }
        .onPreferenceChange(ViewWidthKey.self) { width in
            // 在这里可以获取到每个视图的宽度值
            print("Width: \(width)")
        }
    }
}

在上述代码中,我们使用了ForEach来创建一个视图数组,然后在每个视图中使用GeometryReader来获取视图的宽度,并通过preference修饰符将宽度值存储到ViewWidthKey中。最后,我们使用onPreferenceChange修饰符来监听ViewWidthKey的变化,并在闭包中获取到每个视图的宽度值。

这样,我们就可以在不使用GeometryReader的情况下读取视图数组中的视图宽度了。

腾讯云相关产品和产品介绍链接地址:

  • 腾讯云云服务器(CVM):https://cloud.tencent.com/product/cvm
  • 腾讯云云原生容器服务(TKE):https://cloud.tencent.com/product/tke
  • 腾讯云云数据库 MySQL 版(TencentDB for MySQL):https://cloud.tencent.com/product/cdb-for-mysql
  • 腾讯云人工智能(AI):https://cloud.tencent.com/product/ai
  • 腾讯云物联网(IoT):https://cloud.tencent.com/product/iotexplorer
  • 腾讯云移动开发(移动推送):https://cloud.tencent.com/product/umeng
  • 腾讯云对象存储(COS):https://cloud.tencent.com/product/cos
  • 腾讯云区块链服务(BCS):https://cloud.tencent.com/product/bcs
  • 腾讯云游戏多媒体引擎(GME):https://cloud.tencent.com/product/gme
  • 腾讯云音视频处理(VOD):https://cloud.tencent.com/product/vod
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

GeometryReader :好东西还是坏东西?

实际上,"GeometryReader" 这个名字更符合其设计目标:一个几何信息读取器。 确切来说,GeometryReader 作用主要是获取父视图大小、frame 等几何信息。...这种非常规布局逻辑是我推荐将其直接用作布局容器原因之一。 GeometryReader 不支持对齐指南调整,因此上面的描述使用了原点。...然而,这并不意味着不能将 GeometryReader 作为视图容器使用。在某些情况下,它可能比其他容器更适合。...由于默认字体宽度不是固定,所以无法形成一个稳定尺寸协商结果。解决方法很简单,可以通过添加.monospaced()或使用固定宽度字体。...visualEffect 允许开发者在破坏当前布局情况下(不改变其祖先和后代)直接在闭包中使用视图 GeometryProxy,并对视图应用某些特定 modifier。

51470

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

当然,你也可以利用 Spacer 这个特性,控制 Text 在 HStack 使用宽度。...那么 HStack、VStack 会在明确了所有固定尺寸子视图需求尺寸后,将所剩可用尺寸( HStack、VStack 视图给他们建议尺寸 - 固定尺寸子视图需求尺寸 )平均分配( 在优先级相同情况下...因此在第一个例子,即使没有为 HStack 设置 spacing ,Text 仍然会使用全部 HStack 宽度。...提供 300 x 60 建议尺寸GeometryReader 视图,默认基于 topLeading 对齐( 类似 overlay(alignment:.topLeading) 效果 )使用 postion...我为本文这种通过多种方法来解决一个问题方式添加了【小题大作】标签,目前使用该便签文章还有:在 Core Data 查询和使用 count 若干方法[6]、在 SwiftUI 视图中打开 URL

6.6K40

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

使用 UIKit 时,我总是将这种类型视图实现为具有特定 UICollectionViewFlowLayout UICollectionView。但在 SwiftUI 该如何实现呢?...在映射中,我使用 reduce 函数来总结与给定输入值相关联所有宽度(文本宽度、边框宽度、文本填充和间距)。...VStack 高度是根据两个值计算: 输入数据任何项目的高度(类似于宽度计算,通过使用 reduce 函数,总结与项目相关所有高度) 将显示在 VStack 行数 private func...此外,在 VStack 底部,我们设置一个 frame,其中宽度取自 GeometryReader,高度则由先前创建函数计算。 现在 FlexiblePicker 已经完成,可以使用了!...然后,详细介绍了实现该选择器逻辑,包括如何处理选项布局、宽度和高度,以及如何处理用户与按钮交互。 最后,提供了一个简单视图实现,可以在 SwiftUI 中使用该选择器。

25820

掌握 ViewThatFits

在 iOS 16 ,SwiftUI 增加了一个新自适应布局容器 ViewThatFits。正如其名称所示,它作用是在给定多个视图中找出最合适视图使用。...Rectangle().fill(.yellow) } .fixedSize() 对于这种视图,其“理想呈现”是一个复合状态: 宽度:VStack 将逐个询问子视图理想尺寸,使用其中宽度最大值作为它需求尺寸...用易懂描述就是,在有明确宽度限定情况下,要求 Text 显示全部文本内容。...ViewThatFits 允许宽度(300),则 ViewThatFits 会选择最后一个使用 ScrollView 视图。...在这个示例,尽管 ScrollView 在理想状态下,呈现宽度也超过了 ViewThatFits 允许宽度,但由于它是最后一个子视图,因此最终选择了它。这也是一个典型判断和呈现不一致情况。

17110

何在 SwiftUI 创建条形图

系列文章 如何在 SwiftUI 创建条形图 SwiftUI 水平条形图 在 iOS 16 中用 SwiftUI Charts 创建一个折线图 在 iOS16 中用 SwiftUI 图表定制一个线图...在 Swift 图表中使用 Foudation 库测量类型 开始图表布局 SwiftUI 对探索不同布局和预览实时视图结果是很友好。...文本视图宽度被限制在条形图宽度范围内,而且条形图标签文本会被截断,条形图文本视图也被限制在条形宽度范围内,并且文本可以被隐藏起来。...SwiftUI 是一个很好平台,用于创建视图和快速重构独立视图。在 SwiftUI 构建条形图需要做一些工作,随着使用数据来试用条形图,可以确定更多定制化。...使用 GeometryReader 可以创建适应更多可用环境条形图。在这篇文章,我们创建了一个简单条形图,有数值,下面有标签,还有图表标题,下一步就是分离出 x 轴和 y 轴。 - EOF -

5.1K10

SwiftUI 之 HStack 和 VStack 切换

一种方式是用 GeometryReader 测量当前可用空间,并根据宽度是否大于其高度,可以选择使用 HStack 或 VStack 来渲染内容。...虽然我们也有很多方法能解决这些问题(例如使用类似在这篇 Q&A 中用来使多个视图具有相同宽度和高度技术),但真正问题是当我们要动态的确定方向时,测量可用空间是否是一个好方法。...所有这些仍然使用紧凑垂直布局,它使用空间超过渲染其内容所需空间。...使用布局协议 虽然我们最后已经用了非常棒解决方案,可以在所有支持 SwiftUI iOS 版本中使用,但也让我们来探索一下在 iOS 16 引入一些新布局工具(在写这篇文章时,它作为...就像字面意思一样,这种新容器将会在我们初始化时传递候选列表,基于当前上下文挑选出最优视图

2.8K10

SwiftUI水平条形图

SwiftUI水平条形图 水平条形图以矩形条形式呈现数据类别,其宽度与它们所代表数值成正比。本文展示了如何在垂直条形图基础上创建一个水平柱状图。 水平条形图不是简单垂直条形图旋转。...它控制了图表布局,其中三个视图被改为YaxisHView、ChartAreaHView和XaxisHView,它们最初只是垂直条形图中使用视图副本。...矩形条宽度与数据值成正比。...更新X轴 同样,创建了一个XaxisHView视图来显示水平条形图X轴,并使用与垂直条形图Y轴类似的代码来布置刻度线和刻度值。...在创建垂直条形图时学到技术可以重复使用,但最好将水平条形图视为与垂直条形图不同图表。当我们深入到轴等组件时,可以看到两个图表轴线都是一样,但是它们标签和定位在x和y之间是换位

4.8K20

SwiftUI 布局 —— 尺寸( 上 )

尺寸 —— 一个刻意被淡化概念 SwiftUI 是一个声明式框架,提供了强大自动布局能力。开发者几乎可以在涉及尺寸( 或很少涉及 )这一概念情况下创建出漂亮、精美、准确布局效果。...这类视图主要作用有: 突破 ViewBuilder Block 数量限制 方便为一组视图统一设置 view modifier 有利于代码管理 其他特殊应用, ForEach 可支持动态数量视图等...比如在上文例子,ZStack 为 Text 提供了 390 x 763 建议尺寸。 未指定模式 nil,设置任何数值。...( 文本不折行、省略 ) 85.33 x 20.33( 上文例子尺寸 ) 明确尺寸模式 如果建议宽度大于单行显示需要,则需求宽度返回单行实现显示尺寸宽度 85.33 ;如果建议宽度小于单行显示需要则需求宽度返回建议尺寸宽度...GeometryReader 将建议尺寸作为需求尺寸直接返回( 充满全部可用区域 ) 接下来 在上篇,我们对 SwiftUI 各种尺寸概念做了介绍,在下篇我们将通过创建 frame、fixedSize

4.7K20

解析SwiftUI布局细节(二)循环轮播+复杂布局

NavigationView + NavigationLink 界面跳转,在苹果给 SwiftUI 使用例子中就是这样写,当然我们在正常使用这样写也没啥问题,那我们界面跳转问题是什么呢?...GeometryReader 主要作用就是能够获取到父View建议尺寸,这就是它主要作用,要没有它我们面临可能就是无休止传值了,SwiftUI 既然是声明式UI,按我理解你就没有办法去获取某一个视图视图之类...有一个还得说明一下,GeometryReader 改变了它显示内容方式。在 iOS 13.5 ,内容放置方式为 .center。在 iOS 14.0 则为:.topLeading。...3、再提一点关于上面说滚动视图,在UIKit我们可以用UICollectionView搞定一切,但是在SwiftUI没有这个控件,我建议采用方式是 ScrollView + HStack + VStack...= 单个视图宽度 + 视图间距 let currentOffset = CGFloat(currentIndex) * (homeViewModel.homeBannerWidth

11.9K20

掌握 SwiftUI Safe Area

在 UIKit ,开发者需要利用 safeAreaInsets 或 safeAreaLayoutGuide ,才能确保将视图放置在界面可见部分。 SwiftUI 对上述过程进行了彻底简化。...本文将探讨如何在 SwiftUI 获取 SafeAreaInsets、将视图绘制到安全区域之外、修改视图安全区域等内容。...使用 GeometryReader 获取 GeometryProxy 提供了 safeAreaInsets 属性,开发者可以通过 GeometryReader 获取视图 safeAreaInsets。...•all(默认)上述两种安全区域划分合集 iOS 13 并没有提供键盘自动避让功能,开发者需要编写一些额外代码来解决软键盘恰当遮盖视图 TextField )问题。...使用 safeAreaInset 扩展安全区域 在 SwiftUI ,所有基于 UIScrollView 组件(ScrollView、List、Form),在默认情况下都会充满整个屏幕,但仍可确保我们可以在安全区域内看到所有的内容

7.5K31

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

使用 environmentObject 情况下,如何避免创建实例视图被重新计算Q:如何在避免重新计算顶层视图 body 情况下,在不同子树两个子视图之间共享状态( 例如 ObservableObject...不过,在传统 viewModel 意义上,我建议将视图( 结构本身 )作为视图模型。...这可能会导致一些不好后果,例如使视图可重用性降低,并将业务逻辑与 SwiftUI 视图生命周期挂钩,这将使处理业务逻辑变得更加困难。简而言之,我们建议使用视图作为视图模型。...使用它们应该只创建一个实例,然后可以在子视图读取。这应该不会增加内存使用( 如果有的话,请提出反馈 )。如果你向你模型对象追加越来越多数据,你可能会增加内存使用,这是很正常。...image-20221022135326560San Francisco 宽度风格Q:如何在 SwiftUI 如何使用 SF 字体家族新增三种宽度风格( Compressed、Condensed、Expanded

12.2K20

SwiftUI geometryGroup() 指南:从原理到实践

本文将介绍 geometryGroup() 概念、用法,以及在低版本 SwiftUI ,在不使用 geometryGroup() 情况下如何处理异常。...然而在某些情况下,这种聚合行为可能会导致希望结果;插入一个几何组可以纠正这种情况。几何组充当父视图与其子视图之间屏障,迫使位置和大小值由父视图解析和动画化,然后再传递给每个子视图。...因为文档遗漏了最主要部分:“然而在某些情况下,这种聚合行为可能会导致希望结果( However in some cases this coalescing behavior can give undesirable...In Some Cases 为了更好地理解 geometryGroup() 实际作用,我们需要创建一个因父视图几何属性发生变化而导致非预期视图呈现,以便弄清楚文档“在某些情况下”到底指的是什么情况...在实际开发,尤其是面对复杂动画和布局场景时,理解并正确使用 geometryGroup() 是至关重要。 geometryGroup() 为我们提供了一个避免在个别情况下出现布局异常能力。

26010

SwiftUI 官方画图实例详细解析

前言 ---- 在前面几篇关于SwiftUI文章,我们用一个具体基本项目Demo来学习了下SwiftUI,里面包含了常见一些控件使用以及数据处理和地图等等,有兴趣小伙伴可以去翻翻以前文章...就基本上有了底部视图效果。...接着我们在看看箭头是怎么画出来,具体代码是把它分成了上面两部分来画,然后通过控制各个点连接画出了图案,这次使用还是Path方法,具体是下面这个: /// Adds a sequence of...ZStack ,前面的文章我们有介绍和使用过 HStack 和 VStack,这次在这里就用到了 VStack,他们之间没有啥特备大区别,理解视图视图之间层级和位置关系就没问题。...badgeSymbols位置 /// GeometryReader可以帮助我们获取父视图size .position(

99110

iOS_SwiftUI_iOS14_Widget

股票widget,用户可以选择显示哪只股票) Embed in Application:(表示该widget是哪个target附属品,如果workspace里有个target就要注意别选错了)...getSnapshot:返回快照数据源(小组件库里显示) getTimeline:返回时间线数组 // 占位视图,没有塞数据之前显示,同步方法,需要快速返回 func placeholder(in...在开发者账号官网开启App Group功能,并设置ID; Xcode主app和widget target -> Signing & Capabilities 添加App Groups,并输入...// SmallView里,运用GeometryReader可以获取到提供size var body: some View { GeometryReader { geometry in...Loalize...按钮 ,再点击 Loalize 3)然后在Project -> Info -> Localiztions 添加需要支持语言。。。

2.3K20

用 SwiftUI 实现 3D Scroll 效果

我们预览下今天要实现 3D scroll 效果。学完本教程后,你就可以在你 App 把这种 3D 效果加入任何自定义 SwiftUI 视图。下面我们来开始本教程学习。...入门 首先,创建一个新 SwiftUI 视图。为了举例说明,在这个新视图中,我会展示一个有各种颜色矩形列表,并把新视图命名为 ColorList。...内部根据 colors 数据分别创建不同颜色矩形。...: 增加 3D 效果 首先,把 Rectangle 嵌套在 GeometryReader 。...axis 参数是一个元组类型,它定义了在使用你传入角度参数时,哪一个坐标轴要发生改变。在本例,是 Y 轴。 rotation3DEffect() 方法文档可以在苹果官方网站 这里 找到。

1.5K20

高级 SwiftUI 动画 — Part 2:GeometryEffect

完整代码可在本页面顶部链接gist文件 实例6 获得。 动画反馈 在下一个例子,我将向你展示一个简单技术,它将使我们视图对效果动画进展做出反应。...每当我们视图旋转到足以向我们展示另一面时,一个布尔绑定将被更新。 通过对绑定变量变化做出反应,我们将能够替换正在旋转动画过程视图。这将创造一种错觉,即视图有两个面。...然而,在这个具体例子,我们将使用一个更多技巧。如果你仔细观察视频,你会发现这张牌一直在变化。背面总是一样,但正面却每次都在变化。因此,这不是简单为一面展示一个视图,为另一面展示另一个视图。...我们不是基于flipped值,而是要监测flipped变化。然后每一个完整回合,我们将使用不同牌。 我们有一个图像名称数组,我们想逐一查看。为了做到这一点,我们将使用一个自定义绑定变量。...在这个例子,我们效果将通过一个任意路径移动一个视图。这个问题有两个主要挑战: 1.如何获取路径特定点坐标。 2.如何在通过路径移动时确定视图方向。

1.3K30

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

快速检索数组元素Q:为什么没有简单方法将 TABLE 选择行映射到提供表内容数组元素上?似乎唯一方法是在数组搜索匹配 id 值,这对于大表来说似乎效率很低。...A:你最好选择是使用 ScrollView 和 ScrollViewReader,并在 onAppear 或新内容进来时滚动到最底部视图。我建议尝试旋转滚动视图。...在两种方案,如果在数据量很大情况下,我更倾向于第一种方式,这样可以按需求读取数据。...因为这些使用并不有害,我们希望开发者因为使用了新编译器版本而处理一堆警告。...macOS APIQ:对于运行 Monterey Mac,能否如何在 SwiftUI 实现下面需求建议:打开一个窗口在该窗口中初始化数据找到所有打开窗口确定一个窗口是否打开从不在该窗口视图中关闭一个窗口

14.7K30
领券