SwiftUI极简教程01:搭建一个新项目&Text文字的使用

简介: SwiftUI极简教程01:搭建一个新项目&Text文字的使用

在本章中,你将学会如何使用Xcode创建一个SwifUI项目。


首先,启动Xcode,在顶栏创建一个新项目,选择File,New,Project。


image.png

在iOS类目下,选择App,选择Next继续到下一个屏幕并键入项目的名称。

image.png

完善项目基本信息:


  • 项目名称:UIText,当然也可以使用其他名称;
  • 组织名称:可以设置为“公司”或“个人组织”;
  • 组织标识符:该应用程序的唯一标识符;
  • 反向域名:自动生成,组织标识符+项目名称;
  • 用户界面:选择SwiftUI;
  • 语言:选择Swift;

image.png

点击Next,选择文件保存目录后,我们将成功创建一个SwiftUI项目。

image.png


下面,我们学习下Text文字的使用。

在ContentView.swift文件中,我们可以看到生成的示例代码。


Text("Hello World”)
    .padding()


该代码初始化了一个文本,我们在模拟器上可以看到显示了Hello World文本,这是创建文本视图的基本语法。当然你也可以更改为想要的任何值,并在画布显示你更改的内容。

image.png

在SwiftUI中,可以通过调用Modifiers的方法来改变控件的属性,像改变文字颜色、字体大小、字体样式等;

常见的方法如下:


//设置字重,示例:字体加粗
Text("Hello World”)
    .fontWeight(.bold)    //设置字重


image.png

//设置字体样式,示例:标题样式
Text("Hello World”)
    .fontWeight(.bold)
    .font(.title)    //设置字体样式

image.png

//设置字体大小,示例:17号
Text("Hello World”)
    .fontWeight(.bold)
    .font(.system(size: 17))    //设置字体大小

image.png

//设置字体颜色,示例:蓝色
Text("Hello World”)
    .fontWeight(.bold)
    .font(.system(size: 17))
    .foregroundColor(.blue)    //设置字体颜色

image.png

//设置边距,为控件建立更大的空间
Text("Hello World”)
    .fontWeight(.bold)
    .font(.system(size: 17))
    .foregroundColor(.blue)
    .padding()    //设置边距

image.png

//设置阴影,示例:阴影颜色黑色,阴影半径10
Text("Hello World”)
    .fontWeight(.bold)
    .font(.system(size: 17))
    .foregroundColor(.blue)
    .shadow(color: Color.black, radius: 10)    //设置阴影
    .padding()

image.png

//设置阴影,示例:阴影颜色黑色,阴影半径10
Text("Hello World”)
    .fontWeight(.bold)
    .font(.system(size: 17))
    .foregroundColor(.blue)
    .shadow(color: Color.black, radius: 10)    //设置阴影
    .padding()

image.png

//设置背景颜色,示例:字体白色,背景颜色蓝色
Text("Text的常规用法")
     .fontWeight(.bold)
     .font(.system(size: 17))
     .foregroundColor(.white)
     .background(Color.blue)    //设置背景颜色
     .padding()

image.png

更多参数设置,来试试吧。

参数 名称 描述
.multilineTextAlignment() 对齐方式 .multilineTextAlignment(.center),文本中间对齐
.lineSpacing() 行间距 .lineSpacing(5),行间距5
.truncationMode() 截断模式 .truncationMode(.head),文本头部截断省略
.border() 边框 .border(Color.blue, width: 1),边框为蓝色,边框宽度为1
.blur() 模糊 .blur(radius: 1),模糊度1
.rotationEffect() 2D旋转 .rotationEffect(.degrees(20), anchor: UnitPoint(x: 0, y: 0)),00为起点旋转20度
.rotation3DEffect() 3D旋转 .rotation3DEffect(.degrees(60), axis: (x: 1, y: 0, z: 0)),空间坐标轴旋转60度


至此,第一天的内容就到这里了。



相关文章
|
1月前
|
开发框架 前端开发 搜索推荐
标题:【专栏:CSS进阶篇】CSS样式重置与框架:快速构建统一风格的网页
【4月更文挑战第30天】本文探讨了CSS样式重置和框架在确保网页跨浏览器一致性中的作用。样式重置通过消除默认样式差异实现一致外观,而CSS框架如Bootstrap提供预设样式和组件,加速开发并保证页面一致性。框架还有响应式设计和易于维护的优点,但也可能限制自定义和增加性能开销。选择使用哪种工具应根据项目需求、团队技能和设计复杂度来决定。开发者可结合使用两者以平衡灵活性和控制。
|
9月前
|
XML 数据格式 开发者
SAP UI5 初学者教程之二十一 - SAP UI5 的自定义格式器(Custom Formatter) 试读版
SAP UI5 初学者教程之二十一 - SAP UI5 的自定义格式器(Custom Formatter) 试读版
|
前端开发
前端知识学习案例17vs code-选中所有出现得文本
前端知识学习案例17vs code-选中所有出现得文本
54 0
前端知识学习案例17vs code-选中所有出现得文本
|
前端开发
前端知识学习案例14vs code-选中多行
前端知识学习案例14vs code-选中多行
52 0
前端知识学习案例14vs code-选中多行
|
前端开发
前端知识学习案例15vs code-选中当前行
前端知识学习案例15vs code-选中当前行
68 0
前端知识学习案例15vs code-选中当前行
|
前端开发
我用纯CSS实现了优惠券剪卡风格,UI小姐姐说....
在做商城类项目的时候,我们可能都会经历过“优惠券”这类需求,笔者在过往工作中,都是直接要求UI切图来实现,直到有一天产品告诉我一个奇思妙想:这个优惠券的宽度会随内容变化的!一下子让我陷入了人生的大思考,这样图片方式可不好整呐,因此萌生一个想法:能不能用纯css实现这些效果呢?
我用纯CSS实现了优惠券剪卡风格,UI小姐姐说....
|
索引
SwiftUI极简教程26:构建一个Banner图片轮播(下)
SwiftUI极简教程26:构建一个Banner图片轮播(下)
584 0
SwiftUI极简教程26:构建一个Banner图片轮播(下)
SwiftUI极简教程28:TextEditor多行文本框的使用
SwiftUI极简教程28:TextEditor多行文本框的使用
1074 0
SwiftUI极简教程28:TextEditor多行文本框的使用
|
存储 索引
SwiftUI极简教程42:使用MatchedGeometryEffect构建一个导航菜单
在本章中,你将学会使用MatchedGeometryEffect构建一个导航菜单。 在构建SwiftUI应用过程中,我们常常会使用TabView构建底部菜单,但更多的时候会由于我们定制化的需求,需要我们自己绘制底部菜单。 那么本章中,我们就来试试构建一个底部导航菜单。
390 0
SwiftUI极简教程42:使用MatchedGeometryEffect构建一个导航菜单
|
前端开发
web前端学习(十八)——CSS3表格属性(table)的相关设置
web前端学习(十八)——CSS3表格属性(table)的相关设置
web前端学习(十八)——CSS3表格属性(table)的相关设置