开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

在SwiftUI中将文本环绕在某些视图周围

可以通过使用Text元素的overlay和mask方法来实现。

overlay方法可以在文本之上添加一个视图，并调整视图的位置和大小。例如，如果想在文本周围添加一个矩形框，可以使用overlay方法将一个Rectangle视图放置在Text元素之上。具体代码如下：

Text("Hello, World!")
    .font(.largeTitle)
    .padding()
    .overlay(
        Rectangle()
            .stroke(Color.red, lineWidth: 2)
    )

上述代码中，我们在文本之上添加了一个红色边框的矩形框。

另一种方式是使用mask方法，它允许我们使用另一个视图来剪切文本。例如，如果想让文本只在一个圆形区域内可见，可以使用mask方法将一个Circle视图应用于Text元素。具体代码如下：

Text("Hello, World!")
    .font(.largeTitle)
    .padding()
    .mask(
        Circle()
    )

上述代码中，我们将一个圆形视图应用于文本，使得文本只在圆形区域内可见。

这种技术在创建自定义UI时非常有用，可以根据实际需求选择合适的视图进行overlay或mask。同时，SwiftUI还提供了丰富的视图和效果可以用来装饰文本，如圆角、阴影、渐变等。

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

相关搜索:在sql表函数中将某些字符环绕在标记周围在HTML输入中将元素动态环绕在文本周围如何在Rmarkdown knit- to -pdf文档中将文本环绕在图表周围？如何在flexbox中将文本环绕在对象周围(就像浮动一样)？SwiftUI:点击时在视图周围绘制矩形 SwiftUI，在@Viewbuilder中将视图作为参数传递在SwiftUI中将视图强制置于视图的右下角如何在SwiftUI中将文本放置在图像下？.animation修改器在SwiftUI中将视图向上移动在SwiftUI中旋转文本视图及其框架 SwiftUI .contextMenu使用clipShape在我的视图周围添加了可见的填充在SwiftUI中将网址和文本分享给Facebook或Twitter？有没有办法在SwiftUI中强制只对某些视图使用横向模式？在ForEach迭代(SwiftUI)中将数据传递到自定义视图在某些文本视图参数中动态设置文本后创建布局的位图 SwiftUI:在VStack中将视图与另一个视图的前缘和尾边对齐在android回收视图文本视图中将文本视图更改为小数点后2位如何使用ViewModifier在swiftUI中将前景色可选地设置为视图 SwiftUI -将文本视图的中心始终设置在绝对固定的位置如何使用SwiftUI在iOS中将表情符号与文本垂直对齐？

相关搜索:

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

有帮助

没帮助

相关·内容

在 SwiftUI 中用 Text 实现图文混排

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

03

关于Adobe Illustrator软件下载 Ai2安装包下载及安装教程

Adobe Illustrator是一款十分热门的图像编辑和绘图软件，很多小伙伴们在制作各种图片时都会使用到这款软件，软件的功能非常的强大，并且为用户们提供了许多工具，很多小伙伴们在使用这款软件进行图像处理时，都会遇到认为图片角度不合适的情况，那么就可以使用视图旋转的功能旋转画布，不了解的小伙伴们可以来看看以下小编的教程文章！

00

WORD的基本操作（五）

鼠标指针放在所需插入图片的位置---插入---图片---打开插入图片对话框---选择图片---单击插入

01

SwiftUI TextField进阶——格式与校验

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

02

SwiftUI 视图的生命周期研究

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

03

避免 SwiftUI 视图的重复计算

随着近年来有关 SwiftUI 的文章与书籍越来越多，开发者应该都已经清楚地掌握了 —— “视图是状态的函数” 这一 SwiftUI 的基本概念。每个视图都有与其对应的状态，当状态变化时，SwiftUI 都将重新计算与其对应视图的 body 值。

08

SwiftUI 中布局的工作原理

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

02

WWDC - SwiftUI - 初恋般的感觉

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

01

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

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

02

在SwiftUI中使用UIKit视图

已迈入第三个年头的SwiftUI相较诞生初始已经提供了更多的原生功能，但仍有大量的事情是无法直接通过原生SwiftUI代码来完成的。在相当长的时间中开发者仍需在SwiftUI中依赖UIKit（AppKit）代码。好在，SwiftUI为开发者提供了便捷的方式将UIKit（AppKit）视图（或控制器）包装成SwiftUI视图。

02

AttributedString——不仅仅让文字更漂亮

在WWDC 2021上，苹果为开发者带来了有一个期待已久的功能——AttributedString，这意味着Swift开发人员不再需要使用基于Objective-C的NSAttributedString来创建样式化文本。本文将对其做全面的介绍并演示如何创建自定义属性。

