文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

掌握 SwiftUI 的 Safe Area

在 UIKit 中，开发者需要利用 safeAreaInsets 或 safeAreaLayoutGuide ，才能确保将视图放置在界面中的可见部分。 SwiftUI 对上述过程进行了彻底的简化。...如果一个视图可以完整地放置在父视图的安全区域中，该视图的 safeAreaInsets 为 0。当视图尚未在屏幕上可见时，该视图的 safeAreaInset 也为 0 。...在 SwiftUI 中，开发者通常只有在需要获取 StatusBar + NavBar 的高度或 HomeIndeicator + TabBar 的高度时才会使用到 safeAreaInsets 。...从 iOS 14 开始，SwiftUI 计算视图的安全区域时，将软键盘在屏幕上的覆盖区域（iPadOS 下，将软键盘缩小后键盘的覆盖区域将被忽略）也一并进行考虑。...尽管使用 safeAreaInset 为列表在底部添加状态栏或自定义 TabBar 非常方便，但如果你的列表中使用了 TextField，情况将变得很麻烦。

9.8K31

SwiftUI 布局 —— 尺寸（ 上 ）

） SwiftUI 的布局系统将 ZStack 放置在了 152.33, 418.33 处，并为其提供了渲染尺寸（ 85.33 x 20.33 ） ZStack 将 Text 放置在了 152.33,...第二阶段 —— 安置子民 在该阶段，父视图将根据 SwiftUI 布局系统提供的屏幕区域（ 由第一阶段计算得出 ）为子视图设置渲染的位置和尺寸（ 上方的 5-6 ）。...某些布局容器（比如 VStack、HStack ），会通过为其子视图代理提供最小化模式的建议尺寸以获取子视图在特定维度下的最小需求尺寸（ 例如对视图使用了 minWidth 设定 ） 最大化模式 该模式的建议尺寸为...，例如： 在 ZStack 中，ZStack 为子视图设置的渲染尺寸与子视图的需求尺寸一致 在 VStack 中，VStack 将根据其父视图提供的建议尺寸、子视图是否为可扩展视图、子视图的视图优先级等信息...x 50 作为需求尺寸返回给父视图 fixedSize() 为子视图提供未指定模式的建议尺寸 frame(minWidth: 100, maxWidth: 300) 将子视图的需求尺寸控制在指定的范围中

