开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

SwiftUI ForEach垂直分隔符布局奇怪

是一个关于SwiftUI中使用ForEach循环创建视图时，垂直分隔符布局出现异常的问题。

在SwiftUI中，使用ForEach可以方便地循环创建视图。然而，当在ForEach循环中使用垂直分隔符时，有时会出现布局异常的情况，即分隔符的位置不正确或者无法正确显示。

这个问题可能是由于SwiftUI的布局算法导致的，具体原因可能与视图的大小、约束、内容等因素有关。为了解决这个问题，可以尝试以下几种方法：

使用GeometryReader：可以在ForEach循环中使用GeometryReader来获取父视图的大小，并根据需要进行布局调整。例如，可以使用GeometryReader的frame方法来设置分隔符的大小和位置。
使用Divider视图：可以尝试使用Divider视图代替垂直分隔符。Divider是SwiftUI提供的一个专门用于创建分隔线的视图，可以在ForEach循环中使用Divider来实现垂直分隔效果。
自定义分隔符视图：如果以上方法无法满足需求，可以考虑自定义分隔符视图。可以创建一个自定义的视图，用于实现垂直分隔符的效果，并在ForEach循环中使用该视图。

总结起来，SwiftUI ForEach垂直分隔符布局奇怪的问题可以通过使用GeometryReader、Divider视图或自定义分隔符视图来解决。具体的解决方法需要根据实际情况进行调整和尝试。

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

腾讯云开发者平台：https://cloud.tencent.com/developer
腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
腾讯云云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
腾讯云数据库（TencentDB）：https://cloud.tencent.com/product/cdb
腾讯云人工智能（AI）：https://cloud.tencent.com/product/ai
腾讯云物联网（IoT）：https://cloud.tencent.com/product/iot
腾讯云移动开发（移动推送）：https://cloud.tencent.com/product/umeng
腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
腾讯云区块链（BCS）：https://cloud.tencent.com/product/bcs
腾讯云元宇宙（Tencent XR）：https://cloud.tencent.com/product/xr

相关搜索:SwiftUI ScrollView奇怪的垂直拉伸 SwiftUI:在SwiftUI中使用分隔符垂直对齐动态调整大小的矩形 SwiftUI嵌套ForEach导致致命错误:每个布局项目只能出现一次如何在SwiftUI中允许ForEach布局项显示来自数组的重复项？水平(或在网格中)而不是垂直地布局多个SwiftUI预览？如何向WINPE添加卷影复制服务 Java SQL，一般错误org.hsqldb.HsqlException Group by列并具有包含value_counts字典的列获取给定Jenkins工作节点上的运行构建状态我们可以在Altair中绘制图像数据吗？

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

SwiftUI中的水平条形图

SwiftUI中的水平条形图水平条形图以矩形条的形式呈现数据类别，其宽度与它们所代表的数值成正比。本文展示了如何在垂直条形图的基础上创建一个水平柱状图。水平条形图不是简单的垂直条形图的旋转。...Bar Chart with multiple data sets in SwiftUI SwiftUI 中的水平条形图将条形图转换为水平水平条形图不仅仅是在垂直条形图上的配置，有一些元素是可以重复使用的...对于垂直条形图组件和水平条形图组件来说，重复使用一些结构和SwiftUI视图并不简单。标题和关键区域可以原样重用。创建BarChartView的副本，并将其名称改为BarChartHView。...它控制了图表的布局，其中的三个视图被改为YaxisHView、ChartAreaHView和XaxisHView，它们最初只是垂直条形图中使用的视图的副本。...显示和隐藏水平条形图上的元素结论创建水平条形图的SwiftUI代码与创建垂直条形图的代码不同。在创建垂直条形图时学到的技术可以重复使用，但最好将水平条形图视为与垂直条形图不同的图表。

4.7K2 0

SwiftUI 布局协议 - Part2

简单的说，通过添加 animatableData 属性到我们的布局，我们要求 SwiftUI 动画的每一帧重新计算布局。但是，在每个布局传递中，角度都会收到一个内插值。...剩下的视图将会在中间，垂直排列。我们不需要编写垂直或者水平的间距逻辑代码，因为 SwiftUI 已经有这样的布局了：HStackLayout 和 VStackLayout。...此外，在与其他视图布局工作的时候，我们就相当于 SwiftUI 的角色。子布局的任何缓存创建和更新都属于我们的责任，幸运的是，这都很容易处理。我们只需要添加子布局缓存到我们自己的缓存里。...同时也要注意，这里有一个好的选择，即放置到具有垂直和水平的滚动 ScrollView 中。注意这是基本实现，仅用于说明如何实现。还有许多潜在的优化，但制作树布局所需的关键元素都在这里。...终于能看到数字是不是有一种奇怪的满足感？总结即使你不打算写你自己的布局容器，明白它是如何工作也会帮助你理解布局在 SwiftUI 的一般工作方式。

