开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

SwiftUI子级溢出

是指在使用SwiftUI进行界面布局时，子视图的内容超出了父视图的边界。这可能导致子视图的内容被裁剪或者无法完全显示。

解决子级溢出的方法有多种，可以根据具体情况选择适合的方式：

使用ScrollView：如果子视图的内容超出了父视图的边界，可以将父视图包裹在ScrollView中。ScrollView会自动添加滚动功能，使得用户可以滑动查看超出边界的内容。在SwiftUI中，可以使用ScrollView来包裹子视图，并设置合适的滚动方向。
使用GeometryReader：GeometryReader是一个强大的容器视图，可以获取父视图的大小信息，并将其传递给子视图。通过使用GeometryReader，可以根据父视图的大小来动态调整子视图的布局，以避免溢出问题。
使用布局限制：在SwiftUI中，可以使用frame、padding、alignment等修饰符来限制子视图的大小和位置。通过设置合适的布局限制，可以确保子视图不会溢出父视图的边界。
使用适当的布局容器：SwiftUI提供了多种布局容器，如VStack、HStack、ZStack等，可以根据需要选择合适的容器来进行布局。不同的容器具有不同的布局方式和特性，可以根据子视图的内容和布局需求来选择合适的容器。

总结起来，解决SwiftUI子级溢出的关键是合理的布局和限制子视图的大小和位置。通过使用ScrollView、GeometryReader、布局限制和适当的布局容器，可以有效地避免子视图溢出问题。

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

腾讯云官网：https://cloud.tencent.com/
云服务器（CVM）：https://cloud.tencent.com/product/cvm
云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
云数据库MySQL版（CMYSQL）：https://cloud.tencent.com/product/cmysql
云存储（COS）：https://cloud.tencent.com/product/cos
人工智能（AI）：https://cloud.tencent.com/product/ai
物联网（IoT）：https://cloud.tencent.com/product/iotexplorer
移动开发（移动推送、移动分析）：https://cloud.tencent.com/product/mobile
区块链（BCS）：https://cloud.tencent.com/product/bcs
腾讯云游戏引擎（GSE）：https://cloud.tencent.com/product/gse

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

有帮助

没帮助

相关·内容

SwiftUI 中布局的工作原理

在这个技术项目中，我们将探讨 SwiftUI 如何处理布局。有些事情已经解释过了，有些可能是你自己弄明白的，但更多的是你在这一点上想当然的事情，所以我希望一个详细的探索能真正为 SwiftUI 的工作方式提供一些启示。

02

React核心成员表示：JSX就是个错误

近日，在一场关于JSX的讨论中，React核心成员「Sebastian Markbåge」（Hooks作者）表示：

03

SwiftUI：使用 @EnvironmentObject 从环境中读取自定义值

SwiftUI的环境使我们可以使用来自外部的值，这对于读取Core Data上下文或视图的展示模式等很有用。但是我们也可以将自定义对象发送到环境中，并在以后将它们读出来，这使我们可以在复杂的应用程序中更轻松地共享数据。

02

一些适合 SwiftUI 初学者的教程

经常有朋友咨询，学习 SwiftUI 的最佳路径是什么？考虑到每个人的技术背景、学习能力、工作经验均不一样，因此很难说哪种学习方式或哪些资料是适合他本人的。不过随着这个问题被反复提起，最终还是想尝试整理一些资料给对 SwiftUI 感兴趣的朋友。本文将介绍一些对学习者技术基础要求较低（甚至可以零基础）的教程。

02

WWDC - SwiftUI - 初恋般的感觉

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

01

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

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

02

SwiftUI TextField进阶——格式与校验

SwiftUI的TextField可能是开发者在应用程序中最常使用的文本录入组件了。作为UITextField（NSTextField）的SwiftUI封装，苹果为开发者提供了众多的构造方法和修饰符以提高其使用的便利性、定制性。但SwiftUI在封装中也屏蔽了不少的高级接口和功能，增加了开发者实现某些特定需要的复杂性。本文为【SwiftUI 进阶】系列文章中的一篇，在本文中，我将介绍如何在TextField中实现如下功能：

02

SwiftUI-布局案例

它的结构如下：RootView —> ContentView —> Text，那么 Text 是如何显示在屏幕上的？官方的介绍是如下 3 个步骤。

01

SwiftUI 布局 —— 对齐

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

02

Airbnb 的三阶段 SwiftUI 迁移实践

从 2022 年开始，Airbnb 的 iOS 团队就认为 SwiftUI 已经足够成熟，可以在他们的官方应用中使用它。但 Airbnb 的工程师 Bryn Bodayle 表示，这需要一个谨慎的转换过程。

01

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

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

03

ObservableObject研究

我是在去年阅读王巍写的《SwiftUI 与 Combine 编程》才第一次接触到单一数据源这一概念的。

06

SwiftUI 布局协议 - Part2

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

03

SwiftUI 布局协议 - Part 1

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

01

聊一聊可组装框架（ TCA ）

