开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

SwiftUI: ForEach中的HStack在VStack中使多行文本重叠

基础概念

SwiftUI 是苹果推出的一个声明式 UI 框架，用于构建 iOS、macOS、watchOS 和 tvOS 应用程序的用户界面。ForEach 是一个视图构造器，用于遍历集合并在视图中显示每个元素。HStack 和 VStack 分别是水平堆栈和垂直堆栈视图，用于在视图中水平和垂直排列子视图。

问题描述

在使用 SwiftUI 的 ForEach 和 HStack 时，可能会遇到多行文本重叠的问题。这通常是因为 HStack 默认情况下会尝试在同一行内显示所有子视图，如果子视图的大小超过了可用空间，就会导致重叠。

原因分析

空间不足：HStack 中的子视图总宽度超过了父视图的宽度。
文本换行：如果子视图是文本视图，且文本内容过长，没有正确处理换行，也会导致重叠。

解决方案

1. 使用 `frame` 限制宽度

可以通过设置 frame 来限制 HStack 的宽度，确保其不会超出父视图的宽度。

VStack {
    ForEach(0..<10) { index in
        HStack {
            Text("Item \(index)")
                .frame(width: .infinity, alignment: .leading)
                .background(Color.gray.opacity(0.2))
        }
        .frame(maxWidth: .infinity)
        .padding(.vertical, 8)
    }
}

2. 使用 `LazyVGrid` 替代 `ForEach` 和 `HStack`

LazyVGrid 是一个更高级的布局视图，可以自动处理行和列的布局，避免重叠问题。

VStack {
    LazyVGrid(columns: [GridItem(.flexible(), spacing: 16)], alignment: .leading, spacing: 16) {
        ForEach(0..<10) { index in
            Text("Item \(index)")
                .frame(maxWidth: .infinity)
                .background(Color.gray.opacity(0.2))
        }
    }
    .padding(.vertical, 8)
}

应用场景

这种布局方式适用于需要动态显示多个项目的列表，例如商品列表、新闻列表等。

参考链接

通过以上方法，可以有效解决 ForEach 中的 HStack 在 VStack 中使多行文本重叠的问题。

相关搜索:VStack/HStack中的SwiftUI重复边框 SwiftUI -在VStack中对齐文本在SwiftUI HStack中对齐旋转的文本如何在SwiftUI中设置嵌入在ForEach中的HStack的相对宽度？隐藏TabBar时ScrollView与VStack中的文本重叠在swiftUI中调整VStack的帧大小 SwiftUI iOS 14 |在HStack中自动扩展文本框和内容在SwiftUI中动画显示/隐藏子对象的VStack 如何使用HStack在SwiftUI视图中使所有视图的高度相同？如何在SwiftUI中使用ForEach中的图像 SwiftUI中的多行可编辑文本字段如何在SwiftUI中删除TextField和HStack上的文本之间的空格？在SwiftUI中，选取器扩展到占据HStack中的整个空间在ForEach中改变结构数据集的SwiftUI？SwiftUI:在VStack中避免文本视图的水平移动，以复制相机时间标签布局？在SwiftUI中删除LazyVStack和ForEach中的行在SwiftUI中使用ForEach在按钮机上制作独特的图纸？自定义的TextField在SwiftUI代码中的VStack中不起作用带有ForEach的SwiftUI列表在一个VStack中可用，但在另一个中不起作用 .onDelete在排序的ForEach - SwiftUI中不起作用

相关搜索:

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

有帮助

没帮助

相关·内容

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

最近，在我正在开发一个在 Dribbble 上找到的设计的 SwiftUI 实现时，我想到了一个点子，可以通过一些酷炫的筛选器扩展该项目以缩小结果列表。

02

SwiftUI 布局 —— 对齐

