SwiftUI 常用控件之Text、Button、Image基本使用

         对于Swift框架的使用已经非常简单了，不但简单而且快速，然而随着长时间的使用，也还存在着很多弊端，毕竟还是延续OC的声明的模式。SwiftUI的推出，使开发变得更加简单了，不在注重界面的创建和布局了，把重点可以聚集到数据逻辑上，从而使开发效率更高。那么我们今天就开始学习SwiftUI的常用的几个控件。可以开启预览功能。对于这三个控件我们只以Text标签做粒子，其他的两个和这个一样。

测试环境： xcode 11.1 mac os: 10.15.1 

 

• Text 文本显示控件

对于文本显示控件我们可以说是开发者最常用不过了，我们先来看看这个控件的创建。oc创建一个标签控件，我们知道很麻烦，就不在赘述了，swift容易了，但是也是相对麻烦。SwiftUI就要简单多了，只要一句就可以。我们先创建一个工程。然后会自动生成一个文本标签。

Text("Hello World")

就这么简单就生成了一个文本标签，简直是逆天了。接下来我们看看改变颜色，大小，边框，背景等等。

• 文本颜色

Text("Hello World").foregroundColor(.red)

• 背景

Text("Hello World").background(Color.green)

• 大小

Text("Hello World").background(Color.green).frame(width: 120, height: 50, alignment: .bottom)

这个需要说明一点： 如果我们先设置了背景颜色，再设置大小，如果比背景大那么背景颜色并不会全部填充大小的空间，只会填空默认的文本大小空间，所以我们先设置大小在设置背景这样就可以解决这个问题了。如下：

Text("Hello World").frame(width: 120, height: 50, alignment: .bottom).background(Color.green)

•  模糊度

Text("Hello World").frame(width: 120, height: 50, alignment: .bottom).background(Color.green).blur(radius: 0)

 模糊度是从0开始，表示没有模糊度，值越大越模糊。

• 边框

  //   ShapeStyle
  .border(Color.red, width: 3)

  边框发现是个遵循ShapeStyle协议的一个结构体。查找api发现Color是遵守这个协议的，我们可以直接用Color就可以了

• clipShape 剪切形状

常用的有Capsule（形状先感冒吃的胶囊一样）、Circle（圆形）、Ellipse（椭圆形）、Path（自定义路径）、Rectangle（矩形）、RoundedRectangle（带圆角的矩形）。

• 圆角cornerRadius 设置圆角
• 固定大小fixedSize

• lineLimit限制行数

• hidden()隐藏

• shadow(radius: 5)设置阴影

• .font() 设置字体

• offset()设置偏移量

• padding()填充边界与内容之间的空隙

• 添加手势监听

.onTapGesture(count: 2) {
     // gesture action
 }

count是点击的次数。

 

好了对于这个控件我们基本上已经可以使用了，可以应付大多数情况了。那么对于Image和Button也是相似的。另外两个就作为私下联系的小作业。任何的成功都是从一点一滴的小事坐起的。成功的路上总不缺少努力的人。加油。。。