SwiftUI基本控件

苹果今年推出了新的SwiftUI，最低支持版本为iOS13，使大家可以更快速方便的进行界面操作，SwiftUI的基本控件有：

1. Text

   Text("文字")
       .font(.custom("BradleyHandITCTT-Bold", size: 36))
       .frame(width: 200, height: 80, alignment: .bottomTrailing)
   

2. TextField

   TextField("User Name", text: $username, onEditingChanged: { (value) in
   	    print("onEditingChanged:\(self.username)")
   	}) {
   	    print("onCommit:\(self.username)")
   	}.textFieldStyle(RoundedBorderTextFieldStyle())
   	//密码输入框
       Text("Your password is \(password)!")
       
       SecureField("Your password", text: $password) {
           print("Your password is \(self.password)!")
       }
       .textFieldStyle(RoundedBorderTextFieldStyle())
   
   

3. Button

   Button(action: {
   	print("---Third button action.")
       }) {
   	Image(systemName: "clock")
   	Text("Third button")
       }
       .foregroundColor(Color.white)
       .background(Color.orange)
       
    Button(action: {
   	print("---Button with image.")
       }){
   	HStack {
   	    Image(systemName: "star")
   	    Text("Button with image")
   	}
   	.padding()
   	    .background(Color.yellow)
       }
   
   

4. Spacer是一个灵活的空间视图，在两个x或y轴上进行扩展

   HStack {
        Image(systemName: "clock")
        Spacer(minLength: 50)
        Text("\(Date())")
   }
   
   

5. Divider，进行水平分割，

    Image(systemName: "clock")
    Divider()
       .background(Color.purple)
       .scaleEffect(CGSize(width: 1, height: 10))
    Text("\(Date())")
   
   

6. Image

   Image("imageName")
   	.resizable()
   	.aspectRatio(contentMode: .fit)
   Image("imageName")
   	.blur(radius: CGFloat(2), opaque: true)
   Image("imageName")
           .mask(Circle())
   Image("texture")
           .resizable()
           .frame(width: 300, height: 300)
           .mask(
   Text("SWIFT UI!")
   	.font(Font.system(size: 64).bold()))
   Image("girlPicture")
   	.scaleEffect(0.8)
   

7. Picker相当于UIKit中的UIPickerView

    struct ContentView : View {
   
    var number = ["first", "second", "third"]
    @State private var selectedItem = 0
   
    var body: some View {
       VStack {
           
          Picker(selection: $selectedItem, label: Text("Number")) {
             ForEach(0 ..< number.count) {
               Text(self.number[$0]).tag($0).foregroundColor(self.colors[$0])
             }
          }
          Text("Your choice: ")
           + Text("\(number[selectedItem])").foregroundColor(self.colors[selectedItem])
       }
    }
   }
   
   

8. PickerDate

       DatePicker(selection: $selectedDate, displayedComponents: DatePickerComponents.date) {
           Text("Date")
       }
   

9. Slider

       Slider(value: $temperature, in: -20...40) { (item) in
           print(item)
       }
   

10. Stepper

        Stepper(onIncrement: {
            self.temperature += 1
        }, onDecrement: {
            self.temperature -= 1
        }, label: { Text("Temperature: \(Int(temperature))") })
    

11. Segment似于UIKit中的UISegmentedControl

        Picker(selection: $selectedAnimal, label: Text("animals")) {
           ForEach(0 ..< animals.count) {
            Text(self.animals[$0]).tag($0)
           }
        }.pickerStyle(SegmentedPickerStyle())
    

12. Toggle

        Toggle(isOn: $showNotification) {
            Text("Show notification:")
        }.padding()
    

13. TabView

    TabView {
        Text("The home page.")
    	.font(.system(size: 21))
    	.tabItem({
    	    Image(systemName: "imageName")
    	    Text("Home") })
    	.tag(0)
    
        Text("The settings page")
    	.font(.system(size: 21))
    	.tabItem({
    	    Image(systemName: "gear")
    	    Text("Settings")
    	})
    	.tag(1)
    }