“对齐”是 SwiftUI 中极为重要的概念，然而相当多的开发者并不能很好地驾驭这个布局利器。在 WWDC 2022 中，苹果为 SwiftUI 增添了 Layout 协议，让我们有了更多的机会了解和验证 SwiftUI 的布局原理。本文将结合 Layout 协议的内容对 SwiftUI 的 “对齐” 进行梳理，希望能让读者对“对齐”有更加清晰地认识和掌握。

02

SwiftUI中的水平条形图

水平条形图以矩形条的形式呈现数据类别，其宽度与它们所代表的数值成正比。本文展示了如何在垂直条形图的基础上创建一个水平柱状图。

02

SwiftUI 之 HStack 和 VStack 的切换

SwiftUI 的各种堆栈是许多框架中最基本的布局工具，能够让我们定义组视图，这些组视图可以按照水平、垂直或覆盖视图对齐。

01

使用 SwiftUI 为 macOS 创建类似于 App Store Connect 的选择器

最近，我一直在为我的应用开发一个全新的界面，它可以让你查看 TestFlight 上所有可用的构建，并允许你将它们添加到测试群组中。

03

高级 SwiftUI 动画 — Part 3：AnimatableModifier

之前的两篇文章animating paths 和 transform matrices 对 Animatable 协议使用做了介绍，今天这篇文章将为大家介绍 AnimatableModifier，使用它可以完成更多的动画工作。

01

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

将某个视图在父视图中居中显示是一个常见的需求，即使对于 SwiftUI 的初学者来说这也并非难事。在 SwiftUI 中，有很多手段可以达成此目的。本文将介绍其中的一些方法，并对每种方法背后的实现原理、适用场景以及注意事项做以说明。

04

IOS Widget（3）：SwiftUI开发小组件布局入门

经过上一篇文章，我们已经可以在桌面上展示出一个小组件出来了，你肯定想小试牛刀，动手改一改，那我们就从改小组件的布局做起吧。本文不会讲解Swift语法，如果是熟悉Flutter，Kotlin这种语言的，问题也不大。本文只讲解小组件中常用的SwiftUI组件。

02

使用HSB而不是RGB来定义颜色

有多种方法可以在代码中定义颜色。最常用的方法是指定三种基色的值 - 红色、绿色和蓝色 (RGB)。本文通过指定色调、饱和度和亮度 (HSB) 的值来探索替代机制的使用。可以以更直观的方式使用 HSB 属性来创建颜色搭配良好的调色板。

03

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

任选 7 张任意尺寸的图片按 p1 至 p7 进行命名并拖拽进 Assets.xcassets 文件中（如图所示）

03

WWDC - SwiftUI - 初恋般的感觉

要在Xcode中预览画布上的视图并与之交互，请确保您的Mac运行的是macOS 10.15 beta版。

01

SwiftUI 布局：如何自定义 AlignmentGuides

SwiftUI 为我们提供了视图不同边缘的对齐指南（.leading、trailing、top等）以及.center和两个基线选项来帮助文本对齐。

01

在 SwiftUI 中用 Text 实现图文混排

SwiftUI 提供了强大的布局能力，不过这些布局操作都是在视图之间进行的。当我们想在 Text 中进行图文混排时，需要采用与视图布局不同的思路与操作方式。本文将首先介绍一些与 Text 有关的知识，并通过一个实际案例，为大家梳理出在 SwiftUI 中用 Text 实现图文混排的思路。

03

如何在 SwiftUI 中创建条形图

条形图以矩形条的形式呈现数据的类别，其宽度和高度与它们表示的值成比例。本文将展示如何创建一个垂直条形图，其中矩形的高度将代表每个类别的值。

01

掌握 ViewThatFits

在 iOS 16 中，SwiftUI 增加了一个新的自适应布局容器 ViewThatFits。正如其名称所示，它的作用是在给定的多个视图中找出最合适的视图并使用。对于大多数人来说，这是一个简单易用的容器。不过，本文打算对其进行彻底的剖析，包括规则细节、理想尺寸的含义、使用示例等。最后，我们将创建一个复刻版本的 ViewThatFits，以加深对其的认识和理解。