04

StateObject 与 ObservedObject

StateObject 是在 SwiftUI 2.0 中才添加的属性包装器，它的出现解决了在某些情况下使用 ObservedObject 视图会出现超预期的问题。本文将介绍两者间的异同，原理以及注意事项。

02

SwiftUI 中的内容边距

SwiftUI 引入了一组视图修饰符，使我们能够有效地管理视图中的安全区域。在许多情况下，安全区域是你希望放置内容的地方。今天，我们将了解 SwiftUI 引入的新内容边距概念以及它与安全区域的区别。

03

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

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

03

WWDC 23 之后的 SwiftUI 有哪些新功能

WWDC 23 已经到来，SwiftUI 框架中有很多改变和新增的功能。在本文中将主要介绍 SwiftUI 中数据流、动画、ScrollView、搜索、新手势等功能的新变化。

02

[CSS] 浮动布局的深入理解与应用

浮动布局是CSS中一种非常强大的布局方式，最初设计用来实现文字环绕图片的效果，但随着网页设计的发展，浮动布局逐渐演变成一种重要的页面布局手段。以下是对浮动布局的详细介绍和一些相关的CSS代码示例。

01

前端学习笔记之CSS文档流

An element is called out of flow if it is floated, absolutely positioned, or is the root element. An element is called in-flow if it is not out-of-flow. The flow of an element A is the set consisting of A and all in-flow elements whose nearest out-of-flow ancestor is A.

04

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

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

04

我庆幸果断放弃了SwiftUI：它还不够成熟

编译 | 核子可乐、Tina SwiftUI 很好，但是苹果对它投资不足。在 2019 年的 WWDC 大会上，苹果推出了一个全新的 SwiftUI 框架，这是一个现代化的 UI 界面编码结构，它是基于 Swift从头开始构建的。新框架使用声明性范例，让开发者用更少的代码编写相同的 UI。 SwiftUI 的愿景是降低开发 iOS 门槛，吸引更多开发者、丰富 iOS 的业态。并且 SwiftUI 可以“实现一次编码，可适应五端 Apple 产品平台”，包括watchOS、tvOS、macOS 等，

02

SwiftUI：视图的显示和隐藏动画

SwiftUI最强大的功能之一是能够自定义视图的显示和隐藏方式。以前，您已经了解了如何使用常规if条件有条件地包含视图，这意味着当条件更改时，我们可以从视图层次结构中插入或移除视图。

03

SwiftU：将状态绑定到UI控件

SwiftUI的@State属性包装器允许我们自由修改视图结构体，这意味着当程序更改时，我们可以更新视图属性以匹配。

01

SwiftU：在循环中创建视图

通常在一个循环中创建多个SwiftUI视图。例如，我们可能想要遍历一系列名称，并让每个名称成为文本视图，或者遍历一系列菜单项，并将每个名称显示为图像。

02

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

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

02

SwiftUI - 百行代码变十行，Swift再创辉煌

苹果开发者大会 WWDC 2019 在北京时间今天凌晨开幕。在这场大会上除了「史上最难看 Mac 主机」、首次出现的iPadOS以外，我们还终于可以对饱受诟病的iTunes说再见了。而对于开发者来说，新发布的 SwiftUI 可能是最吸引人的特性，在苹果公司软件工程高级副总裁Craig Federighi的演示中，我们可以轻松地把一百行的前端代码缩减到十几行。

04

掌握 ViewThatFits

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

01

如何在 SwiftUI 中创建条形图

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

01

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

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

02

SwiftUI 布局 —— 尺寸（上）

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

02

为什么 SwiftUI 的修饰符顺序很重要

每当我们将修饰符应用于 SwiftUI 视图时，我们实际上都会创建一个，应用了更改的新视图 —— 我们不仅仅是修改现有的视图。如果你仔细想想，这种行为是有道理的 —— 我们的视图仅保留我们赋予它们的确切属性，因此，如果我们设置背景颜色或字体大小，则无处存储该数据。

02

SwiftUI - 百行代码变十行，Swift再创辉煌

这种声明式的方式甚至允许使用复杂的功能，如动画（animation）。只需要几行代码，即可添加动画在任何控件上，并且可以使用易于调用的特效。在运行时，SwifthUI 会自行控制创建流畅动作的所有步骤，并且可以解决程序冲突，保证 app 稳定运行。动画特效变得如此容易，我们可以发掘使 app 更加灵动的方式。

03

CSS学习笔记：表格样式，图片样式【7/27】

默认情况下，表格标题是在表格的顶部，属性为：top，如果想把标题放在底部，属性为：bottom。

01

SwiftUI-开发iOS项目

