swiftUI 常用控件介绍

最近在学习swiftUI，首先来介绍一下swiftUI的一些基本用法，swiftUI和Flutter的语法比较类似，都是采用声明式语法，都是在代码中创建UI,swift语言相比较Dart语言更简洁。

打开Xcode新建一个swiftUI项目，会发现有两个结构体方法，

方法一：用来更新UI，修改UI，所以程序的入口
struct ContentView: View {
     var body: some View {
      }
}

方法二：用来在右边视图实时展示预览修过
struct ContentView_Previews: PreviewProvider 
    static var previews: some View {
    }
}

下面这个方法默认只能返回一个View控件，如果放多个会编译不通过

 var body: some View {
       Text("同意协议")
       // Text("同意协议") 如果再放两个或者以上控件会编译不同
      }

所以，想放多个控件的话就需要用到下面这两个布局控件HStack和VStack,
HStack 里面的控件是横向摆放的，VStack控件是竖向摆放的，他们可以相互嵌套

HStack{
  Text("同意协议")
  Text("同意协议")
   VStack{
     Text("同意协议")
     Text("同意协议")
  }
}

如果有很多个控件横向摆放，或者竖向摆放超过了屏幕边界，这时候超过边界的控件是不会展示出来的，也不能拖动，如果想上下拖动或者左右拖动展示边界外的控件，这时候我们需要用到一个特殊的控ScrollView, ScrollView中可以包含多个控件，默认是竖向排列，如果想横向排列可以在里面加入HStack包裹控件

ScrollView{
    HStack{
       Text("同意协议")
       Text("同意协议")
       ... ...
   }
}

像我们常用的文本控件Text{},按钮控件Button{},输入框控TextField{},等常用的一些控件，在swiftUI中都有对应的控件，使用很简单，其中每个控件 也包含了多种不同的属性，比如.frame()设置控件的宽高，.padding()设置控件的间距，具体可以查阅官方文档。

VStack{
     Text("同意协议")
     Button("同意协议"){
     //点击按钮要执行的代码
     }
     TextField("请输入用户名", text: $name) //第一个参数是输入框默认值，第二个是绑定的变量名称，就是用户输入的文字
                    .textFieldStyle(RoundedBorderTextFieldStyle())//输入框的样式圆角矩形
                    .padding()//输入框间距
  }.frame(height: 300)//设置空间块的高度