01

SwiftUI 中的Stack

就从Stack说起，stack查看文档我们看到HVZ三种stack，那么分别是怎么用的呢？

01

SwiftUI案例：天气

在工作区的项目文件夹下创建名为 SpriteFiles 的 Group 并在其中依次导入 RainFall.sks RainFallLanding.sks

02

优化在 SwiftUI List 中显示大数据集的响应效率

拥有优秀的交互效果和手感，是很多 iOS 开发者长久以来坚守的原则。同样一段代码，在不同数据量级下的响应表现可能会有云泥之别。本文将通过一个优化列表视图的案例，展现在 SwiftUI 中查找问题、解决问题的思路，其中也会对 SwiftUI 视图的显式标识、@FetchRequest 的动态设置、List 的运作机制等内容有所涉及。本文的范例需运行在 iOS 15 及以上系统，技术特性也以 SwiftUI 3.0 为基础。

02

SwiftUI 布局 —— 尺寸（上）

在 SwiftUI 中，尺寸这一布局中极为重要的概念，似乎变得有些神秘。无论是设置尺寸还是获取尺寸都不是那么地符合直觉。本文将从布局的角度入手，为你揭开盖在 SwiftUI 尺寸概念上面纱，了解并掌握 SwiftUI 中众多尺寸的含义与用法；并通过创建符合 Layout 协议的 frame 和 fixedSize 视图修饰器的复制品，让你对 SwiftUI 的布局机制有更加深入地理解。

02

在 SwiftUI 中创建自适应的程序化导航方案

随着苹果对 iPadOS 的不断投入，越来越多的开发者都希望自己的应用能够在 iPad 中有更好的表现。尤其当用户开启了台前调度（ Stage Manager ）功能后，应用对不同视觉大小模式的兼容能力就越发显得重要。本文将就如何创建可自适应不同尺寸模式的程序化导航方案这一内容进行探讨。

03

SwiftUI 布局协议 - Part 1

今年 SwiftUI 新增最好的功能之一必须是布局协议。它不但让我们参与到布局过程中，而且也给了我们一个很好的机会去更好的理解布局在 SwiftUI 中的作用。

01

解析SwiftUI布局细节（二）循环轮播+复杂布局

上一篇我们总结的主要是VStack里面的东西，由他延伸到 @ViewBuilder, 接着我们上一篇总结的我们这篇内容主要说的是下面的几点，在这些东西说完后我准备解析一下苹果在SiwftUI文档中说道的比较好玩的一个东西，具体的我们后面在看。这篇我们还是说我们关于SwiftUI的东西，再提一下Demo代码我已经提交上Git了，目前Demo进度为一级页面基本上结束，地图点击大头针的添加也刚处理完，代码有需要的小伙伴可以去Git看看，项目地址

02

在 SwiftUI 中用 zIndex 调整视图显示顺序

本文将对 SwiftUI 的 zIndex 修饰符做以介绍，包括：使用方法、zIndex 的作用域、通过 zIndex 避免动画异常、为什么 zIndex 需要设置稳定的值以及在多种布局容器内使用 zIndex 等内容。

03

Hello, SwiftUI

.edgesIgnoringSafeArea(.top)

02

使用 SwiftUI 的 Eager Grids

早在 2020 年，我们就拥有了在 SwiftUI（LazyVGrid 和 LazyHGrid）中绘制网格的新视图控件。两年后，我们又获得了另一种在网格（Grid）中显示视图的视图控件。但是，这些新增功能非常不同，不仅在您使用它的方式上，而且在它内部的行为方式上。2020 年的观点很懒惰。这些新人很热心。

02

SwiftUI 的动画机制

