SwiftUI 與UIKit

image.png

Text

Text("Hello World  ")
.lineLimit(2)//行數(shù)限制
.multilineTextAlignment(.leading) //多行文字的文字布局
.kerning(5) // 每個字符間的間隔
.baselineOffset(5) // 每一行之間的間隔
.bold() // 字體黑體
.italic() // 字體斜體
.strikethrough(true, color: .red) // 刪除線，以及刪除線的顏色
.underline() // 下劃線
.allowsTightening(true) //是否允許壓縮字符間的間隔來適應一行的內(nèi)容
.opacity(0.6) //不透明度
.cornerRadius(1)//圓角

Button

Button(action: {//點擊按鈕以后會執(zhí)行action中的代碼
print("點擊了按鈕")
}) {//按鈕的外觀
Text("Click Me")
}

Image

Image("turtlerock")
.resizable()//可調(diào)整大小
.aspectRatio(contentMode: .fill)
//長寬比（等效于.scaledToFit()）
.clipShape(Circle())//裁剪圖片，現(xiàn)在是裁剪成圓形
.border(Color.blue, width: 3.0)//為圖片添加邊框，可以設置邊框顏色和邊框?qū)挾?

TextField

TextField有兩種style
1、Plain: TextField 無占位內(nèi)容
2、Secure: SecureField 有占位內(nèi)容

@State private var text = ""
var body: some View {
        TextField(
            "type something...",
            text: $text,
            onEditingChanged: { _ in print("changed") },//每當用戶開始或完成編輯文本時,都會調(diào)用onEditingChanged閉包
            onCommit: { print("commit") }//每當用戶執(zhí)行諸如按回車鍵之類的操作時，都會調(diào)用onCommit閉包
        )
    }

Toggle

image.png

struct ToggleView: View {
    @State var isOn = true
    var body: some View {
        Toggle(isOn: $isOn) {
            Text("Offline Cache")
        }
        .padding()
    }
}

Slider

image.png

struct SliderView: View {
    @State var value = 0.5
    var body: some View {
        HStack {
            Slider(value: $value, from: 0.0, through: 1.0, by: 0.01, onEditingChanged: { _ in
                print(self.$value)
            })
            
            Text("\(self.value)")
                .padding()
        }
    }
}

SegmentControl

image.png

struct SegmentView: View {
   @State var choice = 0
   var channel = ["HBO", "Star Movies", "ESPN", "Discovery"]
   var body: some View {
       SegmentedControl(selection: $choice, content: {
           ForEach(0..<channel.count) { index in
               Text(self.channel[index]).tag(index)
           }
       })
   }
}

Stepper

image.png

struct StepperView: View {
    @State var age: Int = 0

        var body: some View {
            VStack {
                Text("Selected Age = \(self.age)")
                    .padding()
                
                Stepper(onIncrement: {
                    self.age += 1
                print("onIncrement \(self.$age)")
                }, onDecrement: {
                print("onDecrement\(self.$age)")
                    self.age -= 1
                }, label: {
                Text("Age")
            })
        }
    }
}