SwiftUI基本控件 | ノート

准备用SwiftUI撸个小项目玩一下，边做边记录用到的东西。

Text

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

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())

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)
    }

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

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

Divider

分割线，和容器方向垂直。

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

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)

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])
    }
 }
}

PickerDate

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

Slider

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

Stepper

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

Segment似于UIKit中的UISegmentedControl

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

Toggle

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

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)
}