大多初学者都会在第一时间惊叹于 SwiftUI 轻松实现各种动画效果的能力，但经过一段时间的使用后，他们会发现 SwiftUI 的动画并非像表面上看起来那样容易驾驭。开发者经常需要面对：如何动、怎么动、什么能动、为什么不动、为什么这么动、如何不让它动等等困扰。对 SwiftUI 的动画处理逻辑了解的不够深入是造成上述困扰的主要原因。本文将尝试对 SwiftUI 的动画机制做以介绍，以帮助大家更好地学习、掌握 SwiftUI 的动画，制作出满意的交互效果。

04

解析SwiftUI布局细节（一）

在前面的文章中谈了谈对SwiftUI的基本的认识，以及用我们最常见的TB+NA的方式搭建了一个很基本的场景来帮助认识了一下SwiftUI，具体的文章可以在SwiftUI分类部分查找，这篇我准备在写UI的时候从SwiftUI角度我们具体的应该怎样去做，或者说是用SwiftUI我们该从什么角度去解析一个页面。以及对SwiftUI里面的其中一些细节知识做一下分析总结。

01

用 Table 在 SwiftUI 下创建表格

Table 是 SwiftUI 3.0 中为 macOS 平台提供的表格控件，开发者通过它可以快捷地创建可交互的多列表格。在 WWDC 2022 中，Table 被拓展到 iPadOS 平台，让其拥有了更大的施展空间。本文将介绍 Table 的用法、分析 Table 的特点以及如何在其他的平台上实现类似的功能。

03

掌握 SwiftUI 的 Safe Area

Safe Area（安全区域）是指不与导航栏、标签栏、工具栏或其他视图控制器提供的视图重叠的内容空间。

03

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

在应用中显示应用图标和版本是为用户提供快速识别应用版本和变体的好方法，无论是内部用户（如测试人员或利益相关者）还是外部用户。

02

如何在 Swift 中取消一个后台任务

Swift 5.5中引入的 async/await 语法，允许用更可读的方式来编写异步代码。异步编程可以提高应用程序的性能，但必须取消不需要的任务，以确保不需要的后台任务不会干扰到应用程序。本文演示了如何明确地取消一个任务，并展示了子任务是如何自动取消的。

03

SwiftUI Overlay Container 2 —— 可定制、高效、便捷的视图管理器

SwiftUI Overlay Container[1] 是一个用于 SwiftUI 的视图容器组件。一个可定制、高效、便捷的视图管理器。

02

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

为可滚动容器的内容或滚动指示器（Scroll Indicator）添加外边距（Margin）。

02

面向所有人的 UI 编程：透过点按弹窗初尝 SwiftUI

「试想你是一名美术，完全不了解程序。而你眼前只有一位盲人程序员，你想让他帮你实现这个程序，你会怎样告诉你的程序员你想要的效果？」

04

在 iOS16 中用 SwiftUI 图表定制一个线图

在 iOS 16 中引入的 SwiftUI 图表，可以以直观的视觉格式呈现数据，并且可以使用 SwiftUI 图表快速创建。本文演示了几种定制折线图并与区域图结合来展示数据的方法。

02

只在视图 Body 中生存的变量

SwiftUI 通过调用视图实例的 body 属性来获取视图值。在 View 协议中，body 被属性包装器 @ViewBuilder 所标注，这意味着，通常我们只能在 body 中使用 ViewBuilder 认可的 Expression 来声明视图（如果显式使用 return ，虽然可以避开 ViewBuilder 的限制，但因受只能返回一种类型的限制，影响视图的表达能力）。

01

从零开始的 Swift UI (一)

注: 本文编写时，使用 Xcode 12.3、Swift 5.3.2 来构建 App

03

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

Ask Apple 为开发者与苹果工程师创造了在 WWDC 之外进行直接交流的机会。本文对本次活动中与 SwiftUI 有关的一些问答进行了整理，并添加了一点个人见解。本文为下篇。

03