Xcode 11 + macOS 10.15 可以实时预览 SwiftUI 实现的界面，这个预览可以帮助我们快速查看代码对应的效果而不需要运行。

01

SwiftUI 布局协议 - Part 1

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

01

自定义角标库

前言角标的需求在app是经常需要用到的,比如未读通知/信息等,一般,我们可以通过嵌套相对布局的方式来设置角标,但是除了TextView，可能Button,ImageView等也需要,那只能写多次这类布局了,而且角标的位置,颜色,形状的多变,自然而然，我们就需要把这些类似的需求归纳后，做出一个通用大部分情况的自定义View.今天给大家介绍我自己定义的角标库和基本构思过程. 特性: 1.TipTextView：提供四种模式,固定模式，(默认/居中)环绕模式，垂直居中环绕模式和水平居中环绕模式,其中固

07

为什么SwiftUI修饰符顺序很重要？

每当我们将修饰符应用于SwiftUI视图时，我们实际上都会创建一个应用了更改的新视图——我们不仅会修改现有的视图。如果您考虑一下，这种行为是有道理的——我们的视图仅保留我们赋予它们的确切属性，因此，如果我们设置背景颜色或字体大小，则无处存储该数据。

01

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

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

02

SwiftUI 与 Core Data —— 数据获取

本文中我们将探讨在 SwiftUI 视图中批量获取 Core Data 数据的方式，并尝试创建一个可以使用 mock 数据的 FetchRequest。由于本文会涉及大量前文[1] 中介绍的技巧和方法，因此最好一并阅读。

03

高级 SwiftUI 动画 — Part 1：Paths

在本文中，我们将深入探讨一些创建 SwiftUI 动画的高级技术。我将广泛讨论 Animatable[1] 协议，它可靠的伙伴 animatableData[2]，强大但经常被忽略的 GeometryEffect[3] 以及完全被忽视但全能的 AnimatableModifier[4] 协议。

02

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

本文将通过一段可复现的“灵异代码”，对 State 注入优化机制、模态视图（ Sheet、FullScreenCover ）内容的生成时机以及不同上下文（相互独立的视图树）之间的数据协调等问题进行探讨。

02

SwiftUI 与 Core Data —— 数据定义

在上文中，我列举了一些在 SwiftUI 中使用 Core Data 所遇到的困惑及期许。在今后的文章中我们将尝试用新的思路来创建一个 SwiftUI + Core Data 的 app，看看能否避免并改善之前的一些问题。本文将首先探讨如何定义数据。

04

在 Text 中实现基于关键字的搜索和定位

前些日子，一位网友在聊天室中就如下的问题[3] 与大家进行了交流与探讨 —— 如何通过 Text + AttributedString 实现类似文章关键字检索的功能，并可通过按钮在搜索结果中进行滚动切换？

03

Ask Apple 2022 中与 Core Data 有关的问答 (下）

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

02

百行代码变十行，苹果SwiftUI可视化编程让开发者惊呼完美

Swift 是苹果于 2014 年发布的全新开发语言，可与 Objective-C* 共同运行于 macOS 和 iOS 平台，用于搭建基于苹果平台的应用程序。Swift 的设计以安全为出发点，以避免各种常见的编程错误类别。近年来，这种编程语言的热度上升很快，甚至有人呼吁用它来代替 Python，作为 TensorFlow 支持的语言。

01

SwiftUI 4.0 的全新导航系统

长久以来，开发者对 SwiftUI 的导航系统颇有微词。受 NavigationView 的能力限制，开发者需要动用各种技巧乃至黑科技才能实现一些本应具备基本功能（例如：返回根视图、向堆栈添加任意视图、返回任意层级视图、Deep Link 跳转等）。SwiftUI 4.0（ iOS 16+ 、macOS 13+ ）对导航系统作出了重大改变，提供了以视图堆栈为管理对象的新 API ，让开发者可以轻松实现编程式导航。本文将对新的导航系统作以介绍。

06

SwiftUI 状态管理系统指南

SwiftUI与苹果之前的UI框架的区别不仅仅在于如何定义视图和其他UI组件，还在于如何在整个使用它的应用程序中管理视图层级的状态。

02

SwiftUI 布局：如何自定义 AlignmentGuides

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

01

SwiftUI 动画进阶 — Part 5：Canvas

这个高级SwiftUI动画系列的第五部分将探索Canvas视图。从技术上讲，它不是一个动画视图，但当它与第四部分的 TimelineView 结合时，它带来了很多有趣的可能性，正如这个数字雨的例子所示。

01

高级 SwiftUI 动画 — Part 3：AnimatableModifier

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

01

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

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

02

SwiftUI 之 HStack 和 VStack 的切换

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

01

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