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

如何在SWIFT UI小部件中使分隔线高度等于水平堆栈的另一个子级

在SWIFT UI小部件中,可以通过使用Divider()小部件来实现分隔线的效果。要使分隔线的高度等于水平堆栈中的另一个子级,可以使用GeometryReader来获取水平堆栈的尺寸,并将尺寸应用于Divider()的高度。

下面是一个示例代码:

代码语言:txt
复制
import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Hello, World!")
            
            Divider()
            
            HStack {
                Text("Child View 1")
                    .padding()
                    .background(Color.gray)
                
                Divider()
                    .background(GeometryReader { geometry in
                        Color.clear.preference(key: SizeKey.self, value: geometry.size.height)
                    })
                
                Text("Child View 2")
                    .padding()
                    .background(Color.gray)
            }
            .onPreferenceChange(SizeKey.self) { height in
                Divider()
                    .frame(height: height)
                    .background(Color.gray)
            }
        }
    }
}

struct SizeKey: PreferenceKey {
    static var defaultValue: CGFloat = 0
    
    static func reduce(value: inout CGFloat, nextValue: () -> CGFloat) {
        value = nextValue()
    }
}

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

在上面的代码中,使用了一个GeometryReader来获取HStack的尺寸,然后将尺寸应用于Divider()的高度。通过使用PreferenceKey来传递高度数值,并在onPreferenceChange中对Divider()进行设置。

注意:这只是一个示例代码,具体的使用场景和布局可能会有所不同,需要根据实际情况进行调整。关于SWIFT UI的更多内容,请参考苹果官方文档或相关教程。

希望这个答案能够对您有所帮助!

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

相关·内容

Flutter中构建布局 顶

然后本指南回过头来解释Flutter布局方法,并说明如何在屏幕上放置一个小部件。 在讨论如何水平和垂直放置小部件之后,会介绍一些最常见布局小部件。...小部件是用于构建UI类。 小部件用于布局和UI元素。 撰写简单部件来构建复杂部件。 Flutter布局机制核心是小部件。...子小部件本身可以是行,列或其他复杂小部件。 您可以指定行或列如何在垂直和水平方向上对齐其子项。 您可以拉伸或限制特定部件。 您可以指定子窗口小部件如何使用行或列可用空间。...(平板电脑)上水平运行效果最佳。...Stack摘要: 用于与另一个小部件重叠部件 子列表中第一个小部件是基础小部件; 随后子被覆盖在基础小部件顶部 堆栈内容不能滚动 您可以选择剪切超过渲染框子项 Stack示例: ?

43.1K10

【Android从零单排系列二十九】《Android布局介绍——LinerLayout》

布局属性:通过在子视图布局参数中设置不同权重、对齐方式和填充方式,可以灵活控制每个子视图在LinearLayout中位置和大小。...使用LinearLayout时,可以考虑以下几点: 在XML布局文件中使用标签来定义LinearLayout。...在LinearLayout中添加子视图(Button、TextView等)作为其子元素,并使用布局参数(layout_width和layout_height等)设置每个子视图大小和对齐方式。...android:divider:设置LinearLayout分隔线Drawable。 android:showDividers:设置是否显示分隔线以及显示位置。...这个简单LinearLayout案例展示了如何在垂直方向上排列文本和按钮,并通过android:layout_gravity属性实现水平居中对齐。

23030

【译】Flutter架构综述

应用程序在所有版本操作系统上看起来和感觉是一样,即使操作系统改变了其控件实现。 Composition 小部件通常由许多其他、单一用途部件组成,这些小部件组合起来可以产生强大效果。...相反,它们唯一目的是控制另一部件布局某些方面。Flutter还包括利用这种组合方法实用工具部件。...RenderBox提供了一个盒子约束模型基础,为每个要渲染widget建立了一个最小和最大宽度和高度。 为了执行布局,Flutter以深度优先遍历方式走过渲染树,并将尺寸约束从父传递到子。...现实世界中一个例子是流式文本,它可能必须适合一个水平约束,但根据文本数量而在垂直方向上变化。即使当一个子对象需要知道它有多少可用空间来决定如何渲染它内容时,这个模型也能工作。...数据从像Map这样Dart类型序列化为标准格式,然后反序列化为Kotlin(HashMap)或SwiftDictionary)中等价表示。 ?

5.6K10

Flutte部件目录-布局

