开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

如何为SwiftUI矩形添加两种不同的颜色？

在SwiftUI中，可以使用background()修饰符为矩形添加不同的颜色。以下是两种不同颜色的示例：

使用LinearGradient添加渐变色：

Rectangle()
    .fill(LinearGradient(gradient: Gradient(colors: [Color.red, Color.blue]), startPoint: .leading, endPoint: .trailing))
    .frame(width: 200, height: 100)

这个示例使用LinearGradient创建了一个从红色到蓝色的渐变色，并将其作为矩形的填充色。

使用overlay()添加叠加视图：

Rectangle()
    .fill(Color.red)
    .frame(width: 200, height: 100)
    .overlay(
        Rectangle()
            .fill(Color.blue)
            .frame(width: 100, height: 100)
    )

这个示例中，我们首先创建一个红色的矩形，然后使用overlay()将一个蓝色的矩形叠加在上面。

以上是两种为SwiftUI矩形添加不同颜色的方法。根据具体需求，可以选择使用渐变色或叠加视图来实现不同的效果。

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

相关搜索:Chartjs-plugin:如何为每个标签添加不同的颜色？CSS:如何为输入的单选按钮标签添加不同颜色的边框？React原生SafeAreaView背景颜色-如何为屏幕顶部和底部分配两种不同的背景颜色？SwiftUI ActionSheet为每个操作提供不同的颜色 VUE中有两种不同颜色的背景为圆形图像添加两种颜色的边框具有不同大小的矩形和颜色的热图创建大小相同但背景颜色不同的不同矩形如何为cpairs图中的颜色添加图例如何为上调基因和下调基因赋予两种不同的颜色？

相关搜索:

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

有帮助

没帮助

相关·内容

用 SwiftUI 实现 3D Scroll 效果

我们预览下今天要实现的 3D scroll 效果。学完本教程后，你就可以在你的 App 中把这种 3D 效果加入任何自定义的 SwiftUI 视图。下面我们来开始本教程的学习。

02

SwiftUI：特殊效果 - 模糊，混合模式等

SwiftUI使我们能够出色地控制视图的呈现方式，包括应用实时模糊，混合模式，饱和度调整等功能。

06

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

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

02

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

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

04

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

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

01

好看的图表怎么画，看完这几个 API 你就会了

在正式的开始编码之前，我们先来熟悉一下 SwiftUI 提供的一些绘制图形和图形特效的 API 吧！

01

自定义 Button 的外观和交互行为

通过 Style 改变组件的外观或行为是 SwiftUI 提供的一项非常强大的功能。本文将介绍如何通过创建符合 ButtonStyle 或 PrimitiveButtonStyle 协议的实现，自定义 Button 的外观以及交互行为。

06

使用SwiftUI创建万花尺

为了完成一些真正意义上的绘图工作，我将带您通过创建一个简单的带SwiftUI的spirograph。“Spirograph”是一种玩具的商标名称，你把一支铅笔放在一个圆圈里，然后绕着另一个圆圈的圆周旋转，创造出各种几何图案，称为轮盘赌——就像赌场游戏一样。

01

SwiftUI TextField进阶——格式与校验

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

02

高级 SwiftUI 动画 — Part 1：Paths

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

02

Mac最新Flutter环境搭建运行和对比理解声明式UI

这段时间一直都在学习和写关于SwiftUI的东西，前面也总结了四篇文章来大体上说了下Demo中功能实现的一些细节，后面准备开始了解学习一下Flutter，争取在年前能再用Flutter写一份项目Demo 出来，这个事在进行中，有需要的小伙伴可以关注一下后续的文章，今天先从概念性和环境搭建运行出发，也是对这段时间通过SwiftUI的学习对声明式UI的理解来说说它到底是啥，希望能更好的理解一下声明式UI这个概念。

01

如何在 SwiftUI 中创建条形图

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

01

SwiftUI 中布局的工作原理

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

02

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

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

03

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

在 WWDC 2023 中，苹果为 SwiftUI 添加了一个新的修饰器：geometryGroup()。它可以解决一些之前无法处理或处理起来比较困难的动画异常。本文将介绍 geometryGroup() 的概念、用法，以及在低版本 SwiftUI 中，在不使用 geometryGroup() 的情况下如何处理异常。

01

使用 SwiftUI 创建万花尺

为了完成一些真正意义上的绘图工作，我将带您通过创建一个简单的带 SwiftUI 的 spirograph。“Spirograph”是一种玩具的商标名称，你把一支铅笔放在一个圆圈里，然后绕着另一个圆圈的圆周旋转，创造出各种几何图案，称为轮盘赌——就像赌场游戏一样。

01

SwiftUI中的水平条形图

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

02

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

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

02

在SwiftUI中使用UIKit视图

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

02

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

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

03

SwiftUI 的动画机制

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

04

SwiftUI 动画进阶 — Part 5：Canvas

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

01

掌握 SwiftUI 的 Safe Area

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

03

在 SwiftUI 视图中打开 URL 的若干方法

本文将介绍在 SwiftUI 视图中打开 URL 的若干种方式，其他的内容还包括如何自动识别文本中的内容并为其转换为可点击链接，以及如何自定义打开 URL 前后的行为等。

03

SwiftUI：自定义 Shape 使用 InsettableShape 协议实现向内绘制边框

如果创建的形状没有特定大小，它将自动扩展以占据所有可用空间。例如，这将创建一个填充我们视图的圆，并为其提供40点蓝色边框：

04

WWDC - SwiftUI - 初恋般的感觉

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

01

在 SwiftUI 中实现音频图表

在可访问性方面，图表是复杂的事物之一。iOS 15 引入了一项名为“音频图表”的新功能。

01

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

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

02

