基本结构

1
2
3
4
5
6
7
8
9
10
11
12
import SwiftUI

struct SwiftUIView: View {
    var body: some View {
// 程序代码区
    }
}

// 预览
#Preview {
    SwiftUIView()
}

文本

添加文本

1
Text("Hello world!")

显示文本为"Hello world!"

以变量形式保存文本并显示

1
var t=Text("Man!")

设置文本属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Text("Hello world!".capitalized) // 文字首字母大写 反过来是.lowercased
    .font(.title) // 字体大小
    .fontWeight(.ultraLight) // 字体粗细

    .bold() // 粗体
    .underline((true, color: Color.red)) // 红色下划线
    .italic() // 斜体
    .strikethrough(true, color: Color.green) // 绿色删除线
    
    .font(.system(size: 24, weight: semibold, design: .serif)) // 字体大小，粗细和设计
    .multilineTextAlignment(.center) // 多行居中
    .baselineOffset(50.0) // 行间距为 50.0
    .kerning(1.0) // 文字间距为 1.0
    .foreground(.red) // 文字颜色为红色
    .frame(width: 200, height: 100, alignment: .center) // 文本框宽度为 200，高度 100，居中对齐
    .minimumScaleFactor(0.1) // 设置文字自动缩放最小倍率

图形

添加图形

1
2
3
4
5
Circle() // 圆
Ellipse() // 椭圆
Capsule() // 胶囊型
Rectangle() // 矩形
RoundedRectangle() // 圆角矩形

图形属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
Circle()
    .foregroundColor(.pink) // 填充粉色（前景色为粉色）
    // 空心圆
    .stroke() // 空心黑圆
    .stroke(Color.red, lineWidth: 30) // 空心红圆，宽度为 30
    .stroke(Color.orange, style: StrokeStyle(linewidth: 20, lineCap: .butt, dash[10])) // 虚线外框橙色空心圆，间距为 10
    // 设置形状与大小
    .trim(from: 0.5, to: 1.0) // 半圆
    .frame(width: 200, height: 100) // 宽度 200，高度 100
    .inset(by: 40) // 缩小40%
    // 范围设置
    .frame(minWidth: 100, maxHeight: 200) // 最小宽度 100 最大高度 200
    .frame(maxWidth: .infinity, maxHeight: 100) // 最大宽度无限制 即填满
    // 其他
    .border(Color.black) // 黑色外框
    .offset(x: 114, y: 514) // 位置偏移
Capsule(style: .circular) // r角更大（？
RoundedRectangle(cornerRadius: 50) // r角为 50 的圆角矩形

留白间距

1
Spacer()

颜色与阴影

填充

1
2
3
4
RoundedRectangle()
    .fill(Color(UIColor.secongarySystemBackground)) // 系统预置背景色 #2
    .shadow(color: Color.red .opacity(0.3), radius: 10, x: 0, y: -20) // 阴影配置
    .background(Color.yellow) // 填充背景为黄色

自定义颜色

1.前往Assess.xcassets，添加一个Color Set，命名为CustomColor，之后选择颜色。
2.

1
2
RoundedRectangle()
    .Color("CustomColor") // 应用自定义颜色

渐变色

1
2
3
Rectangle()
    .fill(LinearGradient(gradient: Gradient(colors: [Color.red, Color.blue]), startPoint: .leading, endPoint: .bottom))
    // 渐变颜色，从上到下逐渐由红变蓝

图像

引用图像

将图像添加到Assest中，然后用Image()引用。

1
Image("ImageName") // 引用名为 ImageName 的图片

这是个免费自由的图片，将以原始大小显示。

引用系统图标

1
Image(systemName: "globe") // 内置地球图标

图像属性

1
2
3
4
Image("ImageName")
     .resizable() // 可变大小
     .scaledToFit() // 适合屏幕（原始比例缩放）
     .scaledToFill() // 缩放以填充

垂直、水平与叠加视图

垂直视图

1
2
3
4
5
6
7
8
9
10
11
12
13
var body: some View {
    VStack(
        alignment: .leading,
        spacing: 10
    ) {
        ForEach(
            1...10,
            id: \.self
        ) {
            Text("Item \($0)")
        }
    }
}

上述10个item将按垂直方向排列，如图所示：
VStack

水平视图

1
2
3
4
5
6
7
8
9
10
11
12
13
var body: some View {
    HStack(
        alignment: .top,
        spacing: 10
    ) {
        ForEach(
            1...5,
            id: \.self
        ) {
            Text("Item \($0)")
        }
    }
}

上述5个item将按水平方向排列，如图所示：
HStack

堆叠视图

1
2
3
4
5
6
7
8
9
10
11
12
13
let colors: [Color] =
    [.red, .orange, .yellow, .green, .blue, .purple]
var body: some View {
    ZStack {
        ForEach(0..<colors.count) {
            Rectangle()
                .fill(colors[$0])
                .frame(width: 100, height: 100)
                .offset(x: CGFloat($0) * 10.0,
                        y: CGFloat($0) * 10.0)
        }
    }
}

例子创建了6种颜色的大小为100x100的正方形堆叠，并偏移10点。
eg1

1
2
3
4
5
6
7
8
9
10
11
var body: some View {
    ZStack(alignment: .bottomLeading) { // 左下角对齐
        Rectangle()
            .fill(Color.red)
            .frame(width: 100, height: 50)
        Rectangle()
            .fill(Color.blue)
            .frame(width:50, height: 100)
    }
    .border(Color.green, width: 1)
}

例子创建了2个堆叠于左下角的矩形，并使用绿色外框。
eg2

Stack 属性

VStack（仅左右对齐）

1
2
3
4
VStack (alignment: .leading) { // 向左对齐
}
VStack (alignment: .trailing) { // 向右对齐
}

HStack（仅上下对齐）

1
2
3
4
HStack (alignment: .top) { // 向上对齐
}
HStack (alignment: .bottom) { // 向下对齐
}

元素对齐方式

1
2
Image(systemName: "globe")
	.frame(alignment: .leading) // 向左对齐

视图间距

1
2
HStack(spacing: 114){ // 设置间距为 114
}

元素间距

1
2
3
4
5
6
Image(systemName: "globe")
    .padding(.trailing, 1) // 右间距
    .padding(.leading, 14) // 左间距
    .padding(.top, 5) // 上间距
    .padding(.bottom, 14) // 下间距
    .padding(.horizontal, 19) // 四周间距

待续…