SwiftUI Basic controls

Apple has launched the new SwiftUI this year, with the lowest supported version of iOS13, making it faster and easier to use the interface. The basic controls of SwiftUI include:

1. Text

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

2. TextField

   TextField("User Name", text: $username, onEditingChanged: { (value) in
   	    print("onEditingChanged:\(self.username)") {})print("onCommit:\(self.username)")}. TextFieldStyle (RoundedBorderTextFieldStyle ()) / / password input box Text ("Your password is \(password)!")
       
       SecureField("Your password", text: $password) {
           print("Your password is \(self.password)!")
       }
       .textFieldStyle(RoundedBorderTextFieldStyle())
   
   Copy the code

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)
       }
   
   Copy the code

4. Spacer is a flexible spatial view that expands on two X or Y axes

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

5. Divider, divides horizontally,

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

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)Copy the code

7. Picker is the equivalent of UIPickerView in UIKit

    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])
       }
    }
   }
   
   Copy the code

8. PickerDate

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

9. Slider

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

10. Stepper

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

11. Segments are like UISegmentedControl in UIKit

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

12. Toggle

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

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)
    }
    Copy the code