SwiftUI学习笔记

基本组件的使用

Text

简介

显示文本的组件

代码

import SwiftUI

struct ContentView: View {
    var body: some View {
        Text("文本")
            .foregroundColor(.blue) /// 文本颜色
            .bold() /// 粗体
            .italic() /// 斜体
            .font(.system(.largeTitle)) /// 字体
            .fontWeight(.medium) /// 字重
            .shadow(color: .black, radius: 1, x: /*@START_MENU_TOKEN@*/0.0/*@END_MENU_TOKEN@*/, y: 2) /// 阴影

    }
}

效果图

TextField

简介

文本输入框

代码

import SwiftUI

struct ContentView: View {

    @State var phone: String = "+86182****6667"

    var body: some View {
        VStack {
            TextField("手机号", text: $phone) { /// 内容变化回调
                print("changed: \($0)")
            } onCommit: { /// 按下键盘的enter时触发
                print("phone: \(self.phone)")
            }
            .foregroundColor(.white) /// 白色字体
            .padding() /// 第一次内边距可以调整文字
            .background(Color.green) /// 设置背景色，会设置整个组件背景色
            .cornerRadius(10) /// 再切出圆角
            .padding() /// 再整体添加内边距
        }
        .background(Color.purple)
        .padding()
    }
}

效果

紫色背景是VStack容器

SecureField

简介

功能和使用方法与 TextField差不多, 只是多了个密码显示的功能

代码

import SwiftUI

struct ContentView: View {

    @State var password: String = "admin"

    var body: some View {
        VStack {
            SecureField("密码", text: $password) {
                print("commit: \(self.password)")
            }
            .foregroundColor(.white) /// 白色字体
            .padding() /// 第一次内边距可以调整文字
            .background(Color.green) /// 设置背景色，会设置整个组件背景色
            .cornerRadius(10) /// 再切除圆角
            .padding() /// 再整体添加内边距
        }
        .background(Color.purple)
        .padding()
    }
}

效果

Image

简介

图片显示组件

代码

import SwiftUI

struct ContentView: View {

    var body: some View {
        Image(systemName: "4k.tv")
            .font(.system(size: 44, weight: .ultraLight))
            .border(Color.red, width: 1)
    }
}

效果

Button

简介

按钮组件，可以点击触发相关事件

代码

import SwiftUI

struct ContentView: View {

    @State var swither: Bool = false

    var body: some View {
        Button(swither ? "状态A":"状态B") { /// 这里处理点击事件
            self.swither.toggle()
        }
        .frame(width: 100, height: 44, alignment: .center) /// 尺寸
        .background(swither ? Color.red: Color.blue) /// 背景色
        .foregroundColor(swither ? .yellow: .white) /// 字体色
        .cornerRadius(6) /// 圆角
    }
}

效果

DatePicker

简介

日期/时间 选择

代码

import SwiftUI

struct ContentView: View {

    @State var date: Date = Date()

    var body: some View {
        DatePicker("日期", selection: $date, displayedComponents: .date)
            .background(Color.gray)
            .cornerRadius(4)
            .padding()

    }
}

效果

Toggle

简介

开关状态组件

代码

import SwiftUI

struct ContentView: View {

    @State var enable: Bool = false

    var body: some View {
        Toggle(enable ? "启用": "禁用", isOn: $enable)
            .frame(width: 100, height: 22, alignment: .center)
            .padding()
            .background(Color.pink)
            .cornerRadius(6)

    }
}

效果

Slider

简介

滑动条

代码

import SwiftUI

struct ContentView: View {

    @State var power: Float   = 0.0

    var body: some View {
        HStack {
            Slider(value: $power, in: 0...100)
                .frame(width: 160)
            Text("能量值:\(power)")
                .foregroundColor(.blue)
                .font(.system(size: 12))
                .frame(width: 120, height: 44, alignment: .leading)
        }.padding()

    }
}

效果

Stepper

简介

步进器，-/+控制增减

代码

import SwiftUI

struct ContentView: View {

    @State var count: Int = 0

    var body: some View {
        HStack {
            Stepper("数量", value: $count, step: 1) {
                print("changed: \($0)")
            }
            Text("\(count)")
                .frame(width: 60, height: 44, alignment: .center)
        }.padding()

    }
}

效果