5.9K20
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    SwiftUI 布局 —— 尺寸（ 下 ）

    本篇中，我们将通过对视图修饰器 frame 和 offset 的仿制进一步加深对 SwiftUI 布局机制的理解，并通过一些示例展示在布局时需要注意的问题。...可在 此处获取[4] 本文的仿制代码 frame SwiftUI 中有两个版本的 frame，本节我们将仿制 frame(width: CGFloat?...当 min 或（ 和 ） max 有值时，会按如下规则返回 _FlexFrameLayout 的在该维度上的需求尺寸（ 下图来自于 SwiftUI-Lab[6] ） frame-flow-chart...，获取子视图在宽度上的需求尺寸 // idealWidth 有值，且父视图在宽度上的建议尺寸为未指定模式，需求宽度为 idealWidth if let idealWidth, proposal.width...contentWidth) } else if let minWidth { // min 有值时，确保需求尺寸不小于最小值 resultWidth = clamp(min: minWidth

    3.3K40

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

    前言 最近，在我正在开发一个在 Dribbble 上找到的设计的 SwiftUI 实现时，我想到了一个点子，可以通过一些酷炫的筛选器扩展该项目以缩小结果列表。...在使用 UIKit 时，我总是将这种类型的视图实现为具有特定 UICollectionViewFlowLayout 的 UICollectionView。但在 SwiftUI 中该如何实现呢？...我通过将所有输入值映射到元组中，其中包含输入值和自身的宽度来完成。 在映射中，我使用 reduce 函数来总结与给定输入值相关联的所有宽度（文本宽度、边框宽度、文本填充和间距）。...如果结果小于 0，这意味着我们无法将下一个元素放入给定行中，因此我们将 singleLineResult 附加到 allLinesResult 中，将 singleLineResult 设置为仅由当前元素组成的数组...VStack 的高度是根据两个值计算的： 输入数据中任何项目的高度（类似于宽度的计算，通过使用 reduce 函数，总结与项目相关的所有高度） 将显示在 VStack 中的行数 private func

    2.5K20

    SwiftUI + Core Data App 的内存占用优化之旅

    : .zero, maxWidth: .infinity) } } 生成数据后，运行后显示的状态如下： 图片 Add 100 按钮将创建 100 条记录， 记录数 为当前的数据条数，内存占用 为当前...在本例中，子视图的 body 值中一定会包含用于显示的图片数据，因此，即使该视图已经被显示过（ 滚动出显示区域 ），该视图的 body 值仍将占用不小的内存。...在开发者通过创建一个 Request （ NSFetchRequest ）从数据库中获取查询结果时，除非特别将 Request 的 returnsObjectsAsFaults 属性设置为 false...中 在视图显示该 Image onAppear 闭包运行结束时，Picture 对象将自动被释放 在 onDisapper 中清除 Source of truth 中的内容（ 设置为 nil ） 按照预想...即使我们在 onDisappear 中将该变量设置为 nil，但 SwiftUI 并没有释放之前它所占用的空间。

    3.5K40

    SwiftUI + Core Data App 的内存占用优化之旅

    当子视图进入惰性容器的可视区域时，SwiftUI 会调用它的 onAppear 闭包，子视图退出可视区域时，会调用 onDisappear 闭包。...在本例中，子视图的 body 值中一定会包含用于显示的图片数据，因此，即使该视图已经被显示过（ 滚动出显示区域 ），该视图的 body 值仍将占用不小的内存。...在开发者通过创建一个 Request （ NSFetchRequest ）从数据库中获取查询结果时，除非特别将 Request 的 returnsObjectsAsFaults 属性设置为 false...中 在视图显示该 Image onAppear 闭包运行结束时，Picture 对象将自动被释放 在 onDisapper 中清除 Source of truth 中的内容（ 设置为 nil ） 按照预想...即使我们在 onDisappear 中将该变量设置为 nil，但 SwiftUI 并没有释放之前它所占用的空间。

    2.6K10

    如何在 SwiftUI 中创建条形图

    系列文章 如何在 SwiftUI 中创建条形图 SwiftUI 中的水平条形图 在 iOS 16 中用 SwiftUI Charts 创建一个折线图 在 iOS16 中用 SwiftUI 图表定制一个线图...很容易将部分内容提取到子视图中，以便每个部分都很小且易于维护。从将包含 BarChartView 以及可能的其他文本或数据的视图开始。...这个 BarChartView 包含一个标题和一个图表区，它们由文本和圆角矩形表示。...文本视图的宽度被限制在条形图宽度的范围内，而且条形图的标签文本会被截断，条形图的文本视图也被限制在条形宽度的范围内，并且文本可以被隐藏起来。...图标被设置为固定大小，视图被嵌入到 ScrollView 中，以便在设备旋转时滚动。

    8.3K10

    用 Table 在 SwiftUI 下创建表格

    欢迎大家在 Discord 频道[2] 中进行更多地交流 Table 是 SwiftUI 3.0 中为 macOS 平台提供的表格控件，开发者通过它可以快捷地创建可交互的多列表格。...样式 SwiftUI 为 Table 提供了几种样式选择，遗憾的是目前只有 .inset 可以用于 iPadOS 。...TableColumn("货币代码"){ Text($0.currencyCode) } // 不启用以该属性为依据的排序 // 切勿在不绑定排序变量时，使用如下的写法。....red : .green) } 目前的测试版 14A5228q ，当属性类型为 Bool 时，在该列上启用排序会导致应用无法编译 尽管在点击可排序列标题后，仅有一个列标题显示了排序方向，但事实上 Table...出现上述问题的主要原因是，苹果没有采用其他 SwiftUI 控件常用的编写方式（ 原生的 SwiftUI 容器或包装 UIKit 控件），开创性地使用了 result builder 为 Table 编写了自己的

    5.3K31

    SwiftUI 布局 —— 对齐

    比如将书桌上的一摞书摆放整齐，列队训练时向左（右）看齐等等。在 SwiftUI 中，对齐是指在布局容器中，将多个视图按照对齐指南（ Alignment Guide ）进行对齐。...和 HStack 相对于 ZStack 在布局时将更加复杂。...由于需要考虑在特定维度上可动态调整尺寸的子视图，比如：Spacer 、Text 、frame(minWidth:maxWidth:minHeight:maxHeight) 等，VStack 和 HStack...总之，为 VStack、HStack、ZStack 这类可包含多个子视图的官方布局容器设置 alignment 的含义就只有一种 —— 在特定维度上，将所有的子视图按照给定的对齐指南进行对齐摆放。...虽然 FrameLayout 中只包含一个子视图，但在布局时它会让子视图与一个特定尺寸的虚拟视图进行对齐。

    7.3K20

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

    即使文本宽度超出了 HStack 给出的建议宽度，但 HStack 在布局时，仍会保留其最小厚度，导致下图上方的文本无法充分利用矩形视图的宽度。解决方法为：Spacer(minLength: 0)。...因此，当我们将合成后的 hello world 视图放置在 VStack 顶部时（ 通过 Spacer ），矩形的 background 会连同顶部的安全区域一并渲染。...为布局容器设置明确的 spacing 是一个好习惯，在未明确指定时，HStack、VStack 在进行布局时可能会出现某些异常。下文中也会碰到此种情况。...，当文本较长时，会超过 Color 的宽度}上方代码的布局逻辑是：Color 的尺寸为 300 x 60 ( 不关心 ZStack 给出的建议尺寸 )ZStack 的尺寸为 Color 和 Text 两者的最大宽度...x 最大高度，该尺寸是一个可变尺寸（ 取决于 Text 文本的长度 ）当 ZStack 给出的建议宽度大于 300 时，Text 的可利用宽度将超过 Color 的宽度因此会出现两种可能的错误状态：当文本较长时

    10.2K40

    SwiftUI-自定义与扩展

    介绍 在SwiftUI中，尽管Apple提供了大量现成的UI组件和样式，但在实际开发中，我们经常需要进行更灵活的控制和个性化设计。...本文将通过多个示例，介绍SwiftUI中几种常见的自定义方式，包括样式（Style）、视图修改器（ViewModifier）、自定义视图（Custom View）与视图扩展（View Extension...自定义Style SwiftUI中的Style协议（例如LabelStyle、ButtonStyle、ToggleStyle等）允许我们为组件定义全新的外观表现方式。...: Configuration) -> some View { // 垂直排列，图片在上，文本在下 VStack { configuration.icon...它可以像“视图的装饰器”一样，在不改变原始视图定义的前提下，为其添加边框、阴影、背景、圆角等效果。通过组合使用多个ViewModifier，我们可以实现复杂且整洁的界面设计。

    51010

    WWDC - SwiftUI - 初恋般的感觉

    我们将使用SwiftUI框架来构建Landmark详情界面。 Landmarks利用stacks将图片和文本组合起来来进行视图布局。你需要引用MapKit框架头文件来创建一个地图视图。...代码并不会关心你用什么工具，它始终能够保持最新状态 接下来，你将通过inspector来自定义Text View 第一步 在preview画布上，按住Command键+点按Text文本框，这时候inspector...选择Embed in VStack。 ? 第二步 接下来，我们将拖拽一个text view到stack中。 点击+号，打开Library面板。...第七步 在location后面添加一个新的文本框，修改文本框文案并设置字体 import SwiftUI struct ContentView: View { var body: some View...在SwiftUI中要使用UIView或者其子类，你需要让你的view遵循UIViewRepresentable协议。SwiftUI在WatchKit和AppKit同样声明了类似的协议 ?

    4.9K10

    SwiftUI 之 HStack 和 VStack 的切换

    举个例子，假如我们正在构建一个 app 其中包含 LoginActionsView ，一个让用户登录时在列表中选择操作的类： struct LoginActionsView: View { .....使用布局协议 虽然我们最后已经用了非常棒的解决方案，可以在所有支持 SwiftUI 的 iOS 版本中使用，但也让我们来探索一下在 iOS 16 中引入的一些新的布局工具（在写这篇文章时，它作为...的内容类型是 EmptyView 时，它们都符合新的 Layout 协议（当内容为空时就是这种情况），让我们来看一下SwiftUI 的 公共接口 struct DynamicStack时，我们也有可能在执行此类更改时获得小幅的性能提升（因为 SwiftUI 总是在其视图层次结构为静态时尽可能表现最佳） 选择合适的视图 但我们还没有结束，因为...同样重要的是要指出，上述基于 ViewThatFits 的技术将会始终尝试 HStack ，即使在用紧凑尺寸渲染布局时也是如此，只有在 HStack 不适合时才会选择基于VStack 的布局。

    3.9K10

    SwiftUI 布局：如何自定义 AlignmentGuides

    SwiftUI 为我们提供了视图不同边缘的对齐指南（.leading、trailing、top等）以及.center和两个基线选项来帮助文本对齐。...然而，当您处理在不同视图之间分割的视图时，这些方法都不能很好地工作——如果您必须使在用户界面完全不同的两个视图部分对齐。...当我说“自定义类型”时，您可能会想到一个结构体，但实际上，将其作为枚举来实现是一个好主意，我将很快解释。...例如，我们可以将 Twitter 代码更新为use.midAccountAndName，然后告诉帐户和名称使用其中心位置作为指南。...我建议您尝试在我们的示例前后添加更多的文本视图 –SwiftUI 将重新定位所有内容，以确保我们对齐的两个视图保持不变。

    1.4K10

    一段因 @State 注入机制所产生的“灵异代码”

    等则会在 body 求值时调用（ 可以理解为创建实例 ），但只有在需要显示时才进行求值这就是说，即使我们在 Sheet 代码块的 Text 中添加了对 n 的引用，但只要模态视图尚未显示，则 n 的...在 ContextView 不包含 Text 的情况下，在 Sheet 显示后，n 的 _wasRead 将转变为 true（ Sheet 视图显示后，方创建关联 ）。...在 SwiftUI 早期的版本中，对于分别位于不同上下文的独立的视图树，开发者需要显式为 Sheet 视图树注入环境依赖。后期版本已为开发者自动完成该注入工作。...Sheet 视图在求值时，将通过 Binding 的 get 方法，获得 n 的最新值。...在面对这些“灵异现象”时，如果我们能对其进行更多的研究，那么不仅可以在今后避免类似的问题，而且在分析的过程中，也能对 SwiftUI 的各种运行机制有深入的掌握。希望本文能够对你有所帮助。

    2.8K20

    避免 SwiftUI 视图的重复计算

    如果视图响应了不该响应的状态，或者视图的状态中包含了不该包含的成员，都可能造成 SwiftUI 对该视图进行不必要的更新（ 重复计算 ），当类似情况集中出现，将直接影响应用的交互响应，并产生卡顿的状况。...通过 _makeProperty 方法，SwiftUI 得以实现在将视图加载到视图树时，把所需的数据（ 值、方法、引用等 ）保存在 SwiftUI 的托管数据池中，并在属性图（ AttributeGraph...当 SwiftUI 将视图加载到视图树时，通过调用 _makeProperty 完成将数据保存到托管数据池以及在属性图中创建关联的操作，并将数据在托管数据池中的引用保存在 _location （ AnyLocation...当 SwiftUI 将视图从视图树上删除时，会一并完成对 SwiftUI 数据池以及关联的清理工作。如此，使用 State 包装的变量，其存续期将与视图的存续期保持完全一致。...因此，为了减少因事件源导致的重复计算，我们可以考虑采用如下的优化思路： 控制生命周期 只在需要处理事件时才加载与其关联的视图，用关联视图的存续期来控制触发器的生命周期 减小影响范围 为触发器创建单独的视图

    11.1K81
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券