如果给定孩子,这个小部件强制它孩子有一个特定宽度和/或高度(假设这个小部件父母允许这个值)。 如果宽度或高度为空,则此小部件将自行调整大小以匹配该维度中大小。...SizedOverflowBox 一个具有特定大小部件,但将其原始约束传递给其子,这可能会溢出。 Transform 绘制其子之前应用转换部件。...CustomSingleChildLayout 将其单个孩子布局延迟到代理部件。 多子部件布局部件 Row 在水平方向上布局子部件列表。 Column 在垂直方向上布局子部件列表。...Stack 如果你想以一种简单方式重叠几个子部件,这个类很有用,例如有一些文字和图像,用梯度和底部附加按钮叠加。 IndexedStack 显示一个子部件列表中个子部件堆栈。...ListBody 一个小部件,它沿着一个给定轴顺序排列它子元素,强制它们到另一个轴父元素维度。 ListView 可滚动线性小部件列表。 ListView是最常用滚动小部件

1.5K10

Flutte部件目录-基本部件(一)

Container按顺序尝试:遵守alignment,将自己调整到child部件尺寸,遵守宽度,高度和constraints,扩展以适应父部件,变得尽可能。...如果部件没有子且没有alignment(对齐),但是提供了高度,宽度或constraints(约束),那么基于给定这些约束和父对象约束相结合容器会尝试尽可能。...如果小部件没有孩子,没有高度,没有宽度,没有约束,也没有对齐,但父提供有界约束,则Container展开以适应父提供约束。...另外,部件有一个子部件,但没有高度,没有宽度,没有约束,也没有对齐,并且容器将约束从父项传递给子项,并将其自身尺寸设置为与子部件匹配。...如果mainAxisSize属性为MainAxisSize.min,那么Column高度就是子高度总和(受传入约束条件影响)。

7.4K20

Flutter你竟是这样布局

Widget一个接一个地告诉其孩子约束(每个孩子可能有所不同),然后询问每个孩子想要大小,然后,Widget将其孩子定位(水平地在x轴上布局,垂直地在y轴上布局),最后,该小部件将其自身大小告诉父...Widget: 嗯,由于我想将第二个子Widget放到第一个子Widget下面,所以第二个子Widget只剩下55像素高度。...注意:当小部件告诉其子必须具有一定大小时,我们说该小部件为其子提供了tight约束。...tight constraint提供了一种可能性,即确切大小。换句话说,tight constraint最大宽度等于其最小宽度。并且其最大高度等于其最小高度。...当然,屏幕是通过将tight constraint传递给Container来实现另一方面,宽松约束设置了最大宽度和高度,但使小部件尽可能

2.3K20

写给初学者Jetpack Compose教程,高级Layout

Compose基础控件和布局在 写给初学者Jetpack Compose教程,基础控件和布局 这篇文章中已经有比较详细讲解了,但是这篇文章中使都是Compose内置好布局,Column、Row...这也就意味着,如果Text高度发生了变化,分隔线高度是不会跟着变。...毕竟分隔线高度是写死。...但是我猜这一定不是大家期望中效果,大家一定是期望这个分隔线高度能够随着Text高度变化而自适应变化。 这要怎么写呢?...但是很明显,这里Divider分隔线并不想决定自己高度,而是想去适配两个Text控件高度。 那到底该如何实现自适应高度分隔线呢?这个时候IntrinsicSize终于要登场了。

21010

用好视觉分隔符,让你设计变“高级”

摹一起来看看都有哪些常见视觉分隔符吧~ 什么是视觉分隔符? 视觉分隔符是一种布局元素,有助于将内容分成清晰组、部分或区域。...旅行App不需要任何额外视觉元素,只需要利用空白来分隔列表中项目。 颜色对比 另一种有效视觉分隔是色彩对比。在UI设计中,色彩选择和组合对用户可以产生巨大心理暗示作用。...阴影和体积 阴影和体积,通常是作为展示视觉高度元素,但也可以作为一种非常有效分隔符。它们结合使用,有助于营造页面深度和内容分层,达到自然而和谐视觉效果。另一方面,它看起来也没有线条那么明显。...因此,这种方法有助于实现特定项目的平衡度和易读性,而不会产生过多视觉干扰。 ? 图示屏幕中使用阴影使布局更有深度。 图片 不同图片本身就是一种视觉分隔器,尤其在包含大量文本内容界面中特别受欢迎。...画廊App使用实线水平线作为艺术家列表分隔线。 ? Perfect Recipe使用实线分割线来分隔菜单。 ? 财务App也使用实线分隔线来分隔费用列表。 ?

1K10

【移动开发】InfoQ 2022 年移动和物联网趋势报告

这总结了在桌面上运行移动应用程序可能性带来新机会。 我们在移动应用程序和可穿戴领域看到另一个趋势是依赖 AR/VR 以及机器学习和计算机视觉高级 UI。...InfoQ 最引人注目的功能之一是我们主题图,它综合了我们对不同主题如何在技术采用曲线中叠加理解。...另一方面,虚拟现实主要针对专门耳机, Oculus、索尼 PlayStation VR、HP Reverb 等,它们主要专注于游戏。这个领域新动力也可能来自智能眼镜发展。...这种方法会引导您选择一个参考平台,即 iOS 或 Android,并使用其技术堆栈为您参考平台构建您应用程序,并尽可能为另一个平台构建您应用程序。...在 UI 方面,Swift for Android 提供了 Crystal,一个用于构建原生 UI 跨平台、高性能图形引擎。

