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

如何在SwiftUI中根据其子高度设置GeometryReader的高度?

在SwiftUI中,GeometryReader 是一个容器视图,它提供了一个闭包,该闭包可以访问其子视图的几何属性,如大小、位置等。要根据其子高度设置 GeometryReader 的高度,你可以使用 GeometryReaderframe 方法来获取子视图的尺寸,然后根据这些尺寸调整 GeometryReader 的大小。

以下是一个示例代码,展示了如何根据子视图的高度来设置 GeometryReader 的高度:

代码语言:txt
复制
import SwiftUI

struct ContentView: View {
    var body: some View {
        GeometryReader { geometry in
            VStack {
                Text("Hello, SwiftUI!")
                    .font(.largeTitle)
                    .frame(maxWidth: .infinity)
                    .background(Color.green)
                
                // 子视图
                CustomSubview()
                    .background(Color.blue)
                    // 将子视图的frame传递给GeometryReader的frame
                    .frame(height: geometry.size.height * 0.5)
            }
            // 根据子视图的高度调整GeometryReader的高度
            .frame(height: geometry.size.height * 0.5)
        }
    }
}

struct CustomSubview: View {
    var body: some View {
        Text("I'm a custom subview")
            .font(.title)
            .foregroundColor(.white)
    }
}

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

在这个例子中,CustomSubviewGeometryReader 的子视图。我们通过 .frame(height: geometry.size.height * 0.5) 来设置 CustomSubview 的高度为 GeometryReader 高度的一半。然后,我们再次使用 .frame(height: geometry.size.height * 0.5) 来设置整个 VStack(包含 CustomSubview)的高度,这样 GeometryReader 的高度就会根据子视图的高度进行调整。

请注意,这个例子假设你希望 CustomSubview 占据 GeometryReader 高度的一半。你可以根据实际需求调整比例。

如果你遇到的问题是 GeometryReader 的高度没有按照预期设置,可能是因为闭包中的 geometry 尚未更新,或者是因为布局尚未完成。确保在闭包中正确使用了 geometry.size 来获取尺寸,并且在布局完成后进行尺寸调整。

参考链接:

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

相关·内容

GeometryReader :好东西还是坏东西?

GeometryReaderSwiftUI 诞生之初就存在,它在许多场景扮演着重要角色。然而,从一开始就有开发者对持负面态度,认为应尽量避免使用。...官方文档“定义其内容( defines its content )”这一表述容易让人误以为 GeometryReader 主要功能是主动影响视图,或者说获取几何信息主要用于视图,但实际上,...获取 ScrollView 提供建议宽度,并根据这个宽度计算出所需高度。...父视图是否根据视图需求尺寸来放置视图,以及视图是否根据父视图给出建议尺寸来返回需求尺寸,完全取决于父视图和视图预设规则。...GeometryReader 常用于需要限定比例场景,例如让视图占据可用空间 25% 宽度,或者像上文中根据给定高宽比来计算高度

63070

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

SwiftUI ,有很多手段可以达成此目的。本文将介绍其中一些方法,并对每种方法背后实现原理、适用场景以及注意事项做以说明。...这是由于 HStack 高度是由容器视图对齐排列后高度决定。...Spacer 在 HStack 只能进行横向填充,并不具备纵向高度高度为 0 ),因此 HStack 最终需求高度与 Text 高度一致。...另外,由于 Color、Rectangle 会在两个维度进行填充( Spacer 会根据容器选择填充维度 ),因此,使用它们作为填充物时,将会自动使用全部可用空间( 包括高度 ),无需通过 .frame...万变不离宗,掌握了 SwiftUI 布局原理,无论需求如何变化都可轻松应对。

