Appearance

组件和样式 ​

Text 文本 ​

文档参考 Text

简介

可以理解为 <p> 标签，用于展示文本

字体大小

样式说明
.font(.largeTitle)大标题
.font(.title)标题，类似于 h1
.font(.title2)标题二级，类似于 h2
.font(.title3)标题三级，类似于 h3
.font(.headline)标题
.font(.subheadline)子标题
.font(.body)正文
.font(.callout)标注文本
.font(.caption)标题，一般用表格，照片
.font(.caption2)标题 2
.font(.footnote)脚注文本
.font(.system(size: 40))自定义尺寸

深度

样式说明
.fontWeight(.black)——
.fontWeight(.bold)——
.fontWeight(.heavy)——
.fontWeight(.light)——
.fontWeight(.medium)——
.fontWeight(.regular)——
.fontWeight(.semibold)——
.fontWeight(.thin)——
.fontWeight(.ultraLight)——

字体

样式说明
.fontDesign(.default)默认正常的设计
.fontDesign(.monospaced)等宽字体，在编程和排版中非常常见
.fontDesign(.rounded)圆角字体，轻松、友好和可爱的感觉
.fontDesign(.serif)衬线字体，清晰易读的字形和简洁的风格

加粗

样式说明
.blod()加粗

斜体

样式说明
.italic()斜体

背景色

样式说明
.background(.red)红色背景

行距

样式说明
.lineSpacing(10.0)行距

文字颜色

样式说明
.foregroundColor(.blue)蓝色字体

对其方式

样式说明
.multilineTextAlignment(.leading)前对其
.multilineTextAlignment(.trailing)后对其
.multilineTextAlignment(.center)中对其

行数限制

样式说明
.lineLimit(2)限制 2 行
.lineLimit(1)限制 1 行

文本溢出

样式说明
.truncationMode(.tail)后面省略号
.truncationMode(.middle)中间省略号
.truncationMode(.head)前面省略号

设置宽高

样式说明
.frame(width: 300,height: 500)设置宽高

Image 图片 ​

文档参考 Image

在资源中添加图片并且命名，使用 Image 方法引入图片名称即可

插入图片

swift
Image("name")

设置宽高

swift
Image("tesla")
    .resizable() // 设置可拉伸
    .frame(width: 300, height: 220)

添加 Icon

ctrl + shift + L 快捷打开

swift
Image(systemName: "bubble.fill")

圆角图片

swift
Image("tesla")
    .resizable()
    .frame(width: 300, height: 220)
    .clipShape(RoundedRectangle(cornerRadius: 20))

模糊

swift
Image("tesla")
    .blur(radius: 10)

描边

swift
Image("tesla")
    .border(.red, width: 9)

Button 按钮 ​

文档参考 Button

常见写法

swift
Button("按钮1") {
    print("点击了")
}

Button(action: {
    print("点击了")
}, label: {
    Text("按钮2")
})

Button("按钮3", systemImage: "heart", action: {
    print("点击了")
})

ColorPicker 颜色选择器 ​

swift
ColorPicker("Title", selection: .constant(.red))

Gauge 进度条 ​

swift
Gauge(value: 0.5, in: 0...1) {
    Text("Label")
}

DatePicker 日期时间选择器 ​

swift
DatePicker(selection: .constant(Date())) {
    Text("Date")
}

Toggle 切换 ​

swift
@State var isOn: Bool = true

Toggle("", isOn: $isOn)

Slider 滑动条 ​

swift
@State var slider: Double = 0

Slider(value: $slider, in: 0 ... 100)
    .tint(.red)

DisclosureGroup 披露组 ​

swift
DisclosureGroup("Group") {
    Text("122")
    Text("122")
    Text("122")
    Text("122")
    Text("122")
    Text("122")
}

TextField 输入框 ​

swift
TextField("请输入文字", text: $texts)

SecureField 密码输入框 ​

swift
@State var texts: String = ""

SecureField("输入密码", text: $texts)

Picker 选择器 ​

swift
@State var arr: Array = ["香蕉", "苹果", "鸭梨", "橘子"]
@State var select = 2

Picker(selection: $select) {
    ForEach(0 ..< arr.count) {
        Text("\(self.arr[$0])")
    }
} label: {
    Text("选择")
}
.pickerStyle(.palette)

DatePicker 时间选择器 ​

swift
@State var selectDate = Date()

DatePicker("", selection: $selectDate, displayedComponents: DatePickerComponents.hourAndMinute)