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度


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



相关文章
SwiftUI—使用Text视图创建漂亮的富文本
SwiftUI—使用Text视图创建漂亮的富文本
1207 0
SwiftUI—使用Text视图创建漂亮的富文本
|
4月前
|
前端开发
文本,paddocr的资料,base64转文字的相关源码,效果更好是点击button录了代码库
文本,paddocr的资料,base64转文字的相关源码,效果更好是点击button录了代码库
文本,paddocr的资料,base64转文字的相关源码,效果更好是点击button录了代码库
|
6月前
【鸿蒙软件开发】文本显示(Text/Span)
【鸿蒙软件开发】文本显示(Text/Span)
869 0
|
前端开发
前端知识学习案例17vs code-选中所有出现得文本
前端知识学习案例17vs code-选中所有出现得文本
70 0
前端知识学习案例17vs code-选中所有出现得文本
|
前端开发
前端知识学习案例15vs code-选中当前行
前端知识学习案例15vs code-选中当前行
81 0
前端知识学习案例15vs code-选中当前行
|
前端开发
前端知识学习案例14vs code-选中多行
前端知识学习案例14vs code-选中多行
64 0
前端知识学习案例14vs code-选中多行
SwiftUI极简教程28:TextEditor多行文本框的使用
SwiftUI极简教程28:TextEditor多行文本框的使用
1185 0
SwiftUI极简教程28:TextEditor多行文本框的使用
|
索引
SwiftUI极简教程26:构建一个Banner图片轮播(下)
SwiftUI极简教程26:构建一个Banner图片轮播(下)
712 0
SwiftUI极简教程26:构建一个Banner图片轮播(下)
|
存储 索引
SwiftUI极简教程42:使用MatchedGeometryEffect构建一个导航菜单
在本章中,你将学会使用MatchedGeometryEffect构建一个导航菜单。 在构建SwiftUI应用过程中,我们常常会使用TabView构建底部菜单,但更多的时候会由于我们定制化的需求,需要我们自己绘制底部菜单。 那么本章中,我们就来试试构建一个底部导航菜单。
452 0
SwiftUI极简教程42:使用MatchedGeometryEffect构建一个导航菜单
|
编解码 Swift iOS开发
SwiftUI极简教程24:构建一个Banner图片轮播(上)
SwiftUI极简教程24:构建一个Banner图片轮播(上)
1068 0
SwiftUI极简教程24:构建一个Banner图片轮播(上)