2.7K3 0

SwiftUI 中的内容边距

前言SwiftUI 引入了一组视图修饰符，使我们能够有效地管理视图中的安全区域。在许多情况下，安全区域是你希望放置内容的地方。...在 iPhone 上可能看起来很好，但是在 iPad 上，它看起来非常奇怪，因为它将所有文本放在了前导边缘，并保持屏幕中央为空白。...在使用 UIKit 时，我们可以访问 readableContentGuide 布局指南。从字面上看，它是另一个安全区域，适应屏幕大小，但仅适用于文本内容。...不幸的是，我们在 SwiftUI 中无法访问 readableContentGuide。...随后，通过介绍 UIKit 中的 readableContentGuide 布局指南以及 SwiftUI 中的 safeAreaPadding 视图修饰符，展示了在 iPad 上适配内容边距的方法。

210 0

如何让 SwiftUI 的列表变得更加灵活

前言 List 可能是 SwiftUI 附带的内置视图中最常用的一种，它使我们能够在任何 Apple 平台上呈现“类似于表格视图”的用户界面。...为了演示这种情况，我们在 List 中嵌套一个 ForEach （因为在 SwiftUI 的中，列表变化一版都是由 ForEach 触发的，而不是由 List 触发的）。...由于每个 article 值在 ForEach 闭包中都是可变的，我们可以使用新的 swipeActions 修饰符来实现每个 NavigationLink 项目视图的自定义滑动操作。...可定制的分隔符 自从引入 SwiftUI 以来，开发者们有一个非常普遍的要求，提供一个 API ，用于隐藏或以其他自定义实现列表中每个 item 之间的默认分隔符。...还有另外一个 API 用于控制部分分隔符的外观颜色，可以使用自定义颜色为分隔符设置颜色——代码如下： struct ArticleList: View { @ObservedObject var

4.8K4 1

掌握 ViewThatFits

在 iOS 16 中，SwiftUI 增加了一个新的自适应布局容器 ViewThatFits。正如其名称所示，它的作用是在给定的多个视图中找出最合适的视图并使用。...唯一有些奇怪的是 VStack： VStack { Text("GeometryReader has been present since the birth of SwiftUI, playing...SwiftUI 提供了两个版本的 fixedSize ，我们当前使用的版本要求视图在水平和垂直两个轴向上都使用理想尺寸，而另一个版本允许我们对单个轴向进行限定。...在本文中，我们对 SwiftUI 中的 ViewThatFits 容器进行了深入的探索。从基本定义到复杂的布局机制，我们试图揭示这个强大工具背后的逻辑和潜力。...希望这篇文章能为你在使用 SwiftUI 进行布局设计时提供有价值的见解。如果你觉得这篇文章对你有所帮助，欢迎点赞、赞赏，并将其转发给更多的朋友。

1571 0

用 SwiftUI 的方式进行布局

最近时常有朋友反映，尽管 SwiftUI 的布局系统学习门槛很低，但当真正面对要求较高的设计需求时，好像又无从下手。SwiftUI 真的具备创建复杂用户界面的能力吗？...本文将通过用多种手段完成同一需求的方式，展示 SwiftUI 布局系统的强大与灵活，并通过这些示例让开发者对 SwiftUI 的布局逻辑有更多的认识和理解。...下文中，我们将用 SwiftUI 布局系统提供的多种手段来实现该要求。在这些解决方案中，有些非常简单、直接，有些则会略显烦琐，曲折。我尽量让每种方案都采用不同的布局逻辑。...SwiftUI 在进行布局时，当布局容器给出的建议尺寸无法满足全部子视图的需求尺寸时，会根据子视图的 Priority，优先满足级别较高的视图的布局需求。...SwiftUI 为我们提供了众多的布局手段，只有充分地理解并掌握它们，方可从容应对复杂的布局需求。希望本文能够对你有所帮助。

3.2K0 0

用 SwiftUI 的方式进行布局

最近时常有朋友反映，尽管 SwiftUI 的布局系统学习门槛很低，但当真正面对要求较高的设计需求时，好像又无从下手。SwiftUI 真的具备创建复杂用户界面的能力吗？...本文将通过用多种手段完成同一需求的方式，展示 SwiftUI 布局系统的强大与灵活，并通过这些示例让开发者对 SwiftUI 的布局逻辑有更多的认识和理解。可在此处获取本文代码。...有关这方面的内容，请参阅 SwiftUI 布局 —— 尺寸（下）一文中“面子和里子”章节。...SwiftUI 在进行布局时，当布局容器给出的建议尺寸无法满足全部子视图的需求尺寸时，会根据子视图的 Priority，优先满足级别较高的视图的布局需求。...SwiftUI 为我们提供了众多的布局手段，只有充分地理解并掌握它们，方可从容应对复杂的布局需求。希望本文能够对你有所帮助。

4.7K8 0

使用 SwiftUI 的 Eager Grids

我只会称它们为“有布局的容器”和“没有布局的容器”。...此外，Group 视图本身没有提供任何布局，也没有任何自己的几何图形。所有布局都由其父级执行：HStack。...当没有布局容器存在时，SwiftUI 会隐式使用 VStack。...请注意，在这种情况下，对齐方式只是垂直的。此行中的单元格将结合 Grid 参数和 GridRow 参数。行的垂直对齐将优先于对齐的网格垂直组件。...这种类型的单元格的常见用途是创建分隔符。例如，您可以使用 Divider() 视图，或者更复杂的视图，如下例所示。请注意，我们通常不希望分隔线使网格增长到最大值，因此我们使视图在水平轴上未调整大小。

4.3K2 0

深入了解 SwiftUI 5 中 ScrollView 的新功能

在 SwiftUI 5.0 中，苹果大幅强化了 ScrollView 功能。新增了大量新颖、完善的 API。本文将对这些新功能进行介绍，希望能够让它们更多、更早的帮助到有需要的开发者。...应将此修饰符应用于 ScrollView 中包含主要重复内容的布局容器，如 LazyHStack 或 VStack。...可采用优化在 SwiftUI List 中显示大数据集的响应效率[5] 一文中介绍的方式来解决。 scrollPostion(id:) 使用此修饰符可以让滚动视图滚动到特定的位置。...滚动停止时，容器顶端将与子视图的顶部对齐（在垂直模式下）。开发者可以通过控制 scrollTargetLayout 的启用与否来开关 viewAligned 的行为。...视图滑出滚动容器的可见区域 scrollTransition 的 transition 闭包要求你返回一个符合 VisualEffect[7] 协议的类型（VisualEffect协议定义了一种不影响视图布局的效果类型

6772 0

SwiftUI案例：3D旋转图片播放器

SwiftUI案例：3D旋转图片播放器效果目标实现多张图片的3D切换查看功能外观配置任选 7 张任意尺寸的图片按 p1 至 p7 进行命名并拖拽进 Assets.xcassets 文件中（如图所示...并在其中依次创建 Home.swift CarouseBodyView.swift ScrollViewOffsetModifier.swift 视图文件，其功能如下： Home.swift：主视图，用来控制文字布局与图片布局...import SwiftUI struct Home: View { //定义当前的图片 @State var currentTab = "p1" var body: some View...CarouseBodyView控件将图片信息返回给currentTab变量 TabView(selection: $currentTab) { ForEach...size.height / 1.2, alignment: .center) .cornerRadius(12) //圆角 //嵌套VStack（垂直排列子元素的视图

2.3K3 0

SwiftUI 之 HStack 和 VStack 的切换

前言 SwiftUI 的各种堆栈是许多框架中最基本的布局工具，能够让我们定义组视图，这些组视图可以按照水平、垂直或覆盖视图对齐。...想了解更多信息，可以查看我的文章 - SwiftUI 布局系统第三章目前，我们的按钮是垂直排列的，并且填满了水平线上的可用空间（你可以用以上示例代码预览按钮的样子），虽然这在竖向的 iPhone 上看起来很好...（例如在大尺寸的 iPhone 使用横屏，或者全屏 iPad 上的任一方向），而其它所有尺寸的配置使用垂直布局。...所有这些仍然使用紧凑垂直布局，它使用的空间不超过渲染其内容所需的空间。...Xcode 14 的一部分仍在测试阶段）其中一个工具是新的 Layout 协议，它既能让我们创建完整的自定义布局，直接集成到 SwiftUI 的布局系统中，同时也提供给我们一种更丝滑更动画的方式在各种布局之间动态切换

2.8K1 0

Ask Apple 2022 与 SwiftUI 有关的问答（下）

var todos: IdentifiedArrayOf = [] ...}// 可以用类似字典的方式对元素进行操作，快速定位，同时在更新 IdentifiedArray 时，也不容易引发 ForEach...在 SwiftUI 布局 —— 尺寸（上）[8] 一文中，对建议尺寸的几种模式都进行了介绍。如何减少主线程的负担Q：如何避免所有操作都被放置在主线上？...然后，您可以使用垂直或水平堆栈布局来组合它，这样您就不需要自己完成所有的实现工作。Jane 的自动根据宽度排版[10] 视频与该问题十分契合。...阅读 The SwiftUI Layout Protocol [11]了解如何创建自定义布局。创建从底部开始的滚动视图Q：我如何实现一个在底部对齐的滚动视图，在 macOS 上会不会有糟糕的性能？...这是一个在多个版本中都出现过的奇怪问题。在 SwiftUI 早期版本中，当在 iOS 中使用系统中文输入法时，很容易触发这种情况。但后期逐步得到了修复。

14.7K3 0

onAppear 的调用时机

布局在计算好当前需要显示的视图所有的视图值后，SwiftUI 将进入到布局阶段。通过父视图向子视图提供建议尺寸，子视图返回需求尺寸这一过程，最终计算出完整的布局结果。...有关布局的流程请阅读 SwiftUI 布局 —— 尺寸[5] 渲染 SwiftUI 通过调用更加底层的 API，将视图在屏幕上呈现的过程。此过程严格意义上已经不属于 SwiftUI 的管理范畴了。...在 4.0 中版本中，SwiftUI 提供了 Layout 协议，允许我们创建自定义布局容器，通过创建符合该协议的实例，我们便可以判断当前视图是否正处于布局阶段。...newWords.isEmpty { Text(getWord(at:0)) } 第二段代码对 List 进行求值由于 ForEach 会根据 newWords 的数量进行子视图的处理，因此尽管此时...重复上面的过程，此时 newWords 已经有值了，ForEach 将正常处理所有的子视图总结在本文中，我们通过 SwiftUI 4 提供的新工具明确了 onAppear 的调用时机，或许这是新

1.1K1 0

onAppear 的调用时机

布局在计算好当前需要显示的视图所有的视图值后，SwiftUI 将进入到布局阶段。通过父视图向子视图提供建议尺寸，子视图返回需求尺寸这一过程，最终计算出完整的布局结果。...有关布局的流程请阅读 SwiftUI 布局 —— 尺寸渲染SwiftUI 通过调用更加底层的 API，将视图在屏幕上呈现的过程。此过程严格意义上已经不属于 SwiftUI 的管理范畴了。...4.0 中版本中，SwiftUI 提供了 Layout 协议，允许我们创建自定义布局容器，通过创建符合该协议的实例，我们便可以判断当前视图是否正处于布局阶段。...newWords.isEmpty { Text(getWord(at:0))}第二段代码对 List 进行求值由于 ForEach 会根据 newWords 的数量进行子视图的处理，因此尽管此时...，此时 newWords 已经有值了，ForEach 将正常处理所有的子视图总结在本文中，我们通过 SwiftUI 4 提供的新工具明确了 onAppear 的调用时机，或许这是新 API 开发时未曾想到的功能应用

2K2 0

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

当 SwiftUI 在 overlay 中布局黄色圆形时（topLeading），此时红色矩形的尺寸（尽管仍在以动画的形式逐渐扩大）已经是调整后的 300 x 300。...上述每个过程的执行都严格且完美地遵循了 SwiftUI 的布局和动画规则。唯一让我们不满意的是，在创建黄色圆形时（布局它的位置时），它被放置在放大后的红色矩形的 topLeading 位置上。...这让黄色圆形能够获得正确的布局位置。...它不仅提供了对动画和布局的精细控制，而且确保了视图之间的一致性和流畅性。在实际开发中，尤其是面对复杂动画和布局的场景时，理解并正确使用 geometryGroup() 是至关重要的。...geometryGroup() 为我们提供了一个避免在个别情况下出现布局异常的能力。这是 SwiftUI 开发团队在完成了基本的布局功能后，腾出精力，进一步改善细节的一个表现。

2521 0

GeometryReader ：好东西还是坏东西？

本章节包含了许多关于 SwiftUI 的尺寸和布局的知识。...如果你对此还不太了解，建议你继续阅读以下文章：SwiftUI 布局 —— 尺寸（上）[5]、SwiftUI 布局 —— 尺寸（下）[6]、SwiftUI 布局 —— 对齐[7]。...为此，我们首先需要理解 SwiftUI 的布局原理。 SwiftUI 的布局是一个协商过程。父视图向子视图提供建议尺寸，子视图返回需求尺寸。...比如，对于 VStack ，它会在垂直维度上，分别向子视图发送具有明确值的建议尺寸、未指定的建议尺寸、最大建议尺寸以及最小建议尺寸的信息，并获得子视图在不同建议尺寸下的需求尺寸。...请阅读用 SwiftUI 的方式进行布局[9] 和在 SwiftUI 中实现视图居中的若干种方法[10] 两篇文章，以了解面对同一个需求，SwiftUI 有多种布局手段。

4607 0

WWDC - SwiftUI - 初恋般的感觉

我们将使用SwiftUI框架来构建Landmark详情界面。 Landmarks利用stacks将图片和文本组合起来来进行视图布局。你需要引用MapKit框架头文件来创建一个地图视图。...你可以通过Xcode新的实时反馈功能，来优化你的视图布局。第一节创建一个使用SwiftUI的新Xcode项目。浏览画布、预览和SwiftUI模板代码。...要自定义SwiftUI视图，你可以调用modifiers方法。Modifiers可以修改视图的属性，并且modifier返回一个新的视图，所以通常会将多个modifiers像链一样垂直堆叠在一起。...当我们创建SwiftUI视图控件的时候，我们会把控件的内容、布局还有一些行为放在body属性中；然而body属性只返回了一个view。...Space把父视图在水平或者垂直方向上全部充满。

3.8K1 0

苹果全新UI框架来了！可视化编程，自动化减少20%代码量

一致性：这意味着Swift和Objective-C之间不会再看到奇怪的错误，或者非常旧的API与新API的混合简洁：可以节省10%-20%的代码量如果你刚刚接触SwiftUI，刚开始你可能需要适应一下...比如在使用源码控制时就很麻烦，会导致代码和可视化布局之间移动变得非常困难；使用动作和outlets时过于依赖flaky系统的连接。...而SwiftUI通过4种方式，解决了上述问题：用一个新的声明式UI结构，定义了的布局的外观和工作方式更新UI预览会自动生成新的Swift代码，反之，更改Swift代码也会更新UI预览 Swift中的任何绑定例如有效的...感受一下SwiftUI的代码风格 ? Github一个repo整理了在WWDC 2019发布的SwiftUI布局框架的一些官方示例： SwiftUI Essentials 创建和组合视图： ?...比如，它只支持Swift，你不能在Obj-C里使用SwiftUI；SwiftUI目前还不是很成熟，正在从事iOS开发的程序员可能更应该继续使用Obj-C，直到SwiftUI足够成熟。

5.3K2 0

SwiftUI 布局 —— 尺寸（上）

，让你对 SwiftUI 的布局机制有更加深入地理解。...SwiftUI 布局过程速览 SwiftUI 的布局就是布局系统通过为视图树上的节点提供必要的信息，最终计算出每个视图（矩形）所需的尺寸以及摆放位置的行为。...其中的代表有 Group、ForEach 等。...这类视图的主要作用有：突破 ViewBuilder Block 的数量限制方便为一组视图统一设置 view modifier 有利于代码管理其他特殊应用，如 ForEach 可支持动态数量的子视图等...可以说 Layout 协议是一个用来观察和验证 SwiftUI 布局运作原理的优秀工具。建议尺寸 SwiftUI 的布局是从外向内进行的。

4.6K2 0

用 SwiftUI 实现 3D Scroll 效果

学完本教程后，你就可以在你的 App 中把这种 3D 效果加入任何自定义的 SwiftUI 视图。下面我们来开始本教程的学习。入门首先，创建一个新的 SwiftUI 视图。...showsIndicators: false) { HStack(alignment: .center, spacing: 50) { } } } 展示矩形我们使用 ForEach...此外，我修改了矩形的 frame，让它看起来与传统 UI 布局更像一些。...horizontal, showsIndicators: false) { HStack(alignment: .center, spacing: 20) { ForEach...horizontal, showsIndicators: false) { HStack(alignment: .center, spacing: 230) { ForEach

1.5K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