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

使SwiftUI矩形的高度或宽度与另一个矩形相同

SwiftUI是苹果公司推出的一种用于构建用户界面的框架,它采用声明式语法,简化了界面开发的过程。在SwiftUI中,可以使用GeometryReader来获取视图的大小信息,并根据需要进行调整。

要使一个矩形的高度或宽度与另一个矩形相同,可以使用GeometryReader和@State属性来实现。首先,创建一个@State属性来存储矩形的高度或宽度,然后使用GeometryReader包裹两个矩形,并将@State属性的值赋给另一个矩形的高度或宽度。

下面是一个示例代码:

代码语言:txt
复制
import SwiftUI

struct ContentView: View {
    @State private var rectangleSize: CGFloat = 100
    
    var body: some View {
        GeometryReader { geometry in
            VStack {
                Rectangle()
                    .frame(width: self.rectangleSize, height: self.rectangleSize)
                    .foregroundColor(.blue)
                
                Rectangle()
                    .frame(width: self.rectangleSize, height: self.rectangleSize)
                    .foregroundColor(.red)
                    .onTapGesture {
                        self.rectangleSize = geometry.size.width // 或者使用geometry.size.height
                    }
            }
        }
    }
}

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

在上面的示例中,我们创建了两个矩形,它们的高度或宽度都由rectangleSize属性控制。当点击红色矩形时,我们将rectangleSize属性的值设置为父视图的宽度(或高度),从而使红色矩形的大小与蓝色矩形相同。

这是一个简单的示例,你可以根据实际需求进行修改和扩展。在实际开发中,你可以根据具体的场景和需求,使用SwiftUI提供的其他功能和组件来实现更复杂的界面效果。

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

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

相关·内容

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