本文将聊聊一个与创建复杂的 SwiftUI 应用很契合的框架 —— The Composable Architecture（可组装框架，简称 TCA ）。包括它的特点和优势、最新的进展、使用中的注意事项以及学习路径等问题。

02

ViewBuilder 研究（下） —— 从模仿中学习

在上篇[2]中，我们对 result builders 做了较详细的介绍。本篇我们将通过对 ViewBuilder 的仿制，探索更多有关 SwiftUI 视图背后的秘密。

02

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

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

04

解析 SwiftUI 中两处由状态更新滞后引发的严重 Bug

众所周知，SwiftUI 是一个响应式框架，这意味着，当数据源发生变化时，框架会自动更新视图。同样，当我们想调整视图显示时，应直接对状态进行修改。但是，SwiftUI 中的一些系统控件并没有完全遵循响应式的设计原则，由此在某些情况下会出现严重的错误，影响用户体验，并使开发者无所适从。

掌握 SwiftUI 的 task 修饰器

随着 Swift 5.5 引入了 async/await 特性，苹果也为 SwiftUI 添加了 task 视图修饰器，以方便开发者在视图中使用基于 async/await 的异步代码。本文将对 task 视图修饰器的特点、用法、注意事项等内容做以介绍，并提供了将其移植到老版本 SwiftUI 的方法。

03

解析 SwiftUI 中两处由状态更新滞后引发的严重 Bug

众所周知，SwiftUI 是一个响应式框架，这意味着，当数据源发生变化时，框架会自动更新视图。同样，当我们想调整视图显示时，应直接对状态进行修改。但是，SwiftUI 中的一些系统控件并没有完全遵循响应式的设计原则，由此在某些情况下会出现严重的错误，影响用户体验，并使开发者无所适从。

02

SwiftUI-数据流

SwiftUI中的界面是严格数据驱动的：运行时界面的修改，只能通过修改数据来间接完成，而不是直接对界面进行修改操作。

02

掌握 SwiftUI 的 task 修饰器

随着 Swift 5.5 引入了 async/await 特性，苹果也为 SwiftUI 添加了 task 视图修饰器，以方便开发者在视图中使用基于 async/await 的异步代码。本文将对 task 视图修饰器的特点、用法、注意事项等内容做以介绍，并提供了将其移植到老版本 SwiftUI 的方法。

06

CSS基础——css 元素溢出

当子元素(标签)的尺寸超过父元素(标签)的尺寸时，此时需要设置父元素显示溢出的子元素的方式，设置的方法是通过overflow属性来完成。

01

用 SwiftUI 的方式进行布局

最近时常有朋友反映，尽管 SwiftUI 的布局系统学习门槛很低，但当真正面对要求较高的设计需求时，好像又无从下手。SwiftUI 真的具备创建复杂用户界面的能力吗？本文将通过用多种手段完成同一需求的方式，展示 SwiftUI 布局系统的强大与灵活，并通过这些示例让开发者对 SwiftUI 的布局逻辑有更多的认识和理解。

00

overflow:hidden作用能治住塌陷_html溢出隐藏代码

给一个元素中设置overflow:hidden，那么该元素的内容若超出了给定的宽度和高度属性，那么超出的部分将会被隐藏，不占位。

03

用 SwiftUI 的方式进行布局

最近时常有朋友反映，尽管 SwiftUI 的布局系统学习门槛很低，但当真正面对要求较高的设计需求时，好像又无从下手。SwiftUI 真的具备创建复杂用户界面的能力吗？本文将通过用多种手段完成同一需求的方式，展示 SwiftUI 布局系统的强大与灵活，并通过这些示例让开发者对 SwiftUI 的布局逻辑有更多的认识和理解。

08

SwiftUI 布局 —— 尺寸（上）

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

02

SwiftUI 的动画机制

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

04

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

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

02

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

近日，苹果正式将 Apple Vision Pro (AVP) 推广到更多国家的市场。考虑到 AVP 的独特性，尤其需要为戴眼镜用户提供定制的镜片，消费者能够亲身体验这款产品无疑会增进对其的了解，有望带动销量。然而，若价格、佩戴舒适度和生态系统等核心问题未能得到显著改善，仅仅扩大销售范围恐难以带来令人振奋的市场表现。

01

WWDC 2020记录

只能由用户主动唤起，不支持Universal Links，不支持URL Scheme，可以跳转到其他APP，但无法跳转回来

04

GeometryReader ：好东西还是坏东西？

GeometryReader 自 SwiftUI 诞生之初就存在，它在许多场景中扮演着重要的角色。然而，从一开始就有开发者对其持负面态度，认为应尽量避免使用。特别是在最近几次 SwiftUI 更新中新增了一些可以替代 GeometryReader 的 API 后，这种观点进一步加强。本文将对 GeometryReader 的“常见问题”进行剖析，看看它是否真的如此不堪，以及那些被批评为“不符预期”的表现，是否其实是因为开发者的“预期”本身存在问题。