1.1K10

Flutter Widget框架之旅 顶

中心思想是你从小部件中构建你UI。 小组件描述了他们视图在给定其当前配置和状态时应该看起来像什么。...Row,Column:这些柔性小部件可让您在水平(Row)和垂直(Column)方向上创建灵活布局。 其设计基于WebFlexbox布局模型。...然后,您可以在堆栈子项上使用Positioned小部件,以相对于堆栈顶部,右侧,底部或左侧边缘定位它们。Stacks基于Web绝对定位布局模型。...在更复杂应用程序中,小部件层次结构不同部分可能对不同问题负责; 例如,一个小部件可能呈现一个复杂用户界面,其目标是收集特定信息(日期或位置),而另一个小部件可能会使用该信息来更改整体呈现。...它将它在构造函数中接收到值存储在final成员变量中,然后在build函数中使用它。例如,inCart布尔值可以在两个可视外观之间切换:一个使用当前主题主要颜色,另一个使用灰色。

6.7K20

肘子 Swift 周报 #038 | 更好还是更便宜?

此外,医疗领域应用尤为引人注目,许多医生已开始在手术中使用 AVP,与传统医疗设备相比,AVP 显示出其独特价值和实用性。...苹果或许可以考虑双管齐下策略:一方面推出性价比更高入门款,提高头戴设备普及率;另一方面持续优化 AVP 性能,巩固其在行业中领先地位。...通过本文,读者将能够深入理解如何在 Swift 环境中实施 WebSocket 通信,并掌握其技术优势及适用场景。...然而,与基于 AppDelegate 传统方法相比,ScenePhase 在处理应用启动和终止等关键事件时显得力不从心。...Jesse Squires 建议开发一个更全面的 AppPhase API,以便于窗口场景事件分离,独立管理应用生命周期事件。

10810

HarmonyOS4.0——ArkUI应用说明