6.8K40
  • 掌握 ViewThatFits

    ViewThatFits 向视图查询理想尺寸(根据未指定建议尺寸返回需求尺寸)。 根据受限轴设置,在选择受限轴上,比较视图理想尺寸和 ViewThatFits 父视图给出建议尺寸。...如果在所有设置受限轴上,理想尺寸都小于等于建议尺寸,那么选择该视图,并停止对后续视图进行判断。 如果所有的视图都不满足条件,则选择闭包最后一个视图。...高度:VStack 将所有视图理想尺寸高度和 Spacing 和作为自己需求尺寸。...由于 ViewThatFits 能够提供高度只有 30,在 Text2 最终呈现时,它将根据默认显示规则对文字进行截断处理。...但是,与任何强大工具一样,能否发挥期作用来自于深入理解使用方式和限制。 在本文中,我们对 SwiftUI ViewThatFits 容器进行了深入探索。

    20310

    何在 SwiftUI 创建条形图

    前言 条形图以矩形条形式呈现数据类别,宽度和高度与它们表示值成比例。本文将展示如何创建一个垂直条形图,其中矩形高度将代表每个类别的值。...系列文章 如何在 SwiftUI 创建条形图 SwiftUI 水平条形图 在 iOS 16 中用 SwiftUI Charts 创建一个折线图 在 iOS16 中用 SwiftUI 图表定制一个线图...GeometryReader 被用来确定条形图可用高度。数据最大值得到后并传递给每个 BarView。...它需要每一条数据名称和值以及最大值和可用条形高度。每个条形图都表示为圆角矩形,条形高度相对于最大条形高度设置。条形颜色设置为纯蓝色。...SwiftUI 是一个很好平台,用于创建视图和快速重构独立视图。在 SwiftUI 构建条形图需要做一些工作,随着使用数据来试用条形图,可以确定更多定制化。

    5.2K10

    SwiftUI 布局 —— 尺寸( 上 )

    第二阶段 —— 安置子民 在该阶段,父视图将根据 SwiftUI 布局系统提供屏幕区域( 由第一阶段计算得出 )为视图设置渲染位置和尺寸( 上方 5-6 )。...这类视图主要作用有: 突破 ViewBuilder Block 数量限制 方便为一组视图统一设置 view modifier 有利于代码管理 其他特殊应用, ForEach 可支持动态数量视图等...,父视图会根据需求选择合适建议模式提供给视图。...),并为视图设置渲染尺寸。...,例如: 在 ZStack ,ZStack 为视图设置渲染尺寸与视图需求尺寸一致 在 VStack ,VStack 将根据其父视图提供建议尺寸、视图是否为可扩展视图、视图视图优先级等信息

    4.8K20

    SwiftUI水平条形图

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

    4.8K20

    掌握 SwiftUI Safe Area

    在 UIKit ,开发者需要利用 safeAreaInsets 或 safeAreaLayoutGuide ,才能确保将视图放置在界面可见部分。 SwiftUI 对上述过程进行了彻底简化。...本文将探讨如何在 SwiftUI 获取 SafeAreaInsets、将视图绘制到安全区域之外、修改视图安全区域等内容。...在 SwiftUI ,开发者通常只有在需要获取 StatusBar + NavBar 高度或 HomeIndeicator + TabBar 高度时才会使用到 safeAreaInsets 。...ignoresSafeArea 相较于 SwiftUI 1.0 提供 edgesIgnoringSafeArea 最大提升便是允许我们设置 SafeAreaRegions 。...safeAreaTabbarDemo1 我们只调整了安全区域, SwiftUI 会自动在不同设备上进行适配(在 iPhone 13 上,状态条高度为 40 + HomeIndeicator区域高度

    7.7K31

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

    如果结果小于 0,这意味着我们无法将下一个元素放入给定行,因此我们将 singleLineResult 附加到 allLinesResult ,将 singleLineResult 设置为仅由当前元素组成数组...,我们必须计算 VStack 高度,以使 SwiftUI 更容易解释我们视图组件。...VStack 高度根据两个值计算: 输入数据任何项目的高度(类似于宽度计算,通过使用 reduce 函数,总结与项目相关所有高度) 将显示在 VStack 行数 private func...此外,在 VStack 底部,我们设置一个 frame,其中宽度取自 GeometryReader高度则由先前创建函数计算。 现在 FlexiblePicker 已经完成,可以使用了!...然后,详细介绍了实现该选择器逻辑,包括如何处理选项布局、宽度和高度,以及如何处理用户与按钮交互。 最后,提供了一个简单视图实现,可以在 SwiftUI 中使用该选择器。

    29720

    SwiftUI 方式进行布局

    ScrollView 会使用父视图给定全部建议尺寸创建滚动区域,但在询问视图需求尺寸时只会提供理想尺寸。...这意味着,在 ScrollView 视图最好明确设定尺寸( 提出明确地需求尺寸 )。因此,在上面的代码,需要通过屏幕高度和视图一高度差来计算上方空白站位视图高度。...五、LayoutPriority 在 SwiftUI 设置视图优先级( 使用 layoutPriority )是一个好用但并不常用功能。...SwiftUI 在进行布局时,当布局容器给出建议尺寸无法满足全部视图需求尺寸时,会根据视图 Priority,优先满足级别较高视图布局需求。...视图二同理 六、再战 AlignmentGuide 在上面使用 AlignmentGuide 例子,我们通过 GeometryReader 获取了视图二高度信息,并通过设置显式对齐指南来完成了移动

    3.3K00

    SwiftUI 方式进行布局

    ScrollView 会使用父视图给定全部建议尺寸创建滚动区域,但在询问视图需求尺寸时只会提供理想尺寸。...这意味着,在 ScrollView 视图最好明确设定尺寸( 提出明确地需求尺寸 )。因此,在上面的代码,需要通过屏幕高度和视图一高度差来计算上方空白站位视图高度。...五、LayoutPriority 在 SwiftUI 设置视图优先级( 使用 layoutPriority )是一个好用但并不常用功能。...SwiftUI 在进行布局时,当布局容器给出建议尺寸无法满足全部视图需求尺寸时,会根据视图 Priority,优先满足级别较高视图布局需求。...视图二同理 六、再战 AlignmentGuide 在上面使用 AlignmentGuide 例子,我们通过 GeometryReader 获取了视图二高度信息,并通过设置显式对齐指南来完成了移动

    4.8K80

    SwiftUI 之 HStack 和 VStack 切换

    GeometryReader GeometryReader 能实现吗?...一种方式是用 GeometryReader 测量当前可用空间,并根据宽度是否大于高度,可以选择使用 HStack 或 VStack 来渲染内容。...为了观察当前水平方向尺寸,我们需要用到 SwiftUI 环境系统 — 通过在 DynamicStack 声明 @Environment - 标记属性(带有 horizontalSizeClass...使用布局协议 虽然我们最后已经用了非常棒解决方案,可以在所有支持 SwiftUI iOS 版本中使用,但也让我们来探索一下在 iOS 16 引入一些新布局工具(在写这篇文章时,它作为...Xcode 14 一部分仍在测试阶段) 其中一个工具是新 Layout 协议,它既能让我们创建完整自定义布局,直接集成到 SwiftUI 布局系统,同时也提供给我们一种更丝滑更动画方式在各种布局之间动态切换

    2.8K10

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

    TopLeadingTest1 根据从父视图 frame 接收到建议尺寸变化,根据默认布局形态(充满全部可用空间)改变了自身大小。...这是因为在 SwiftUI ,每个可动画视图根据 transaction 信息自行决定自身动画行为。...由此可见,geometryGroup() Group 含义为父视图统一处理并动画化几何属性变化后,再传递给视图。视图不再各自独立处理上述信息。...geometryGroup() 确保视图在统一几何信息环境,以实现预期布局效果。它为视图提供了一个连续几何信息更新过程。 总结上述条件后,我们就很容易创建出其它会导致意外行为代码。...在父视图几何信息发生变化时,不要同时在视图中创建新内容 如果一定要在变化时为视图增加新元素( 比如上面基于 GeometryReader 示例,可以将所需元素在父视图变化前便让存在,通过透明度来调整可见性

    28910

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

    阅读 SwiftUI 动画机制[8] 一文,了解更多有关动画内容。自适应高度 SheetQ:如何在 iOS16 呈现与动态内容高度相匹配 Sheet?...在 iOS 16 ,通过 presentationDetents 同 GeometryReader 配合,可以创建与内容高度一致 Sheet。此处查看 完整代码[9] 。...惰性容器视图,会根据是否出现在可视区域而反复调用 onAppear 和 onDisapper。但 onAppear 和 onDisappear 并非为视图存续期起点和终点。...事实上,这些视图( 惰性容器视图 )一旦被创建,存续期将持续到惰性容器被销毁为止。请阅读 SwiftUI 视图生命周期研究[12] 了解更多内容。...image-20221022135326560San Francisco 宽度风格Q:如何在 SwiftUI 如何使用 SF 字体家族新增三种宽度风格( Compressed、Condensed、Expanded

    12.3K20

    iOS_SwiftUI_iOS14_Widget

    ---- 3、Families 新增family参数,可以根据不同family返回不同view: struct MOWidgetEntryView : View { var entry: Provider.Entry...{ MONumberView(data: data) } 注:但是.systemSmall family 不能单独设置视图Link: ---- 5、Configuration(SiriKit...在开发者账号官网开启App Group功能,并设置ID; Xcode主app和widget target -> Signing & Capabilities 添加App Groups,并输入...(SwiftUI比OCUI方便多了~) 8.1、Preview UI调试必备Canvas,打开方式: 用到了PreviewProvider,可以设置显示family、device、等等: struct...没接触过,这里推荐两个快速上手视频:【十五分钟搞懂SwiftUI】布局篇、【十五分钟搞懂SwiftUI】样式篇 8.3、尺寸适配 各个屏幕尺寸上widgetsize: 8.3.1、利用GeometryReader

    2.4K20

    深入了解 SwiftUI 5 ScrollView 新功能

    将可滚动容器内所有视图视为一个整体,并为添加 margin。之前在 List 或 TextEditor 实现类似操作是十分困难。...在某些场景下,效果与 safeAreaInset 十分相似。例如,在下面的代码,为 ScrollView leading 方向添加安全区域两种方式效果是一致。...应将此修饰符应用于 ScrollView 包含主要重复内容布局容器, LazyHStack 或 VStack。...(视图标识) 不支持锚点设定,固定锚点为视图 center 正如 优化在 SwiftUI List 显示大数据集响应效率[6] 一文所提到,当数据集很大时,也会出现性能问题。...scrollTargetBehavior scrollTargetBehavior 用于设置 ScrollView 滚动行为:分页还是与视图对齐。

    83520

    SwiftUI 布局工作原理

    在此过程,您还将学习如何创建更高级布局对齐,使用GeometryReader构建特殊效果,以及更多——我知道您会热衷于在自己应用程序中部署一些真正强大功能。...SwiftUI 布局工作原理 ---- 所有的 SwiftUI 布局都有三个简单步骤,理解这些步骤是每次获得优秀布局关键。步骤如下: 父视图提供一个大小并询问视图大小。...视图根据自己信息,它会选择自己尺寸,而父视图必须尊重这个选择。 然后父视图在其坐标空间中定位子视图。...background(Color.red)),文本视图成为背景视图。当涉及到视图及其修改器时,SwiftUI有效地从下到上工作。....padding(20) .background(Color.red) 这一次对话更为复杂:padding()不再为级提供所有空间,因为它需要从每边减去20点,以确保有足够空间填充。

    3.8K20

    何在 SwiftUI 视图中显示应用图标和版本

    前言在应用显示应用图标和版本是为用户提供快速识别应用版本和变体好方法,无论是内部用户(测试人员或利益相关者)还是外部用户。...在本文中,我将展示如何创建一个可访问 SwiftUI 视图,既能显示应用图标和版本,又能在各种文本大小和外观下看起来都很好:获取应用图标构建视图第一步是从主包获取应用图标。...可以通过检索应用 Info.plist 文件一组键值来完成, Stack Overflow 上这个答案所示:AppIconProvider.swiftimport Foundationenum...我们使用 fixedSize() 修饰符确保应用图标和 VStack 视图高度相同。最后,我们将所有视图组合成一个可访问元素,并为提供标签,以便为 VoiceOver 用户提供更好体验。...我们学习了如何在 SwiftUI 应用显示应用图标和版本信息。

    17522
    领券