为什么 SwiftUI 的视图使用结构体

如果您曾经为 UIKit 或 AppKit（Apple 的 iOS 和 macOS 原始用户界面框架）编程，您会知道它们使用类而非结构体来构造视图。SwiftUI 并非如此：我们更喜欢将结构体用于整体视图，这有两个原因。

05

SwiftUI 布局协议 - Part2

在 Part 1 我们探索了布局协议的基础知识，为理解布局是如何工作的打下了坚实的基础。现在，是时候深入研究那些更少提及的功能了，以及如何使用它们来为我们带来便利。

03

为什么SwiftUI的视图使用结构体？

如果您曾经为UIKit或AppKit（Apple的iOS和macOS原始用户界面框架）编程，您会知道它们使用类而非结构体来构造视图。SwiftUI并非如此：我们更喜欢将结构体用于整体视图，这有两个原因。

01

在iOS16中用SwiftUI图表定制一个线图

在iOS 16中引入的SwiftUI图表，可以以直观的视觉格式呈现数据，并且可以使用SwiftUI图表快速创建。本文演示了几种定制折线图并与区域图结合来展示数据的方法。

02

如何判断 ScrollView、List 是否正在滚动中

判断一个可滚动控件（ ScrollView、List ）是否处于滚动状态在某些场景下具有重要的作用。比如在 SwipeCell[3] 中，需要在可滚动组件开始滚动时，自动关闭已经打开的侧滑菜单。遗憾的是，SwiftUI 并没有提供这方面的 API 。本文将介绍几种在 SwiftUI 中获取当前滚动状态的方法，每种方法都有各自的优势和局限性。

04

SwiftUI 布局 —— 尺寸（下）

在上篇[3] 中，我们对 SwiftUI 布局过程中涉及的众多尺寸概念进行了说明。本篇中，我们将通过对视图修饰器 frame 和 offset 的仿制进一步加深对 SwiftUI 布局机制的理解，并通过一些示例展示在布局时需要注意的问题。

04

SwiftUI，是FlutterUI该有的样子吗？

刚刚的【2019 WWDC 大会】苹果发布了 SwiftUI 开发语言，咋看上去，和Flutter的UI比较像，但个人感觉比Flutter的方式更好——虽然有些地方比较奇怪。有兴趣的开发人员可以试着按链接操作一下：

03

SwiftUI（1）：基本框架

SwiftUI很强大，但是用法过于丰富因此不太好掌握。此篇文章的目的是梳理SwiftUI的设计者想法（框架），整个文章系列记录自己学习/使用SwiftUI的体会和想法。

01

在 iOS 16 中用 SwiftUI Charts 创建一个折线图

苹果在 WWWDC 2022 上推出了 SwiftUI 图表，这使得在 SwiftUI 视图中创建图表变得异常简单。图表是以丰富的格式呈现可视化数据的一种很好的方式，而且易于理解。本文展示了如何用比以前从头开始创建同样的折线图少得多的代码轻松创建折线图。此外，自定义图表的外观和感觉以及使图表中的信息易于访问也是非常容易的。

02

在iOS 16中用SwiftUI Charts创建一个折线图

苹果在WWWDC 2022上推出了SwiftUI图表，这使得在SwiftUI视图中创建图表变得异常简单。图表是以丰富的格式呈现可视化数据的一种很好的方式，而且易于理解。本文展示了如何用比以前从头开始创建同样的折线图少得多的代码轻松创建折线图。此外，自定义图表的外观和感觉以及使图表中的信息易于访问也是非常容易的。

02

5 分钟，带你快速撸一个 iOS App

使用 Python 写完爬虫后，有时候我们需要在手机上实时对爬虫进行调度，或实时展示爬虫的结果

04

Swift 周报第十四期

本期是 Swift 编辑组自主整理周报的第五期，每个模块已初步成型。各位读者如果有好的提议，欢迎在文末留言。

01

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