SwiftUI 是 Apple 新推出的一款能快速搭建页面的 framework。它采用的是声明式语法，简洁明了。

而且它是所见即所得的，你写的代码都能通过 Preview 实时的看到作用，这能够很大的节约开发者开发时刻。当你开发一个复杂的项目，需要等待几分钟的时刻去编译运行代码，只为了看一个 UILabel 字体巨细或者色彩是否改变时，你就能体会到所见即所得的快乐了。

根底控件

当咱们新建一个项目，选择 Interface 选择 SwiftUI 时，建好的项目会自带一个 ContentView，这是下面的默许代码：

struct ContentView: View {
    var body: some View {
        VStack {
            Image(systemName: "globe")
                .imageScale(.large)
                .foregroundColor(.accentColor)
            Text("Hello, world!")
        }
        .padding()
    }
}
struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

ContentView 是需要咱们根据需求修改代码的部分，下面的 ContentView_Previews 则是为了实时预览的。

Tips：如果注释ContentView_Previews，你会发现预览页面也会消失。

ContentView 代码阐明

首先，能够看到 ContentView 有一个 body 的计算特点，该特点代表当时视图的内容。当你实现一个自定义 view 的时分，必需要实现该特点，不然代码会报错。

VStack 代表的是一个笔直布局。里边包含 Image 和 Text，两个控件笔直布局。padding 则代表当时视图外边距的间距。

Text 对应 UILabel

在 SwiftUI 中，用 Text 控件来展现静态文本。下面是它的代码示例：

Text("我是一个文本")
	.font(.title)
	.foregroundColor(.red)
	.frame(width: 100, alignment: .center)
    .lineLimit(1)
    .background(.yellow)

常用的特点基本就这几个：

  • font：字体。如果想愈加详尽化的指定字体，能够用 system，.font(.system(size: 16, weight: .light))。
  • foregroundColor：字体色彩。
  • frame：控制文本的巨细和对齐位置。这个不写的话默许是自适应宽高。如果仅指定宽度便是高度自适应，仅指定高度便是宽度自适应。
  • lineLimit：指定行数，默许为 0，不限制行数。
  • background：用来设置布景。比如布景形状、布景色彩等等。

Tips：SwiftUI 的布局简化了主动布局和弱化了 frame 指定详细数值的布局方式。默许都是自适应的，这一点和 Flutter 类似，大大提高了开发功率。

Image 对应 UIImageView

在 SwiftUI 中，Image 用来展现图画资源。下面是它的示例代码：

Image(systemName: "globe")
	.resizable()
	.aspectRatio(contentMode: .fit)
	.foregroundColor(.accentColor)
	.background(.red)

常用特点：

  • resizable：可调整巨细以适应当时布局。
  • aspectRatio：调整缩放比。
  • foregroundColor、background：参见 Text。

Button 对应 UIButton

在 SwiftUI 中，用 Button 来表示一个按钮。下面是它的示例代码：

Button {
    print("点击了按钮")
} label: {
    Text("按钮文本")
    Image(systemName: "globe")
}
.cornerRadius(10)
.background(.red)
.font(.body)
.border(.black, width: 2)

常用特点：

  • font、foregroundColor、background 等特点与 Text 运用一致。
  • label：用来自定义按钮的文本和图标。
  • cornerRadius：设置圆角。
  • border：设置边框。

总结

本文主要讲解了 SwiftUI 的三个基本控件 Text：用来展现静态文本；Image：用来加载图画资源；Button：用来展现按钮。以及三个控件的基本运用。期望通过此文大家能够对 SwiftUI 的语法有个基本的了解。