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

如何使矩形的高度与VStack的高度相同

要使矩形的高度与VStack的高度相同,可以使用GeometryReader来获取VStack的高度,并将其应用于矩形。

以下是实现的步骤:

  1. 在SwiftUI中,使用GeometryReader可以获取父视图的尺寸信息。我们可以将GeometryReader包裹在VStack外部,以便获取VStack的高度。
  2. 在GeometryReader中,使用GeometryProxy对象来获取父视图的尺寸信息。可以通过GeometryProxy对象的size属性获取父视图的尺寸。
  3. 使用@State属性包装矩形的高度。这样可以在视图层次结构中保持矩形高度的同步更新。
  4. 在矩形的高度属性中,将GeometryProxy对象的高度应用于矩形。

下面是一个示例代码:

代码语言:txt
复制
import SwiftUI

struct ContentView: View {
    @State private var rectangleHeight: CGFloat = 0
    
    var body: some View {
        GeometryReader { geometry in
            VStack {
                Text("VStack")
                    .font(.title)
                    .padding()
                
                VStack {
                    Rectangle()
                        .fill(Color.blue)
                        .frame(width: 200, height: self.rectangleHeight)
                }
                .background(GeometryReader { proxy in
                    Color.clear
                        .onAppear {
                            self.rectangleHeight = proxy.size.height
                        }
                })
            }
        }
    }
}

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

在上述示例中,我们使用GeometryReader包裹了整个视图,并在VStack的背景中嵌套了另一个GeometryReader。在嵌套的GeometryReader中,我们将矩形的高度设置为GeometryProxy对象的高度。这样,矩形的高度将与VStack的高度保持一致。

请注意,这只是一个示例,你可以根据自己的需求进行修改和调整。

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

相关·内容

allegro如何看元器件的高度

限高是大部分板子需要考虑的,有的是板子产品的限高,有的是散热器的限高等等。...大部分情况下,我们可以从ic的datasheet或者结构件的规格书找到高度,但是少部分情况下,我们并不清楚或者接触不到,这时候应该怎么办呢?...有个做法,就是看layout工程师建立封装的时候有没有把ic或者结构件的高度信息给放进去。...D:然后在find中勾选shape选项 E:接着选中你的元器件的place_bound_top,便可显示出来你的元器件高度信息。...F:view的3d view的效果图: 注意:有时候使用菜单栏中的view的3d view不能看见立体图,只能看到平面图,这时候应该接着在options里面选中package geometry,再选择

