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

如何在SwiftUI中设置嵌入在ForEach中的HStack的相对宽度?

在SwiftUI中,可以使用GeometryReader来设置嵌入在ForEach中的HStack的相对宽度。GeometryReader是一个视图容器,可以提供有关其父视图的几何信息。

要设置HStack的相对宽度,可以使用GeometryReader包装HStack,并在其内部使用GeometryProxy来获取父视图的几何信息。然后,可以使用GeometryProxy的size属性来计算HStack的相对宽度。

下面是一个示例代码:

代码语言:txt
复制
struct ContentView: View {
    let data = ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5"]
    
    var body: some View {
        GeometryReader { geometry in
            VStack {
                ForEach(data, id: \.self) { item in
                    GeometryReader { itemGeometry in
                        HStack {
                            Text(item)
                                .frame(width: itemGeometry.size.width * 0.5, height: 50)
                                .background(Color.blue)
                            
                            Spacer()
                        }
                        .frame(width: geometry.size.width, height: 50)
                    }
                }
            }
        }
    }
}

在上面的示例中,我们首先使用GeometryReader包装了整个视图,并在其中创建了一个垂直的VStack。然后,我们使用ForEach遍历数据数组,并在其中使用另一个GeometryReader来包装HStack。在HStack中,我们使用itemGeometry.size.width * 0.5来设置Text的宽度为父视图宽度的一半。最后,我们使用geometry.size.width来设置HStack的宽度为父视图的宽度。

这样,我们就可以在SwiftUI中设置嵌入在ForEach中的HStack的相对宽度了。

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

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

相关·内容

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

使用 UIKit 时,我总是将这种类型视图实现为具有特定 UICollectionViewFlowLayout UICollectionView。但在 SwiftUI 该如何实现呢?...VStack 高度是根据两个值计算: 输入数据任何项目的高度(类似于宽度计算,通过使用 reduce 函数,总结与项目相关所有高度) 将显示 VStack 行数 private func...这就是为什么我首先将整个 ForEach 循环包装在 HStack ,然后再包装在 Group ,以确保编译器可以正确解释一切。...此外, VStack 底部,我们设置一个 frame,其中宽度取自 GeometryReader,高度则由先前创建函数计算。 现在 FlexiblePicker 已经完成,可以使用了!...然后,详细介绍了实现该选择器逻辑,包括如何处理选项布局、宽度和高度,以及如何处理用户与按钮交互。 最后,提供了一个简单视图实现,可以 SwiftUI 中使用该选择器。

24720

SwiftUI水平条形图

SwiftUI水平条形图 水平条形图以矩形条形式呈现数据类别,其宽度与它们所代表数值成正比。本文展示了如何在垂直条形图基础上创建一个水平柱状图。 水平条形图不是简单垂直条形图旋转。...Numbers 等应用程序,水平条形图被定义为独立图表类型,而不是垂直条形图。除了条形差异外,x轴和y轴格式也需要不同。...Bar Chart with multiple data sets in SwiftUI SwiftUI 水平条形图 将条形图转换为水平 水平条形图不仅仅是垂直条形图上配置,有一些元素是可以重复使用...Y轴标签Swift代码与垂直条形图X轴代码相似,宽度设置与高度设置互换。两种图表类型y轴线代码都是一样。...创建垂直条形图时学到技术可以重复使用,但最好将水平条形图视为与垂直条形图不同图表。当我们深入到轴等组件时,可以看到两个图表轴线都是一样,但是它们标签和定位在x和y之间是换位

4.7K20

何在 SwiftUI 创建条形图

系列文章 如何在 SwiftUI 创建条形图 SwiftUI 水平条形图 iOS 16 中用 SwiftUI Charts 创建一个折线图 iOS16 中用 SwiftUI 图表定制一个线图... Swift 图表中使用 Foudation 库测量类型 开始图表布局 SwiftUI 对探索不同布局和预览实时视图结果是很友好。...它需要每一条数据名称和值以及最大值和可用条形高度。每个条形图都表示为圆角矩形,条形高度相对于最大条形高度设置。条形颜色设置为纯蓝色。...文本视图宽度被限制条形图宽度范围内,而且条形图标签文本会被截断,条形图文本视图也被限制条形宽度范围内,并且文本可以被隐藏起来。...图标被设置为固定大小,视图被嵌入到 ScrollView ,以便在设备旋转时滚动。

