Swift UI 常用控件

SwiftUI 与UIKit

image.png

Text

Text("Hello World  ")
.lineLimit(2)//行数限制
.multilineTextAlignment(.leading) //多行文字的文字布局
.kerning(5) // 每个字符间的间隔
.baselineOffset(5) // 每一行之间的间隔
.bold() // 字体黑体
.italic() // 字体斜体
.strikethrough(true, color: .red) // 删除线，以及删除线的颜色
.underline() // 下划线
.allowsTightening(true) //是否允许压缩字符间的间隔来适应一行的内容
.opacity(0.6) //不透明度
.cornerRadius(1)//圆角

Button

Button(action: {//点击按钮以后会执行action中的代码
print("点击了按钮")
}) {//按钮的外观
Text("Click Me")
}

Image

Image("turtlerock")
.resizable()//可调整大小
.aspectRatio(contentMode: .fill)
//长宽比（等效于.scaledToFit()）
.clipShape(Circle())//裁剪图片，现在是裁剪成圆形
.border(Color.blue, width: 3.0)//为图片添加边框，可以设置边框颜色和边框宽度

TextField

TextField有两种style
1、Plain: TextField 无占位内容
2、Secure: SecureField 有占位内容

@State private var text = ""
var body: some View {
        TextField(
            "type something...",
            text: $text,
            onEditingChanged: { _ in print("changed") },//每当用户开始或完成编辑文本时,都会调用onEditingChanged闭包
            onCommit: { print("commit") }//每当用户执行诸如按回车键之类的操作时，都会调用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..

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