文本内容超出了矩形宽度Spacer 是有最小厚度设定,默认最小垫片厚度为 8px 。...即使文本宽度超出了 HStack 给出建议宽度,但 HStack 在布局时,仍会保留其最小厚度,导致下图上方文本无法充分利用矩形视图宽度。解决方法为:Spacer(minLength: 0)。...image-20220829152914736将合成后视图放置在某个可能会充满屏幕视图顶部底部显示结果或者预期不符 VStack { // Hello world 视图 1...Spacer 在 HStack 中只能进行横向填充,并不具备纵向高度高度为 0 ),因此 HStack 最终需求高度 Text 高度一致。...Text 中心点给定位置进行对齐( postion 是一个通过 CGPoint 来对齐中心点视图修饰器 )当然,你也可以获取 Text Geometry 信息,通过 offset padding

6.6K40

如何在 SwiftUI 中创建条形图

前言 条形图以矩形形式呈现数据类别,其宽度高度与它们表示值成比例。本文将展示如何创建一个垂直条形图,其中矩形高度将代表每个类别的值。...从将包含 BarChartView 以及可能其他文本数据视图开始。这个 BarChartView 包含一个标题和一个图表区,它们由文本和圆角矩形表示。...它需要每一条数据名称和值以及最大值和可用条形高度。每个条形图都表示为圆角矩形,条形高度相对于最大条形高度设置。条形颜色设置为纯蓝色。...文本视图宽度被限制在条形图宽度范围内,而且条形图标签文本会被截断,条形图文本视图也被限制在条形宽度范围内,并且文本可以被隐藏起来。...中组合矩形来创建条形图是比较容易

5.1K10

SwiftUI水平条形图

SwiftUI水平条形图 水平条形图以矩形形式呈现数据类别,其宽度与它们所代表数值成正比。本文展示了如何在垂直条形图基础上创建一个水平柱状图。 水平条形图不是简单垂直条形图旋转。...几乎相同,只是Bars被放置在一个垂直堆栈中,而不是水平堆栈。...矩形宽度数据值成正比。...Y轴标签Swift代码垂直条形图X轴代码相似,宽度设置高度设置互换。两种图表类型y轴线代码都是一样。...在水平条形图中,显示条形图上数值并隐藏X轴可以使图表更简洁。 显示和隐藏水平条形图上元素 结论 创建水平条形图SwiftUI代码创建垂直条形图代码不同。

4.7K20

Python之pygame学习矩形区域(5)

move_ip() 将矩形移动到位 move_ip(x,y) - >无 Rect.move()方法相同,但在适当位置操作。...inflate_ip() 在适当位置增大缩小矩形大小 inflate_ip(x,y) - >无 Rect.inflate()方法相同,但在适当位置操作。...clamp_ip() 将矩形移动到另一个内部 clamp_ip(Rect) - >无 Rect.clamp()方法相同,但在适当位置操作。...fit() 调整大小并移动纵横比矩形 fit(Rect) - > Rect 返回一个移动并调整大小以适合另一个矩形矩形。保留原始Rect纵横比,因此新矩形可以在宽度高度上小于目标。...normalize() 正确负尺寸 normalize() - >无 如果矩形负大小,这将翻转矩形宽度高度矩形将保持在同一位置,只交换侧面。

3K30

bitr函数_函数表达式

, //指定目标矩形区域左上角Y轴逻辑坐标 int nWidth, //指定源和目标矩形区域逻辑宽度 int nHeight, //指定源和目标矩形区域逻辑高度 HDC hdcSrc...DSTINVERT:表示使目标矩形区域颜色取反。 MERGECOPY:表示使用布尔型AND()操作符将源矩形区域颜色特定模式组合一起。...MERGEPAINT:通过使用布尔型OR()操作符将反向矩形区域颜色目标矩形区域颜色合并。 NOTSRCCOPY:将源矩形区域颜色取反,于拷贝到目标矩形区域。...PATPAINT:通过使用布尔OR()操作符将源矩形区域取反后颜色值特定模式颜色合并,然后使用OR()操作符将该操作结果与目标矩形区域内颜色合并。...int nWidthDest, //指定目标矩形宽度,按逻辑单位表示宽度。 int nHeightDest, //指定目标矩形高度,按逻辑单位表示高度

61750

Figma也可以用时间轴做超级流畅动画了

导出到GIF,Sprite,FramesCSS 如果您在团队中工作,则有权访问文件并运行Motion每个人都会看到您动画。将在代码中实现动画团队和开发人员进行交叉使用非常有用。...进阶操作 4.1 旋转点 首先,我们应该了解什么是旋转点锚点。假设我们内部有一个Frame和一个矩形矩形宽度= 100,高度= 100,x = 100,y = 100,旋转= 0°。...因此,位置为:X +(宽度/ 2)= 100 +(100/2)= 150。如果要设置Figma相同值,则应选择旋转点左上角。 让我们沿着X轴将其向右移动100像素,然后将其旋转-45°。 ?...选择结束Y关键帧并将其值更改为275,对“高度”重复相同操作,将其值设置为50。单击“播放”。 ? 看起来不太自然。因此,我们圆圈应向下移动,然后触摸底部,然后再更改其高度。...首先创建一个框架,一个矩形和一个文本。尺寸不重要。为了使他们全部动起来,我们必须把矩形和文本放置在新框架中。 但为什么不是组呢?我们会在下文说明。 ?

17.4K34

每日算法系列【LeetCode 354】俄罗斯套娃信封问题

题目描述 给定一些标记了宽度高度信封,宽度高度以整数对形式 (w, h) 出现。当另一个信封宽度高度都比这个信封大时候,这个信封就可以放进另一个信封里,如同俄罗斯套娃一样。...题解 题目要求矩形一个套着一个,然后求出最多套多少个,而一个矩形能套在另一个矩形上面的条件是长宽都大于另一个。 那么我们可以按照长度从小到大排个序,这样只有排在后面的矩形可以套在前面的矩形上。...但是宽度也有限制条件,也得大于前面的矩形,那么问题就转化成了,把宽度看成一个序列,找到一个最长上升序列,序列长度就是我们要答案。...但是这里有个问题,就是矩形如果是相同长度,它们宽度按照什么来排序呢?如果也是从小到大排,那么可能会出现多个相同长度矩形套在一起,这是不符合题意。...所以我们对相同长度矩形采取宽度降序方法排序,这样它们之中最多只会被选中一个了。 那么问题就变成了经典最长上升子序列问题了。

89320

SwiftUI 布局协议 - Part 1

这个框架使用了漂亮 Swift 语言技巧使布局代码在向 SwiftUI 中插入时产生一个透明视图 。我将在后面-高明伪装者部分说明。...它只是一对可选 CGFloat ,用于建议宽度高度。然而,正是我们如何解释这些值才使它们变得有趣。...当 sizeThatFits 方法在给定维度中(即宽度高度)收到建议尺寸为 nil 时,我们应该返回容器理想尺寸。当收到建议尺寸为0.0时,我们应该返回容器最小尺寸。...这样, SwiftUI 就会知道如何将其周围视图分开,为此,你需要实现布局方法 spacing(subviews:cache:)。...使用 AnyLayout 切换布局 布局容器另一个有趣地方,我们可以修改容器布局, SwiftUI 会友好地用动画处理两者切换。不需要额外代码!

3.2K10

SwiftUI:特殊效果 - 模糊,混合模式等

SwiftUI使我们能够出色地控制视图呈现方式,包括应用实时模糊,混合模式,饱和度调整等功能。 混合模式使我们可以控制一个视图在另一个视图上渲染方式。...例如,我们可以在ZStack中绘制一个图像,然后在顶部添加一个红色矩形,该矩形使用 multiply 混合模式绘制: ZStack { Image("zhy") Rectangle(...——在我们示例中,是图像每个像素和顶部矩形每个像素。...另一个流行效果称为 screen,它作用乘法相反:将颜色反转,执行乘法,然后再次反转颜色,从而产生较亮图像而不是较暗图像。...取而代之是,您会看到SwiftUI自适应颜色旨在在黑暗和明亮模式下看起来都不错,因此它们是红色,绿色和蓝色自定义混合色,而不是纯色。

2.4K60

SwiftUI 布局 —— 尺寸( 上 )

SwiftUI 布局过程速览 SwiftUI 布局就是布局系统通过为视图树上节点提供必要信息,最终计算出每个视图( 矩形 )所需尺寸以及摆放位置行为。...由于可以在宽度高度上分别选择不同模式,因此建议模式特指在一个维度上所提供建议内容。 最小化模式 该维度建议尺寸为 0 。...;如果建议高度小于单行显示高度,则需求高度返回单行显示高度 20.33;如果建议高度高于单行显示高度宽度大于单行显示宽度,则需求高度返回单行显示高度 20.33 …… 未指定模式 当两个维度均为未指定模式时...,需求尺寸为单行完整显示所需宽和高 85.33 x 20.33 不同视图,在相同建议模式及尺寸下会返回不同需求尺寸这一事实既是 SwiftUI 特色也是十分容易很让人困扰地方。...比如:当固定高度子视图高度已经超出了 VStack 获得建议尺寸高度,那么 Spacer 就只能获得高度为 0 渲染尺寸 多数情况下,渲染尺寸子视图最终显示尺寸( 视图尺寸 )一致,但并非绝对

4.6K20

Adobe Photoshop使用,选框工具进行选择教程

例如,若要绘制一个宽是高两倍选框,请输入宽度 2 和高度 1。 固定大小:为选框高度宽度指定固定值。输入整数像素值。...注意: 万像素 (px) 之外,还可以在高度值和宽度值中使用特定单位,如英寸 (in) 每厘米 (cm)。...5.为使选区参考线、网格、切片文档边界对齐,请通过执行下列操作之一来对齐选区: 选取“视图”>“对齐”选取“视图”>“对齐到”,然后从子菜单中选取命令。...选框工具可以文档边界各种 Photoshop 额外内容对齐,具体对齐方式由“对齐到”子菜单控制。 6.执行下列操作之一来建立选区: 使用矩形选框工具椭圆选框工具,在要选择区域上拖移。...消除锯齿 通过软化边缘像素背景像素之间颜色过渡效果,使选区锯齿状边缘平滑。由于只有边缘像素发生变化,因此不会丢失细节。消除锯齿在剪切、拷贝和粘贴选区以及创建复合图像时非常有用。

2.5K30

SwiftUI:视图显示和隐藏动画

SwiftUI最强大功能之一是能够自定义视图显示和隐藏方式。以前,您已经了解了如何使用常规if条件有条件地包含视图,这意味着当条件更改时,我们可以从视图层次结构中插入移除视图。...首先,我们添加一些可以操作状态: @State private var isShowingRed = false 接下来,我们使用该状态作为显示矩形条件: if isShowingRed {...通过使用withAnimation()包装状态更改,我们可以获得SwiftUI默认视图转换,如下所示: withAnimation { self.isShowingRed.toggle() }...有了这个小小改变,应用程序现在淡入淡出红色矩形,同时向上移动按钮以腾出空间。...一个有用方法是不对称,它允许我们在显示视图时使用一个转换,在视图消失时使用另一个转换。

4.4K30

WPF Path微语言

前两个数值描述左上角X和Y坐标,而后两个数值设置为矩形宽度高度。可在(0,0)点开始绘制矩形,从而得到普通Rectangle元素相同效果,或者使用不同值偏移矩形。...RadiusX="50" RadiusY="25" Center="50,25">  注意,两个半径值只是宽度高度值得一半...还可使用Center属性偏移椭圆位置。在该例中,中心被设置为椭圆外包围框正中心位置,所以使用绘制Ellipse形状完全相同方式来绘制椭圆图形。...Path元素效果相同,其中一个Path元素具有RectangleGeometry,而另一个Path元素具有EllipseGeometry(而且像是改用Rectangle和Ellipse形状)。...例如,每个几何图形都提供了Transform属性,可使用该属性拉伸、扭曲和选择路径响应部分。  几何图形另一个优点是可在几个独立Path元素中重用相同几何图形。

60440

使用SwiftUI创建万花尺

为了完成一些真正意义上绘图工作,我将带您通过创建一个简单SwiftUIspirograph。...“Spirograph”是一种玩具商标名称,你把一支铅笔放在一个圆圈里,然后绕着另一个圆圈圆周旋转,创造出各种几何图案,称为轮盘赌——就像赌场游戏一样。 这段代码包含一个非常具体公式。...我会解释,但是如果你不感兴趣的话,跳过这一章是完全可以——这只是为了好玩,这里没有介绍新SwiftSwiftUI。 我们算法有四个输入: 内圈半径。 外圈半径。...虚拟笔外圆中心距离。 要画多少轮盘赌。这是可选,但我认为它确实有助于显示算法工作时发生情况。...这是核心算法,但我们要做两个小改变:我们要分别将绘图矩形一半宽度高度添加到X和Y,使其在绘图空间中居中;如果θ为0,即如果这是轮盘中绘制第一个点,我们将我们路径中调用move(to:)而不是addLine

1.2K10

关于碰撞检测

1.矩形m矩形n 矩形1参数是:左上角坐标是(x1,y1),宽度是w1,高度是h1; 矩形2参数是:左上角坐标是(x2,y2),宽度是w2,高度是h2。...、bottom、top为矩形左、右、上、下坐标值) 第二种: 两个矩形中心点在x方向距离绝对值小于等于矩形宽度二分之一,同时y方向距离绝对值小于等于矩形高度二分之一。...下面是数学表达式: (x1 – x2)2 + (y1 – y2)2 <(r1 + r2) 3.矩形圆碰撞 通过找到矩形圆形最近点,判断其圆心距离,如果小于半径就碰撞 定义: 矩形上离圆心最近点为变量...因此,通过上述方法即可找出矩形上离圆心最近点了,然后通过『两点之间距离公式』得出『最近点』『圆心』距离,最后将其半径相比,即可判断是否发生碰撞。...两个矩形时候,要想保证相交,必须一个矩形左边界小于另一个矩形右边界,一个矩形下边界小于另一个矩形上边界。

1K10
领券