首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在SwiftUI中使用SF圆角字体?

在SwiftUI中使用SF圆角字体,可以通过自定义字体样式来实现。以下是详细步骤和示例代码:

基础概念

SwiftUI是苹果推出的一个声明式UI框架,用于构建iOS、macOS、watchOS和tvOS的应用程序。SF圆角字体(San Francisco Rounded)是苹果公司设计的一种字体,通常用于苹果的操作系统和应用程序中。

相关优势

  1. 美观:SF圆角字体设计精美,视觉效果良好。
  2. 一致性:使用苹果官方字体可以确保应用程序与苹果生态系统的一致性。
  3. 易用性:SwiftUI提供了简洁的API,使得自定义字体样式变得容易。

类型

SF圆角字体主要有以下几种类型:

  • SF Pro Rounded
  • SF Compact Rounded

应用场景

适用于需要自定义字体样式的iOS应用程序,特别是那些追求美观和一致性的应用。

示例代码

以下是如何在SwiftUI中使用SF圆角字体的示例代码:

代码语言:txt
复制
import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Hello, SwiftUI!")
                .font(.system(size: 24, weight: .bold, design: .rounded))
                .foregroundColor(.blue)
                .padding()
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

解释

  1. 导入SwiftUI:首先导入SwiftUI框架。
  2. 创建视图:创建一个ContentView结构体,继承自View
  3. 设置字体:在Text视图中使用.font()修饰符来设置字体样式。.system(size: 24, weight: .bold, design: .rounded)表示使用系统字体,大小为24,粗体,设计为圆角。
  4. 设置颜色和间距:使用.foregroundColor().padding()修饰符来设置文本颜色和外边距。

参考链接

SwiftUI Text View

通过以上步骤和示例代码,你可以在SwiftUI中轻松使用SF圆角字体。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

何在 SwiftUI 熟练使用 sensoryFeedback 修饰符

下面我们将学习如何使用 sensoryFeedback 修饰符在应用程序的不同操作中提供触觉反馈。...背景介绍在 iOS 17 之前,如果你想要从 SwiftUI 视图中向用户提供触觉反馈,你会使用其中一个 UIKit(或 AppKit)的反馈生成器。...= nil { generator.selectionChanged() } } }}在 iOS 17 ,Apple 直接向 SwiftUI 添加了一系列感觉反馈的视图修饰符...预定义样式SwiftUI 提供了许多预定义的反馈样式, success、warning、error、selection、increase、decrease、start、stop、alignment、levelChange...在闭包,返回一个布尔值,指示是否应播放反馈。使用反馈闭包触发要控制播放何种反馈,请使用视图修饰符的反馈闭包版本。

12621

何在 SwiftUI 熟练使用 visualEffect 修饰符

前言在 WWDC 23 SwiftUI 引入了一个名为 visualEffect 的新视图修饰符。此修饰符允许我们通过访问特定视图的布局信息来附加一组可动画化的视觉效果。...下面我们将学习如何在 SwiftUI使用新的 visualEffect 视图修饰符。介绍 visualEffect让我们从使用 visualEffect 视图修饰符的最简单示例开始。...在 SwiftUI 框架的先前版本,我们有视图修饰符,缩放、偏移、模糊、对比度、饱和度、不透明度、旋转等。它们全部都是视觉效果,并且现在符合 VisualEffect 协议。...因此,你可以继续使用它根据视图在视图层次结构的框架和边界来动画化视图的视觉外观。...总结本文章介绍了在 SwiftUI 引入的新视图修饰符 visualEffect。该修饰符允许我们通过访问特定视图的布局信息来附加一组可动画的视觉效果。