5.1K10

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

SwiftUI ,有很多手段可以达成此目的。本文将介绍其中一些方法,并对每种方法背后实现原理、适用场景以及注意事项做以说明。...即使文本宽度超出了 HStack 给出建议宽度,但 HStack 布局时,仍会保留其最小厚度,导致下图上方文本无法充分利用矩形视图宽度。解决方法为:Spacer(minLength: 0)。...当然,你也可以利用 Spacer 这个特性,控制 Text HStack 可使用宽度。...image-20220829161755393至于上图中 Text 仍没有充分利用 HStack 全部宽度原因,是因为没有为 HStack 设置明确 spacing ,将其设置为 0 即可:HStack...因此第一个例子,即使没有为 HStack 设置 spacing ,Text 仍然会使用全部 HStack 宽度

6.6K40

用 Table SwiftUI 下创建表格

欢迎大家 Discord 频道[2] 中进行更多地交流 Table 是 SwiftUI 3.0 为 macOS 平台提供表格控件,开发者通过它可以快捷地创建可交互多列表格。... WWDC 2022 ,Table 被拓展到 iPadOS 平台,让其拥有了更大施展空间。本文将介绍 Table 用法、分析 Table 特点以及如何在其他平台上实现类似的功能。...SwiftUI 4.0 第一个测试版本( Xcode 14.0 beta (14A5228q) ),Table iPad OS 上表现不佳,存在不少 Bug 。... macOS 上,如果 Table 内容( 行宽度 )超过了 Table 宽度,Table 将自动开启横向滚动支持。...,SwiftUI 会扩展更多样式到 iPadOS 平台 行选择 Table 启用行选择与 List 方式十分类似: struct TableDemo: View { @State var

3.9K30

掌握 ViewThatFits

iOS 16 SwiftUI 增加了一个新自适应布局容器 ViewThatFits。正如其名称所示,它作用是在给定多个视图中找出最合适视图并使用。...理想尺寸( Ideal Size ) SwiftUI ,相较于建议尺寸,很多开发者对理想尺寸接触较少,理解也不太深入。...这种对理想尺寸单个轴向上限制与 ViewThatFits 构造方法受限轴设置完全对应。通过设置,我们可以让 ViewThatFits 只特定轴向上对子视图理想尺寸进行判断。... SwiftUI ,我们可以通过 frame 来修改视图在理想状态下呈现。...但是,与任何强大工具一样,能否发挥期作用来自于深入理解其使用方式和限制。 本文中,我们对 SwiftUI ViewThatFits 容器进行了深入探索。

15710

SwiftUI 布局 —— 尺寸( 上 )

欢迎大家 Discord 频道[2] 中进行更多地交流 SwiftUI ,尺寸这一布局中极为重要概念,似乎变得有些神秘。无论是设置尺寸还是获取尺寸都不是那么地符合直觉。...这类视图主要作用有: 突破 ViewBuilder Block 数量限制 方便为一组视图统一设置 view modifier 有利于代码管理 其他特殊应用, ForEach 可支持动态数量子视图等...SwiftUI 尺寸 如上文中所示, SwiftUI 布局过程不同阶段、出于不同用途,尺寸这一概念是不断地变化。... SwiftUI ,通过设置或调整建议模式而进行二次布局场景很多,比较常用有:frame、fixedSize 等。...( 文本不折行、不省略 ) 85.33 x 20.33( 上文例子尺寸 ) 明确尺寸模式 如果建议宽度大于单行显示需要,则需求宽度返回单行实现显示尺寸宽度 85.33 ;如果建议宽度小于单行显示需要则需求宽度返回建议尺寸宽度

4.6K20

SwiftUI 布局 —— 尺寸( 下 )

欢迎大家 Discord 频道[2] 中进行更多地交流 上篇[3] ,我们对 SwiftUI 布局过程涉及众多尺寸概念进行了说明。...本篇,我们将通过对视图修饰器 frame 和 offset 仿制进一步加深对 SwiftUI 布局机制理解,并通过一些示例展示布局时需要注意问题。...相同长相、不同内涵 SwiftUI ,我们可以利用不同布局容器生成看起来几乎一样显示结果。...frame 无论功能上还是实现上均有巨大不同,因此 SwiftUI 它们分别对应着不同布局容器。...SwiftUI 布局机制窗口,无论你未来工作是否需要使用 Layout 协议创建自定义布局容器,掌握它都将获得莫大好处。

2.6K40

优化 SwiftUI List 显示大数据集响应效率

本文将通过一个优化列表视图案例,展现在 SwiftUI 查找问题、解决问题思路,其中也会对 SwiftUI 视图显式标识、@FetchRequest 动态设置、List 运作机制等内容有所涉及...标识( Identity )是 SwiftUI 程序多次更新识别相同或不同元素手段,是 SwiftUI 理解你 app 关键。... SwiftUI 为视图设置显式标识目前有两种方式: ForEach 构造方法中指定 由于 ForEach 视图数量是动态且是在运行时生成,因此需要在 ForEach 构造方法中指定可用来标识子视图...我们可以通过 ForEach 外面分别为列表端点设置显式标识来解决使用 scrollTo 滚动到指定位置问题。...生产中处理方式 本文为了演示 id 修饰符 ForEach 异常状况以及问题排查思路,创建了一个在生产环境几乎不可能使用范例。

9.1K20

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

NavigationView + NavigationLink 界面跳转,苹果给 SwiftUI 使用例子中就是这样写,当然我们正常使用这样写也没啥问题,那我们界面跳转问题是什么呢?...如果你看了我们 Demo代码,你就知道我们是采用 TabView 嵌套 NavigationView 形式,在这样模式下似乎是存在问题 TabView+NavigationView 你利用...有一个还得说明一下,GeometryReader 改变了它显示内容方式。 iOS 13.5 ,内容放置方式为 .center。 iOS 14.0 则为:.topLeading。...3、再提一点关于上面说滚动视图,UIKit我们可以用UICollectionView搞定一切,但是SwiftUI没有这个控件,我建议采用方式是 ScrollView + HStack + VStack... iOS 14.0 则为:.topLeading GeometryReader(content: { geometry in HStack

11.8K20

使用HSB而不是RGB来定义颜色

有多种方法可以代码定义颜色。最常用方法是指定三种基色值 - 红色、绿色和蓝色 (RGB)。本文通过指定色调、饱和度和亮度 (HSB) 值来探索替代机制使用。...可以 SwiftUI 创建一个调色板以显示可能颜色。...SwiftUI 使用 0 到 1 之间值来表示从 0 到 360 度色调值。以下代码类似于在在 SwiftUI 创建一个环形 Slider环形Slider用于显示色调选项。...互补色是色轮上彼此相对颜色。即使考虑饱和度和亮度使用之前,这些颜色也提供了很好对比度并且可以很好地协同工作。还有一种三色配色方案,其中三种颜色均匀分布色轮周围。...SwiftUI 查看匹配颜色 色轮显示每种色调匹配颜色 总结 我发现使用 HSB 定义颜色是一种更直观颜色定义方式。

2.6K30

SwiftUI-布局案例

} } 它结构如下:RootView —> ContentView —> Text,那么 Text 是如何显示屏幕上?官方介绍是如下 3 个步骤。 父视图为子视图提供预估尺寸。...子视图计算自己实际尺寸。 父视图根据子视图尺寸将子视图放在自身坐标系。 最重要是第 2 步,通常有 3 种设置尺寸方式。...无需计算,根据内容推断, Image 根据图片大小,Text 根据文字范围。 使用 frame 强制指定宽高。 设置缩放比例, Image 设置 aspectRatio。...2 个 Image 和 spacing 之和,所以内容 HStack 中正常显示。...堆栈将空间分成 3 个相等部分,每个部分宽度为 80。 将 80 这个尺寸推荐给最不灵活孩子。案例为 Image,其尺寸为 80x80。

11410

使用 SwiftUI Eager Grids

介绍 早在 2020 年,我们就拥有了 SwiftUI(LazyVGrid 和 LazyHGrid)绘制网格新视图控件。两年后,我们又获得了另一种在网格(Grid)显示视图视图控件。...单元格视图仅在它们被滚动时创建,并且它们滚动时停止计算。 这篇文章主题 Eager Grids 正好相反。SwiftUI 不在乎它们是屏幕上还是屏幕外。所有视图都被同等对待。...整个应用程序位于一个 swift 文件,因此只需几秒钟即可完成设置。只需创建一个新 Xcode 项目,将 ContentView.swift 文件替换为此 gist 文件文件,就可以开始了。...通常,列与其中最宽单元格一样宽。在下面的示例,橙色列宽度由第二行中最宽单元格决定。身高也是如此。示例,第二行与行中最高紫色单元格一样高。...步骤#4:将偶数行和奇数行移动到相对两侧。偏移量是六边形宽度一半 + 网格水平间距。第 5 步:行需要重叠,因此您需要将行高减少到四分之三 (3/4)。为什么是 3/4?

4.3K20

使用 SwiftUI 为 macOS 创建类似于 App Store Connect 选择器

我希望构建类似于 App Store Connect 选择器组件,使用户体验尽可能熟悉,并在本文中,将展示如何使用 SwiftUI 为 macOS 构建了这个组件。...创建选择器组件让我们分析一下,我们有一组想要在 SwiftUI 列表显示构建。每个构建都包含一组属性,其中之一是 betaGroups,它是一个表示构建所属测试群组结构体数组。...以上代码片段使用了 BetaGroup 结构体上一个名为 displayName 属性来显示测试群组名称,类似于 App Store Connect 显示方式,显示名称前两个单词首字母大写...作者应用程序添加了一个新界面,允许用户查看 TestFlight 上所有可用构建,并将它们添加到测试群组。... BetaGroupPicker ,用户可以看到构建所属测试群组,并有选择地将它们添加到或从构建中移除。

10710

SwiftUIHStack 和 VStack 切换

我们例子,LoginActionsView 不再只是水平方向排列,它现在也能移动到屏幕顶部。...为了观察当前水平方向尺寸,我们需要用到 SwiftUI 环境系统 — 通过 DynamicStack 声明 @Environment - 标记属性(带有 horizontalSizeClass...使用布局协议 虽然我们最后已经用了非常棒解决方案,可以在所有支持 SwiftUI iOS 版本中使用,但也让我们来探索一下 iOS 16 引入一些新布局工具(写这篇文章时,它作为...Xcode 14 一部分仍在测试阶段) 其中一个工具是新 Layout 协议,它既能让我们创建完整自定义布局,直接集成到 SwiftUI 布局系统,同时也提供给我们一种更丝滑更动画方式各种布局之间动态切换...我们例子,这意味着我们能同时把 HStack 和 VStack 传递给它,并且代表我们它们中间自动切换。

2.8K10

SwiftUI 布局协议 - Part 1

简介 今年 SwiftUI 新增最好功能之一必须是布局协议。它不但让我们参与到布局过程,而且也给了我们一个很好机会去更好理解布局 SwiftUI 作用。...这个框架使用了漂亮 Swift 语言技巧使你布局代码SwiftUI 插入时产生一个透明视图 。我将在后面-高明伪装者部分说明。...就像我以前文章 SwiftUI frame 表现 所描述那样,布局过程,父视图给子视图提供一个尺寸,但最终还是由子视图决定如何绘制自己。然后,它将此传达给父视图,以便采取相应动作。...例如,可能会根据提供尺寸截取文本,或者提供宽度内垂直展示文本,如果你使用 fixedSize 修改甚至可能超出屏幕就像例子图片一样。...无论如何,没有缓存情况下编写我们布局更简单一点,当我们以后需要时再添加。SwiftUI 已经做了一些缓存。例如,从子视图代理获得值会自动存储缓存。相同参数反复调用将会使用缓存结果。

3.2K10

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

    运营活动

    活动名称
    广告关闭
    领券