2.4K30
  • 求小球下落弹起的高度与路程

    问题 一个球从100米处降落,每次落地后都反弹回原高度的一半,再落下,求它在第十次的时候,共经过的路程为多少米,第十次反弹高度为多少米。...方法 使用函数def calhigh(n)完成代码的进行,利用公式o_h = 100*(1/2)**n计算第n和n+1次反弹的高度,利用for i in range(1,n+1)完成循环计算,利用...if判断语句得出当n=1时,输出“第1次总共经历100米高度为零”,当n>1时,输出“第n和n+1次共经历多少米”。...代码清单 def calhigh(n): o_h = 100*(1/2)**n print(f第{n}次的高度为{o_h}’) return o_h h1 = 100 n = int(input(‘请输入次数...+= h1 print(f’总共经历了{sum}米’) 结语 使用函数def calhigh(n),for x in ...和if循环语句完成了求小球下弹起的高度与路程的问题,通过实验证明,该方法有效

    21320

    关于Div的宽度与高度的100%设定

    正像你所知道的那样,设置DIV大小的有两个属性width和height,以前在学习DIV每次给DIV设置100%宽度或高度时都很迷惑,不明确这个100%的宽度(高度)到底有多宽有多高?...这个100%是从哪里得到的从哪里继承的?今天我们的话题就是有关div高度100%的问题!...你设div的高度为100%,那么它是和什么地方相对为100%? 前面总得有个容器说明他的高度是多少。这样的话div才能按比例100%继承上一级的高度。...可惜的是浏览器一般默认解释为内容的高度,而不是100%。...但是只要为html和body设置高度为100%就可以了:html,body{height:100%;},这样之后div会按比例来继承上一级的高度了,仅仅设置的DIV元素的height属性貌似没有什么效果

    3.9K20

    如何在onCreate中获取View的高度和宽度

    如何在onCreate中获取View的高度和宽度 在开发过程中经常需要获取到View的宽和高,可以通过View.getWidth()和View.getHeight()来得到宽高。...然而新手们经常在onCreate方法中直接调用上面两个方法得到的值是0! 这是为什么呢? 因为View绘制是通过两个遍历来完成的,一个measure过程,一个layout过程。...而这一切是发生在onCreate方法之后的。所以在onCreate中直接使用View.getWidth()和View.getHeight()是无法得到正确的值的。...那应该怎么onCreate中获取View的宽高呢?...开发者可以通过View.post()方法来获取到View的宽高,该方法传递一个Runnable参数,然后将其添加到消息队列中,最后在UI线程中执行。

    5.3K20

    DeepMind团队:新的训练策略使机器人高度复现人类和动物运动

    基于计算机技术和生物交叉融合技术的高速发展,近些年来推出的一系列复杂机器人在特定环境中已经可以实现越来越高效的操作,而其中许多系统的结构组成是受自然界、动物和人类的启发。...尽管这些机器人有类似于人类或其他动物的仿生结构,但它们的运动却不如像模仿的动物那样简单自如,这其中往往依靠复杂的编程控制和结构的不断优化,为了让实现真正的像动物那样移动,通常依靠运动控制器的优化,而这可能占据大量的资源和研发工作...最近,来自伦敦的DeepMind团队在《arXiv》上提出了一种新技术,可以有效地训练机器人实现复制人类或动物的动作,用到的新工具受到了以前工作的启发,依靠运动捕捉技术收集人类和动物的运动数据。...依靠运动捕捉技术收集的运动数据中提取出人类和动物的运动技能,然后用这些数据来训练机器人。 系统功能的开发过程 该系统功能的开发过程依靠用精确的仿真模型以及仿真中的动力学和定义域随机化来实现的。...该团队表示:" MoCap数据所提供的先验过程对该系统功能的开发十分重要,我们的方法不需要大规模的反馈机制在重用时产生合理和自然的表观行为,这使得我们可以很容易地实现规范化的、面向任务的控制器,并且他们都适合应用于真实的机器人

    56720

    如何让高度、宽度不定的容器保持水平、垂直居中

    这个题目似乎解决的办法很多,JS是最能够确保各种浏览器中一致性的,但是仍然可以使用CSS的方式来解决。这个问题分解为两个方面,第一解决左右居中的问题,第二解决上下居中的问题。 1、左右居中。...实际上,这个属性定义的是块级对象内部文字的对齐方式,内部的文字或者图像一般是内联对象。 也许有人会提到,为什么不用 margin:0 auto;这个办法呢?...这是一个好问题,在做居中布局的页面时,这是我们最常用的让DIV容器居中的办法。margin作用于块级元素,而是否作用于其他内敛元素,不同的浏览器有着不同的解释,因此对于左右居中,没有使用这个方法。...上下居中,有两种方法,一种是负margin的办法,这种对于固定宽度的容器,非常的好用。另外一种就是适应于高度不固定的情形,即使用 vertical-align 属性。...在表单元格中,这个属性会设置单元格框中的单元格内容的对齐方式。 3、最后代码 综上,可以得出对于高度、宽度都不固定的容器,如何让其做到水平、垂直居中: 1 <!

    2.6K20

    如何实现iframe(嵌入式帧)的自适应高度

    好几次看到有人提问问到如何实现 iframe 的自适应高度,能够随着页面的长度自动的适应以免除页面和 iframe 同时出现滚动条的现象,刚好我在工作中也碰到了类似问题,于是上网翻查,东抄抄西看看,弄出来这么一个函数...不敢独享,大家要是觉得有用,欢迎使用 源代码如下  //** iframe自动适应页面 **//  //输入你希望根据页面高度自动调整高度的...iframe的名称的列表  //用逗号把每个iframe的ID分隔....//定义iframe的ID  var iframeids=["test"]  //如果用户的浏览器不支持iframe是否将iframe隐藏 yes 表示隐藏,no表示不隐藏  var iframehide...  for (i=0; i<iframeids.length; i++)   {    if (document.getElementById)    {     //自动调整iframe高度

    1.2K20

    win10 uwp 如何修改 Flyout 的宽度或高度

    本文告诉大家如何修改 Flyout 的尺寸 在堆栈有小伙伴问如何修改 Flyout 的宽度,他看到宽度会使用第一个元素的大小而不是最大的 的宽度或高度 第一个方法是通过修改 Flyout 的里元素宽度和高度的方式,如下面代码 ...Flyout 的宽度,我将代码放在 github 欢迎小伙伴访问 如果此时的窗口的大小变小了,那么 Flyout 也会自动修改自己的宽度和高度,可以使用FlyoutPresenterStyle属性修改...,如果想要设置高度相信小伙伴也知道如何修改 上面代码有一个细节是需要设置 TargetType="FlyoutPresenter" 才可以 上面代码也放在 github 欢迎小伙伴访问 如果是后台代码写的...欢迎转载、使用、重新发布,但务必保留文章署名林德熙(包含链接: https://blog.lindexi.com ),不得用于商业目的,基于本文修改后的作品务必以相同的许可发布。

    1.5K00

    如何将设计稿转成高度可维护的代码? | ArchSummit

    编辑|孙瑞瑞 在互联网行业蓬勃发展的今天,面对业务量暴增,定制化需求井喷的情况,传统的人力密集型研发早已无法解决这一问题。如何利用有限的人力吞吐更多的业务,是我们不断追求的永恒主题。...在过往,我们探索并实践过工程化、低代码化等方案,研发效能的提升已经到达了一个平台期,如何进一步提升研发效能,打通设计与研发的工作流程,实现规模化生产,仍是许多前端同学与设计同学一直关注的痛点问题。...11 月 12-13 日,ArchSummit 全球架构师峰会(深圳站)策划了【面向未来的前端技术】专题,我们邀请了来自京东的资深前端开发工程师李伟涛老师,分享议题“研发提效 2.0:设计稿转代码的探索与实践之路...”,在本次分享中,李伟涛老师将结合团队具体的业务场景,分享京东在设计稿转代码上的思路方案以及遇到的问题,带领大家全方位了解如何将设计稿转换成高度可维护的代码,从而减少前端工程师的工作量,提升开发效率,创造更多业务价值...同时,【架构师成长实战】、【应云而生的新一代数据架构】、【边缘计算与 IoT 架构】等重磅专题已完成全部议题上线,议题内容正在持续打磨中,敬请期待。

    89130

    动态生成DOM元素的高度及行数获取与计算方法

    背景 在开发IM的项目过程中,经常会有出现一些需要计算DOM高度,然后超出若干行隐藏等需求。很多时候,需要计算高度的DOM元素都是动态生成的,我们无法在数据渲染前获取到它的高度。...技术方案 根据前端的基本常识,在内存中未渲染的DOM元素是无法获取到高度的,因此我们有两个方向来解决这个难题: 通过字数对行数进行估算 将元素渲染后进行高度测算 实现方案 以下的实现方案将根据上面所选择的技术方案来进行实现...获取高度后页面行数计算将在后面统一讲解。 优点 此方案通过直接在实际场景的页面上渲染后进行高度计算,因此计算精准,不存在任何偏差。...因为在实际的页面中进行计算能够保证页面高度计算没有任何误差,因此我们需要一个实际的场景,让浏览器来帮助我们进行高度计算。...同时,我们又不能在具体的功能页面中先渲染后计算,因此我们可以直接创建一个与实际页面中一模一样的容器来进行高度计算。这样我们既能够精确计算,又能够不影响用户体验。

    4K30

    如何在DC OS上构建高度可扩展的物联网平台

    MongoDB是物联网架构中持久存储的一种流行选择,原因有很多,包括高可伸缩性,对复杂查询的支持,以及它不需要严格的模式,因此您可以使用不同的原生JSON将文档推送到它每个字段的类型。...如果您想运行此博客中使用的代码,您可以在GitHub上找到所有内容。 让我们首先看一下我们要部署的平台的整体架构: 在顶部,我们有许多使用MQTT协议的数据生成器设备。...我们将以与设备示例完全相同的方式构建它,使用Dockerfile并将Docker镜像推送到存储库。...value" : 25, "gatewayID" : "mqtt.instance-565e6b1f-b75d-11e8-9d5d-fe0bc23c90b8.mongogw" } 我们可以看到,这些都使用相同的网关...因此,我们可以看到,我们在演示IoT应用程序的每个层中都采用了高度可扩展的架构,而DC / OS使其非常易于部署和管理。

    3.6K40

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

    image-20220829152914736将合成后的视图放置在某个可能会充满屏幕的视图的顶部或底部显示结果或者与你的预期不符 VStack { // Hello world 视图 1...因此,当我们将合成后的 hello world 视图放置在 VStack 顶部时( 通过 Spacer ),矩形的 background 会连同顶部的安全区域一并渲染。...Spacer 在 HStack 中只能进行横向填充,并不具备纵向的高度( 高度为 0 ),因此 HStack 最终的需求高度与 Text 的高度一致。...那么 HStack、VStack 会在明确了所有固定尺寸子视图的需求尺寸后,将所剩的可用尺寸( HStack、VStack 的父视图给他们的建议尺寸 - 固定尺寸子视图的需求尺寸 )平均分配( 在优先级相同的情况下...万变不离其宗,掌握了 SwiftUI 的布局原理,无论需求如何变化都可轻松应对。

    6.8K40

    如何理解一个高度抽象化的架构风格本质

    REST本身是一个高度抽象化的架构风格,因而总是很难对它有一个比较深入且印象深刻的理解。写这篇文章的目的,是自己对学习REST的一个总结,也希望可以通过这篇文章,能够让读者真正的理解REST。...举一个简单的例子来说明一下: “一个APP的当前版本”是一个资源,而“一个APP的最稳定版本”也是一个资源,尽管这两个资源在某个时刻上可能会映射到相同的值,但它们是是截然不同的,且两个资源能够被单独地标识和引用...缓存架构要求一个请求的响应中的数据被隐式地或显式地标记为可缓存的或不可缓存的。如果响应是缓存的,那么客户端缓存就可以为以后的相同请求重用这个响应的数据。...缺点 如果缓存中陈旧的数据与将请求直接发送到服务器得到的数据差别极大,那么缓存会降低可靠性。 统一接口 使REST架构风格区别于其他基于网络的架构风格的核心特征是,它强调组件之间要有一个统一的接口。...我们能够使用层级来封装遗留服务,使新的服务免受遗留客户端的影响,做法是将不常用功能转移到一个共享中间组件中,从而简化组件的实现。

    87630

    打造敏捷外包团队的高度自主与自我学习的生态系统

    前言:    敏捷开发在没有笨重的流程与过重文档的情况下, 为使产品的开发能维持高效的运作, 关键的作法便在于: 团队能否建立一高度自主与自我学习的生态系统?...本文:    对于一由多家外包公司组成, 且外包团队成员人数上百的产品外包团队而言, 在管理的复杂度上, 本身就已相当的高; 要在这管理复杂度如此高的外包团队中, 使团队成员能具备高度自主与自我学习,...在管理复杂度极高的外包团队, 要建立起一高度自主与自我学习的生态系统, 却只需专注在下列二件事情上: 1.     以外包骨干人员带动团队的其他成员◦ 2.     ...与 Product Owner 关系良好; 甚至可说是具有革命般深厚的情感◦ b.     在外包团队中具有一定的影响力与领导统御的能力◦ c.      ...唯有如此, Product Owner 才能经由这些外包骨干人员, 使每家外包公司可自主管理, 使外包人员能由消极被动转变为积极主动且愿意的自我学习◦ II.

    60370

    如何做一名有高度的移动开发工程师

    环境的要求越来越高,所以我们也要积极转变,踏踏实实的学习。 如何成为一名 Android 开发高手,是很多Android开发人员的终极理想。...做一名有高度的工程师 作为一名技术工程师,不管你是从事前端开发还是后端开发,T 型技术人才理论都比较适合,所谓的“T”指的是横向和纵向两个维度。纵向解决的是深度问题,横向解决的是广度问题。...并且我比较推崇先有深度再有广度,因为技术都是一通百通的。 作为一个有高度的移动开发工程师,需要能纵向深入,也要能横向全面地思考每一个问题。...除此之外,页面哪里产生、如何发布、发布到哪里、如何下载、如何解析、如何渲染、如何衡量和监控页面的性能,这些全部都是我们需要思考的问题。...以性能组件为例,虽然我们收集了应用各个维度的性能数据,但是这些数据在后台如何聚合、如何存储、如何分析、如何报警,我们并没提供解决方案。

    39120

    如何在 SwiftUI 中创建条形图

    前言 条形图以矩形条的形式呈现数据的类别,其宽度和高度与它们表示的值成比例。本文将展示如何创建一个垂直条形图,其中矩形的高度将代表每个类别的值。...系列文章 如何在 SwiftUI 中创建条形图 SwiftUI 中的水平条形图 在 iOS 16 中用 SwiftUI Charts 创建一个折线图 在 iOS16 中用 SwiftUI 图表定制一个线图...GeometryReader 被用来确定条形图的可用高度。数据中的最大值得到后并传递给每个 BarView。...主图表区域保持原来的圆角矩形,并以水平堆叠的方式叠加一系列条形,每个 DataItem 一个。...它需要每一条数据的名称和值以及最大值和可用的条形高度。每个条形图都表示为圆角矩形,条形高度相对于最大条形高度设置。条形的颜色设置为纯蓝色。

    5.2K10
    领券