07

在 SwiftUI 下定制手势

不同于众多的内置控件，SwiftUI 没有采用对 UIGestureRecognizer（或 NSGestureRecognizer）进行包装的形式，而是重构了自己的手势体系。SwiftUI 手势在某种程度上降低了使用门槛，但由于缺乏提供底层数据的 API，严重制约了开发者的深度定制能力。在 SwiftUI 下，我们无法拥有类似构建全新 UIGestureRecongnizer 的能力。所谓的自定义手势，其实只是对系统预置手势的重构而已。本文将通过几个示例，演示如何使用 SwiftUI 提供的原生手段定制所需手势。

02

用 SwiftUI 实现一个开源的 App Store

App Store 一直以来都是 iPhone 生态的最重要一环，在初代 iPhone 商店，因为 App 比较少，当时就有 Top 25 榜单：

02

SwiftUI数据流之State&Binding

@State是一个属性包装器（property wrapper），被设计用来针对值类型进行状态管理；用于在Struct中mutable值类型

03

动态规划

假如只差一步就能走完整个台阶，要分为几种情况？因为每一步能走一级或者两级台阶，所以有如下两种情况：

01

用NavigationViewKit增强SwiftUI的导航视图

如果想获得更好的阅读体验，请访问我的博客 www.fatbobman.com[1]

02

从零开始的 Swift UI (一)

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

03

@State 研究

我在去年底使用了SwiftUI写了第一个 iOS app 健康笔记，这是我第一次接触响应式编程概念。在有了些基本的认识和尝试后，深深的被这种编程的思路所打动。不过，我在使用中也发现了一些奇怪的问题。我发现在视图（View）数量达到一定程度，随着数据量的增加，整个app的响应有些开始迟钝，变得有粘滞感、不跟手。app响应出现了问题一方面肯定和我的代码效率、数据结构设计欠佳有关；不过随着继续分析，发现其中也有很大部分原因来自于SwiftUI中所使用的响应式的实现方式。不恰当的使用，可能导致响应速度会随着数据量及View量的增加而大幅下降。通过一段时间的研究和分析，我打算用两篇文章来阐述这方面的问题，并尝试提供一个现阶段的使用思路。

02

Swift 周报第十四期

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

01

容易被误解的overflow:hidden

为了页面的健壮性，我们常常需要使用overflow:hidden。有时候是为了防止布局被撑开，有时候是为了配合其它规则实现文字截断，还有时候纯粹是为了创建块级上下文。但是，很多人对这个属性是存在着一定的误解的，网上很多入门的资料或文章都只提到用overflow:hidden加固定的宽度（或高度）可以强制隐藏内部的超出容器的内容。包括之前我们在使用overflow:hidden创建块级上下文的方式来实现图文混排时，都认为overflow:hidden造成了特殊情况下的麻烦（详见[cref flexible-t

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

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

04

鸿蒙应用开发-初见：ArkUI

Flutter中Widget的布局原理如下图所示。想了解更多Flutter的布局原理可以查看深入理解 Flutter 布局约束

01

CSS3盒子模型

给父级设置一个display:flex属性，子元素设置flex相关属性才可以自动分配宽高。

02

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

InfoQ 最引人注目的功能之一是我们的主题图，它综合了我们对不同主题如何在技术采用曲线中叠加的理解。当需要从编辑的角度决定我们想要涵盖的内容时，它们作为优先考虑不同和竞争利益的指南非常有用，但我们也相信分享它们可以帮助我们的读者更好地了解当前和未来的技术前景并帮助告知他们的决策过程。

01

用 SwiftUI 实现一个开源的 App Store

App Store 一直以来都是 iPhone 生态的最重要一环，在初代 iPhone 商店，因为 App 比较少，当时就有 Top 25 榜单：

02

SwiftUI: 从 React 开发人员的角度看 SwiftUI

最近我通过学习 SwiftUI 时，令我印象最深的就是我对它的熟悉程度，因为我已经在 React 和 TypeScript上工作了几年了。

04

SwiftUI 视图的生命周期研究

在 UIKit（AppKit）的世界中，通过框架提供的大量钩子（例如 viewDidLoad、viewWillLayoutSubviews 等），开发者可以将自己的意志注入视图控制器生命周期的各个节点之中，宛如神明。在 SwiftUI 中，系统收回了上述的权利，开发者基本丧失了对视图生命周期的掌控。不少 SwiftUI 开发者都碰到过视图生命周期的行为超出预期的状况（例如视图多次构造、onAppear 无从控制等）。

03

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

SwiftUI是一个非常方便快速的构建UI的框架，与最新Xcode设计工具无缝协作，可为所有苹果设备构建UI。开发者通过SwiftUI，利用Swift语法就能够完成代码和设计的同步。

02

Swift 周报第十期

前几期周报内容是同步翻译的英文版周报，目前英文版停更，周报停滞半年多。经过多次讨论，我们决定重启周报，分模块整理内容同步给大家。

00

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