WWDC 23 ，SwiftUI 5 和 SwiftData 的初印象

WWDC 2023 正在如火如荼地进行。苹果不仅带来了全新形态的硬件产品，还推出了几个相当震撼的新框架。本文将聊聊我对本届 WWDC 中 SwiftUI 5.0 和 SwiftData 的初步印象。

02

为 @CloudStorage 添加了类 @Published 的能力

我重新修改了 CloudStorage 的代码，现在可以同 AppStorage 完全一样将 UserDefaults 和 NSUbiquitousKeyValueStore 汇总到一起，在 SwiftUI 中统一管理了。

02

WWDC 23 ，SwiftUI 5 和 SwiftData 的初印象

WWDC 2023 正在如火如荼地进行。苹果不仅带来了全新形态的硬件产品，还推出了几个相当震撼的新框架。本文将聊聊我对本届 WWDC 中 SwiftUI 5.0 和 SwiftData 的初步印象。

01

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

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

02

从用SwiftUI搭建项目说起

后续这个SwiftUI分类的文章全部都是针对SwiftUI的日常学习和理解写的，自己利用Swift写的第二个项目也顺利上线后续的需求也不是特着急，最近正好有空就利用这段时间补一下自己对SwiftUI的理解，这个过程当中正好把整个学习过程记录下来，方便自己查阅，也希望能给需要的同学一点点的帮助。由于自己还欠着RxSwift的帐，这次也是想着先放弃别的账务（欠的的确挺多的）先全心全意的把这两块的帐给补补，希望补上这笔账之后自己对Swift的理解也能上一个台阶，对Siwft的理解自认为还是感觉欠缺的，不算是真的深入的掌握，我对SwiftUI也是在学习当中，现在能查阅的关于SwiftUI的资料很多是需要收费的，遇到问题只能想办法努力解决，有写的不钟意的地方，希望多加指正！

02

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

List 可能是 SwiftUI 附带的内置视图中最常用的一种，它使我们能够在任何 Apple 平台上呈现“类似于表格视图”的用户界面。今年，List 获得了许多非常重要的升级，使其更加灵活和易于定制。让我们看看都有哪些新功能。

04

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

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

02

肘子的 Swift 周报 #022 ｜忙碌的一周

上周对苹果公司而言是相当忙碌的一周。他们发布了搭载 M3 芯片的 MacBook Air、推出 iOS 17.4 版本让欧盟用户可以接入第三方应用商店，并且在官网上对 Spotify 和欧盟表达了不满，同时还暂停了 Epic 的开发者账户（据悉将很快恢复）。此外，苹果还发布了 Xcode 15.3 版本，并随之带来了 Swift 5.10 的更新。

01

打造可适配多平台的 SwiftUI 应用

本文是笔者参加 2023 年 4 月 20 日 “SwiftUI 技术沙龙（北京站）” 活动的分享内容。基于记忆整理而成。有关本次活动的情况，可以参阅我在北京参加 SwiftUI 技术沙龙[1] 一文。

01

掌握 Transaction，实现 SwiftUI 动画的精准控制

SwiftUI 因其简便的动画 API 与极低的动画设计门槛而广受欢迎。但是，随着应用程序复杂性的增加，开发者逐渐发现，尽管动画设计十分简单，但要实现精确细致的动画控制并非易事。同时，在 SwiftUI 的动画系统中，有关 Transaction 的解释很少，无论是官方资料还是第三方文章，都没有对其运作机制进行系统的阐述。

02

【visionOS】从零开始创建第一个visionOS程序

visionOS是苹果Vision Pro的操作系统。将visionOS与熟悉的工具和技术一起使用，为空间计算构建沉浸式应用程序和游戏。

04

SwiftUI WWDC作为开发者的我最激动的部分

我们都知道前端工作离不开适配，虽然之前Apple Xib的一些设计适配起来很方便了。但是在pad或者tv上还是要写不同的代码去做在不同的平台运行。

03

SwiftUI 锁屏小组件

iOS 呼声最高的功能之一是可定制的锁屏。终于，在最新发布的 iOS 16 得以实现。我们可以用可浏览的小组件填充锁屏。实现锁屏小组件很简单，因为它的 API 与主屏小组件共享相同的代码。本周我们将学习如何为我们的 App 实现锁屏小组件。

01

打造可适配多平台的 SwiftUI 应用

本文是笔者参加 2023 年 4 月 20 日 “SwiftUI 技术沙龙（北京站）” 活动的分享内容。基于记忆整理而成。有关本次活动的情况，可以参阅我在北京参加 SwiftUI 技术沙龙一文。

08

Apple Widget：下一个顶级流量入口？

2020 年 6 月 22 日，苹果召开了第一次线上的开发者大会 - WWDC20。这可谓是一次可以载入史册的发布会，宣布了 ARM 架构 Mac 芯片、软硬件的生态大统一、iOS 14 系统界面大改等一系列激动人心的消息。

02

SwiftUI 视图的生命周期研究

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

03

TCA - SwiftUI 的救星？(一)

打算用几篇文章介绍一下 TCA (The Composable Architecture[1])，这是一种看起来非常契合 SwiftUI 的架构方式。

03

在 SwiftUI 中用 Text 实现图文混排

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

03

SheetKit——SwiftUI模态视图扩展库

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

02

SwiftUI 状态管理系统指南

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

02

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

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

03

肘子的 Swift 周报 #017 | 新博客的数据盘点

去年 12 月 25 日，我的博客经过重新设计后正式上线。这次改版的一个重要变化是提供了文章的中英文两个版本，并且我也停止了在中国其他技术平台上更新文章。一个月后，即从 12 月 25 日至 1 月 23 日，博客的访问数据呈现出显著的变化：

01

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