11911
  • SwiftUI 中用 Text 实现图文混排

    一个和一组在 SwiftUI ,Text 是使用频率最高的几个组件之一,几乎所有的文字显示操作均由其完成。随着 SwiftUI 版本的不断提升,Text 的功能也得到持续地增强。...SF SymbolsSF Symbols[5] 是苹果为开发者带来的一份厚礼,让开发者可以在苹果生态近乎免费地使用由专业设计师创建的海量图标。...在 SwiftUI ,我们需要通过 Image 来显示 SF Symbols,并可使用一些修饰器来对其进行设置:Image(systemName: "ladybug") .symbolRenderingMode...image-20220814173320321在 SwiftUI ,除非进行了特别的设置,否则所有字体的尺寸都会跟随动态类型的变化而变化。...image-20220815082801108标签采用了圆角背景,意味着基于 AttributedString[9] 的解决方案被排除标签特定的尺寸与内容,意味着基于自定义 SF Symbols 的解决方案被排除通过在

    4.4K30

    iOS16 的 3 种新字体宽度样式

    前言 在 iOS 16 ,Apple 引入了三种新的宽度样式字体SF 字体库。...SF 字体和新的宽度样式 如何将 SF 字体和新的宽度样式一起使用 为了使用新的宽度样式,Apple 有一个新的 UIFont 的类方法来接收新的 UIFont.Width 。...目前(Xcode 16 beta 6),这种新的宽度样式和初始值设定只能在 UIKit 中使用,幸运的是,我们可以在 SwiftUI 轻松的使用它。...Apple 将它使用在他们的照片app ,在 "回忆'' 功能,通过组合不同的字体宽度和样式在标题或者子标题上。 这里有一些不同宽度和样式的字体组合,希望可以激发你的灵感。...基本上,除了在模拟器的模拟系统 UI ,在任何地方都被禁止使用 SF 字体。请确保你在使用前阅读并理解许可证。

    1.4K20

    何在 SwiftUI 创建悬浮操作按钮

    尽管它来自 Android,但在一些 iOS 应用也可以看到这种模式。以下是 Twitter 应用悬浮操作按钮的示例。Twitter App 在最重要的操作步骤,发布推文时使用悬浮操作按钮。...创建悬浮操作按钮如何 SwiftUI 创建一个类似 Twitter App 的悬浮按钮。实现悬浮操作按钮可能有很多方法,下面是我要实现按钮的一些简单需求,如下:悬浮按钮应该出现在屏幕的主要内容前面。...示例运行截图如下:使悬浮按钮呈现圆形接着,是需要实现需求的第三步,使悬浮按钮具有圆角形状,并在中心具有一个图标。目前的情况位置是正确的,但外观还不符合要求。....tabItem { Label("Home", systemImage: "house") } } }}更改了字体样式...总结在本文中,我们学习了如何在 SwiftUI 创建一个悬浮操作按钮,它是 Android 和 Material Design 中常用的 UI 元素。通过逐步实现悬浮按钮的各个特性来完成这个过程。

    14432

    SwiftUI 实战使用 MapKit API

    前言SwiftUI 与 MapKit 的集成在今年发生了重大变化。在之前的 SwiftUI 版本,我们将 MKMapView 的基本功能封装到名为 Map 的 SwiftUI 视图中。...幸运的是,事情发生了变化,SwiftUI 引入了与 MapKit 集成的新 API。本篇文章我们将学习如何在 SwiftUI 的最新版本中使用可用的新功能丰富的 API 与 MapKit 集成。...正如我之前所说,在 SwiftUI 框架的早期版本,我们有一个 Map 视图,为我们提供了 MapKit 的基本功能,该功能现在已被弃用。...MapContentBuilder 类型与符合 MapContent 协议的任何类型一起使用。在我们的示例,我们使用了 Marker 和 Annotation 类型。...MapInteractionModes 类型定义了一组交互,平移、俯仰、旋转和缩放。默认情况下,它启用所有可用的交互类型。总结今天,我们学习了在 SwiftUI 中集成 MapKit 的基础知识。

    12100

    何在 SwiftUI 创建条形图

    系列文章 如何在 SwiftUI 创建条形图 SwiftUI 的水平条形图 在 iOS 16 中用 SwiftUI Charts 创建一个折线图 在 iOS16 中用 SwiftUI 图表定制一个线图...在 Swift 图表中使用 Foudation 库的测量类型 开始图表布局 SwiftUI 对探索不同布局和预览实时视图结果是很友好的。...数据的最大值得到后并传递给每个 BarView。主图表区域保持原来的圆角矩形,并以水平堆叠的方式叠加一系列条形,每个 DataItem 一个。...条形图上的值使用叠加视图修改移到了条形图的顶部。这个值是偏移的,所以文本不会离条形图的顶部太近。数据名称的字体大小和字重也可以被设置。...SwiftUI 是一个很好的平台,用于创建视图和快速重构独立的子视图。在 SwiftUI 构建条形图需要做一些工作,随着使用数据来试用条形图,可以确定更多的定制化。

    5.2K10

    Ask Apple 2022 与 SwiftUI 有关的问答(上)

    使用 environmentObject 的情况下,如何避免创建实例的视图被重新计算Q:如何在避免重新计算顶层视图 body 的情况下,在不同子树的两个子视图之间共享状态( 例如 ObservableObject...阅读 SwiftUI 的动画机制[8] 一文,了解更多有关动画的内容。自适应高度 SheetQ:如何在 iOS16 呈现与动态内容高度相匹配的 Sheet?...对于非惰性视图( LazyVStack ),一旦 hosting controller 的视图被初始化,onAppear 将被调用。...image-20221022135326560San Francisco 宽度风格Q:如何在 SwiftUI 如何使用 SF 字体家族新增的三种宽度风格( Compressed、Condensed、Expanded...A:你可以使用 fontWidth 修饰器来进行调整。很遗憾,仅支持 SF,对中文没有效果。阅读 How to change SwiftUI Font Width[18] 一文,了解具体用法。

    12.2K20

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

    点按弹窗的体验并没有止步于此,使用过新系统一段时间后,你会发现这个点按弹窗渗透到了系统应用的方方面面。...在手机应用,软件开发者会使用不同的技术来实现界面的显示,流行的界面语言比如 Flutter,就是闲鱼应用的交互界面语言。...SwiftUI 集众家之长,具有诸多优秀特性,可以预见它将会出现在诸多应用程序。若你有兴趣,我会在其它文章详解 SwiftUI,本文只着重讲其中弹窗的写法与逻辑。 你会怎样描述一个程序?...其中 View 表示一个视图,比如我们在手机上看到的一个滑条,一张图片,一个列表等种种,都叫做视图;而 Modifier 则是修饰器,它的作用是为视图增加功能,比如圆角,动画,阴影,边际,背景等等。...中文里圆括号的各种要求,正是 SwiftUI 里的各种修改器,语法结构是 「.修改器的名字」。比如下图中我们想修改为小标题的字体,就写 .font(.headline)。 ?

    2.1K40

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

    PrimitiveButtonStyle 定制交互行为在 SwiftUI ,Button 默认的交互行为是在松开按钮的同时执行 Button 指定的操作。...而 TapGesture 在不松开手指的情况下,如果移动到可点击区域外,SwiftUI 将不会调用 onEnded 闭包的操作。...,使用 tint 颜色作为背景色BorderedProminentButtonStyle:为按钮添加圆角矩形背景,背景颜色为系统强调色其中,PlainButtonStyle 除了可以应用于 Button...不再调用其指定的闭包操作,附加手势需在 Button 之外添加( 例如下文的 simultaneousGesture 实现 )为按钮添加 Trigger在 SwiftUI ,为了判断某个按钮是否被按下...希望在未来的版本SwiftUI 可以为开发者提供更加强大的自定义组件能力。希望本文能够对你有所帮助。

    3.7K60

    Ask Apple 2022 与 SwiftUI 有关的问答(下)

    鉴于动态文本大小在应用程序运行时可能会发生变化,衡量给定字体的文本大小的最佳方法是什么?A:你好!我们新的布局协议支持这个功能。...Swiftcord[12] 的代码展示了如何在 SwiftUI 下实现倒置列表。阅读 优化在 SwiftUI List 显示大数据集的响应效率[13] 一文,了解苹果工程师推荐的方法。...macOS APIQ:对于运行 Monterey 的 Mac,能否如何在 SwiftUI 实现下面需求的建议:打开一个窗口在该窗口中初始化数据找到所有打开的窗口确定一个窗口是否打开从不在该窗口的视图中关闭一个窗口...其中 2 个是自定义形状( 基本上是圆角矩形,只有两个角是圆的 ),其中一个是矩形。编译器抛出一个错误,说它花了太多时间来检查视图的类型。...在 SwiftUI 早期版本,当在 iOS 中使用系统中文输入法时,很容易触发这种情况。但后期逐步得到了修复。近期,在聊天室我也看到了类似的讨论( 我本人尚未在 iOS 16 上遇到 )。

    14.8K30

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

    SwiftUI 使用统一的一套工具和 API,即可创建在任意苹果设备使用的用户界面。通过定义一个易读易写的声明式 Swift 语法,SwiftUI 可以顺畅的和 Xcode 工具一起完成设计工作。.../ SwiftUI 的特点是什么 SwiftUI 使用声明式语法,所以我们可以简单地声明用户界面的样式。...这种声明式的方式甚至允许使用复杂的功能,动画(animation)。只需要几行代码,即可添加动画在任何控件上,并且可以使用易于调用的特效。...SwiftUI 可以在需要的时候自动计算并渲染。 ? 设计工具 Xcode 11 内建了非常直观的新设计工具,我们可以通过 SwiftUI 使用拖放等简单操作而构建界面。...这些视觉编辑器在代码编辑器也能用,所以我们可以使用检查器挖掘每个控件的不同选项,即使在界面的手动编程部分也是一样的。我们可以从库拖拽控件,再放入到设计面板或代码面板都是可以的。

    4.1K10

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

    初体验:左边加大括号21行,右边出现一些类似SB的东西,布局UI,设置属性貌似都可以完成 // SwiftUI 的特点是什么 // SwiftUI 使用声明式语法,所以我们可以简单地声明用户界面的样式。...开发者可以声明需要由一串文本输入框构成的组件 然后定义每一个输入框的字体对齐方式、字体样式、字体颜色。 这些代码比以往更加易懂,省时并易于维护。...这种声明式的方式甚至允许使用复杂的功能,动画(animation)。只需要几行代码,即可添加动画在任何控件上,并且可以使用易于调用的特效。...// SwiftUI 使用了声明式语法,所以开发者能够十分轻易地描述用户界面应该做什么。...// 拥有更直观的新设计工具 // Xcode 11 包含更直观的新设计工具,可让开发者通过拖拽的方式使用 SwiftUI 构建界面,在这过程可以直接设置控件的相关属性。

    3K40

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

    而对于开发者来说,新发布的 SwiftUI 可能是最吸引人的特性,在 苹果公司软件工程高级副总裁Craig Federighi的演示,我们可以轻松地把一百行的前端代码缩减到十几行。...开发者可以声明需要由一串文本输入框构成的组件 然后定义每一个输入框的字体对齐方式、字体样式、字体颜色。 这些代码比以往更加易懂,省时并易于维护。...这种声明式的方式甚至允许使用复杂的功能,动画(animation)。只需要几行代码,即可添加动画在任何控件上,并且可以使用易于调用的特效。...SwiftUI 使用了声明式语法,所以开发者能够十分轻易地描述用户界面应该做什么。...拥有更直观的新设计工具 Xcode 11 包含更直观的新设计工具,可让开发者通过拖拽的方式使用 SwiftUI 构建界面,在这过程可以直接设置控件的相关属性。

    2.3K30

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

    绘制一个带圆角的矩形 RoundedRectangle(cornerRadius: 4) 用颜色或渐变填充此形状。...实现的效果如下: image 绘制一个圆角矩形,这里需要用到 RoundedRectangle 这个结构体,在 SwiftUI 的定义如下: @frozen public struct RoundedRectangle...public typealias Body } 通过代码可知,我们只需要在初始化的时候传入一个设置圆角大小的值即可生成一个圆角矩形,又由于 RoundedRectangle 继承自 Shape,所以我们可以使用...Shape 的特性来对生成的圆角矩形添加效果。...达到让原本尖锐的波浪线呈现一种缓和的效果,有点类似 PS 里的钢笔工具,用到的相应 API 为: ublic mutating func addQuadCurve(to p: CGPoint, control cp: CGPoint) 使用方式代码所示

    2.9K10

    肘子的 Swift 周报 #036 | WWDC 2024 观后感

    苹果在演示展现了其对 AI 的理解:避免华而不实的技术炫耀,重视隐私保护,让 AI 技术自然融入日常操作,并利用设备与用户之间的紧密联系,借助更丰富的上下文信息,提供更为个性化的 AI 体验。...在此次 WWDC ,苹果一既往地展现了对 Swift 的热情和更开放的态度。除了继续加大对社区的支持,苹果推出的新官方框架和应用显著提升了 Swift 的应用广度。...这些措施无疑将进一步激发社区的活力,增强开发者对使用 Swift 的信心。 SwiftData SwiftData 的最新版本带来了意外的震撼。...在这次更新SwiftUI 团队转变了其以往的 API 设计策略——过往的设计高度封装且调整空间较小,现在则为开发者提供了更多的底层控制能力。...随着 SwiftUI 与 UIKit 框架之间动画、转场和手势等机制的共享,SwiftUI 正逐渐从仅基于 UIKit/AppKit 的框架,转变为与苹果生态其他 UI 框架更平等的合作伙伴。

    11910

    swift项目中新的字体如何加入

    最近的项目中UI设计采用了一些并不是系统的字体,那么如何在项目中使用呢? 该教程总共 步骤 步骤1: 将字体库导入到项目中 .otf或者。...ttf的字体库 步骤2:在项目中的info.plist文件增加Fonts provided by application 选项,类型为Array,然后增加item ,内容为SF-Pro-Rounded-Bold.otf...build phase的Copy Bundle Resources 要添加引用,否则无效 步骤4:查看字体的名字,因为加入的字体名字并不一定是文件名,那么就需要看真正的引入时的文件名到底是啥 步骤5...:使用字体 下边来详细的说明以上步骤: 步骤1: ?...步骤4: 我可以采用代码的方式输出所有的字体,然后再在里边找新增的是哪一个 // let fontName = UIFont(name: "SF Pro Rounded", size: 17

    1.4K10

    最新iOS设计规范七|10大视觉规范(Visual Design)

    设备屏幕尺寸和方向 iOS设备具有各种屏幕尺寸,可以纵向或横向使用。在iPhone X和iPad Pro等边对边设备,显示屏的圆角与设备的整体尺寸非常匹配。...但是,在某些情况下,例如在航班跟踪APP,可以更清楚地显示航班开始的日期和时区。 九、字体排版(Typography) San Francisco (SF)是iOS的系统字体。...这种字体的设计进行了优化,使文本具有非常好的易读性、清晰度和一致性。 Apple提供了两种类型的系列,您可以在iOS应用程序中使用它们。 San Francisco(SF)。...SF Pro是iOS,macOS和tvOS的系统字体SF Compact是watchOS的系统字体。设计为与平台用户界面的视觉清晰度相匹配,系统字体清晰易懂。 ? New York(NY)。...纽约是一种衬线字体,提供独特的色调,旨在补充SF字体。NY在图形显示环境(大尺寸)的效果与在阅读环境(文本尺寸)的效果一样。 ?

    8K30
    领券