部件组件层:包括多态控件,统一交互能力,以及在此基础上组件组合。面向典型场景:提供分类页面组合模板以及示例代码。...实时性预览:改动相应代码,实时呈现出相应UI效果。另外,代码能够和UI双向联动,代码改动同时UI也实时变更,UI改动同时代码也相应地变更。多维度预览:支持页面预览、组件预览、多设备预览。...属性方法:用于组件属性配置,统一通过属性方法进行设置,fontSize()、width()、height()、size()等,可通过链式调用方式设置多项属性。....divider({ // 设置列表分隔线样式 strokeWidth: 3, // 分隔线宽度为3 color: Color.Gray // 分隔线颜色为灰色...LazyForEach在每次迭代中,必须创建且只允许创建一个子组件。生成子组件必须是允许包含在LazyForEach父容器组件中子组件。

20210

iOS开发常用之网络

它使用基于ViewController容器特性(而不是滚动视图)来管理各个子页面,以支持无限分页,源码推荐说明。...MGSwipeTableCell - 另一个常见于很多应用中UI组件,苹果应该考虑在标准iOS SDK中加入一些类似的内容.Swipeable表格cell是这个pod最佳描述,也是最好。...LayoutTrait - swift一个类库。做iPad多任务分屏适配同学可以看一下。 HACursor - HACursor,是一个对横向ScrollView中视图进行管理UI控件。...JWAnimatedImage.swift - JWAnimatedImage.swift集中了目前主流GIF显示库(FLAnimatedImage,Gifu等)优点,进行重构,代码短小精悍。...更赞是额外附了详细开发教程如何在Swift中制作Tinder-Like Koloda动画网页链接 .Yalantis出品动画程序款款精品。

23.6K10

使用 SwiftUI Eager Grids

您所知,没有框架修饰符形状喜欢增长以填充父提供所有空间。在这种情况下,网格将增长以填充其父提供所有空间。 在下面的示例中,绿色单元格在其水平维度上不受限制,因此它使用了所有可用空间。...这种类型单元格常见用途是创建分隔符。例如,您可以使用 Divider() 视图,或者更复杂视图,如下例所示。请注意,我们通常不希望分隔线使网格增长到最大值,因此我们使视图在水平轴上未调整大小。...这将使分隔线与最宽行一样宽,但不会更宽。...它高度等于宽度 * cos(.pi/6)。如果您想知道原因,请查看 Impossible Grids,我在其中解释了原因。步骤#3:用提供六边形剪裁图像。...步骤#7:如果使垂直间距等于水平间距,则单元格将均匀分布。 初始点 为了让你开始,这里有一些代码。

4.4K20

开始使用-编写你第一个Flutter应用程序 顶

第1步:创建起始Flutter应用程序 第2步:使用外部包装 第3步:添加一个有状态部件 第4步:创建一个无限滚动ListView 第5步:添加交互性 第6步:导航到新屏幕 第7步:使用主题更改UI...在Flutter中,导航器管理包含应用程序路由堆栈。 将路由推入导航器堆栈,将显示更新为该路由。 从导航器堆栈中弹出路由,将显示返回到前一个路由。...提示:某些小部件属性采用单个小部件(子),而其他属性(操作)则采用小部件(子)数组,方括号([])所示。...新页面的内容是使用匿名函数在MaterialPageRoutebuilder属性中构建。 将呼叫添加到Navigator.push,突出显示代码所示,将路由推送到导航器堆栈。...现在,添加生成ListTile行代码。 ListTiledivideTiles()方法在每个ListTile之间添加水平间距。

9.5K20

腾讯开源超实用UI轮子库,我是轮子搬运工

丰富 UI 控件 提供丰富常用 UI 控件,例如 BottomSheet、Tab、圆角 ImageView、下拉刷新等,使用方便灵活,并且支持自定义控件样式。...dp 与 px 数值相互转化。 QMUIDrawableHelper 快速绘制一张指定大小、颜色、边框图片,支持形状为圆角矩形和圆形。 快速绘制一张带上分隔线或下分隔线图片。...快速绘制一张可带圆角渐变图片。 将当前图片颜色换成另一个颜色。 将两张图片叠加后生成一张新图片。 对某个 View 截图生成图片。...提供多个常用工具方法,获取状态栏高度、判断当前是否全屏等等。...最后针对Android程序员,我这边给大家整理了一些资料,包括不限于高级UI、性能优化、移动架构师、NDK、混合式开发(ReactNative+Weex)微信程序、Flutter等全方面的Android

4.7K30

如何避免过早优化魔咒

无论如何,如果你认为你已经找到了一个完美的系统,那么在它持续时候好好享受它吧,我想。没关系,失败是学习好机会。 ? 牢记UX 让我们来探索一下用户体验是如何在这些潜在优先中进行。...为了帮助平衡优先艺术,我想和大家分享一些故事。 在一份工作中,我工作那家公司使用是一个基于固执己见技术堆栈封闭源代码企业系统。...相比之下,你可能会想要在你项目中使每一件事UX 圆满。这是一个有价值目标,但让我来讲述我第二个故事。...但是,也许这个决定会等到所有的其他算法都实现了,所以你可以看到这些移动部件是如何组合在一起,而这在性能分析中是最重要。这可能是一个应用程序应用级别,也可能只适用于一个子系统。...另一个陷阱是,假设代码中代码对总体性能有足够影响,值得优化。过早优化全中。

68810

【软件开发规范七】《Android UI设计规范》

,6位(:#0470C4)就是RGB,值8位(:#1E000000)头两位是透明度,后6位是RGB值,00是完全透明,FF是完全不透明,比较适中透明度值是 1E。...z值(海拔高度)越高,元素离界面底层(水平面)越远,投影越重。这里有一个前提,所有的元素厚度都是1dp。...所有元素都有默认海拔高度,对它进行操作会抬升它海拔高度,操作结束后,它应该落回默认海拔高度。同一种元素,同样操作,抬升高度是一致。...编辑 ​编辑 Appbar 背景使用主色,状态栏背景使用深一主色或20%透明度纯黑 ​编辑 ​编辑 面积需要高亮显示地方使用辅助色。...除了输入,文本框可以进行其他任务操作,文本选择(剪切,复制,粘贴)以及数据自动查找功能。 ​

5K20

2023 年我建议创业公司选择 Flutter

Flutter 部件测试框架允许开发者编写出模拟用户交互测试流程,并借此验证应用程序行为是否正常。与其他工具包不同,您不需要借助第三方自动化测试工具包即可测试 Flutter UI。...谷歌、宝马、阿里巴巴、字节跳动、eBay、腾讯、丰田等企业巨头都是 Flutter 用户。这证明 Flutter 是一项成熟稳定技术,完全有能够支撑起大规模企业应用程序。...可定制 UI:Flutter 部件具备高度可定制性和灵活性,允许开发人员轻松构建起拥有惊人视觉效果应用程序。...大多数性能基准测试显示,当我们将 Flutter 与水平最为相近竞争对手 React Native 比较时,其在性能方面仍处于领先地位,Impeller 引擎也承诺提供更好渲染性能。...总 结 要想构建起高性能应用程序,选择正确技术堆栈无疑至关重要。

27720
领券