SwiftUI 学习（一）

SwiftUI 学习（一）

一、控件

1.Text 文本组件

使用方法：

//Text(文本内容)

//示例
Text("cccc")

修饰符：

（1）字体、颜色

字体（大小）：font()

颜色：foregroundColor()

// 示例
Text("aaaaa")
    .font(.title)  // 设置字体为标题
    .foregroundColor(.blue)  // 设置字体颜色为蓝色

（2）对齐方式

对齐方式：multilineTextAlignment()

向左：leading

居中：center

向右：trailing

// 示例
Text("aaa，bbb，ccc")
    .multilineTextAlignment(.center)  // 设置文本居中对齐

（3）加粗、斜体、下划线

bold(): 让文本加粗
italic(): 让文本斜体
underline(): 给文本添加下划线

// 示例
Text("aaa，bbb，ccc")
    .bold()  // 加粗
    .italic()  // 让文本斜体
    .underline()  // 添加下划线

（4）文本行数限制

lineLimit(): 限制显示的行数

// 示例
Text("aaa，bbb，ccc，长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长")
    .lineLimit(1)  // 限制为一行文本

（5）文本高度

lineSpacing(): 设置文本行之间的间距
frame(): 控制文本框的宽高，输入值为width和height

// 示例
Text("aaa，bbb，ccc，长")
    .frame(width: 200, height: 50)  // 文本框的宽高
    .lineSpacing(10)  // 间距

2.Image 图片组件

使用方法：

// 当图片文件要位于项目的资源目录（如 Assets.xcassets）中
// Text("图片的名字")
// 示例
Image("test")

修饰符：

（1）图片的大小

resizable()：调整图片的大小，使其可以被缩放

scaledToFit()：保持图像的比例，确保图像在给定框内完整显示，可能会留白

scaledToFill()：可能会拉伸图像以填满整个框，但可能会裁剪部分图像

frame()：图片的尺寸

// 示例
Text("pic")
    .resizable()
    .scaledToFit()  // 保持图片宽高比例
    .frame(width: 200, height: 200)  // 图片大小

（2）图片的样式

clipShape()： 裁剪图像到指定形状

shadow()：给图片添加阴影

border()：给图片添加边框

rotationEffect()：旋转图片

// 示例
Text("pic")
    .resizable()
    .shadow(radius: 10)  // 给图片添加圆角阴影
    .clipShape(Circle())  // 将图片裁剪成圆形
	.border(  // 设置黑色圆形宽2的边框
        Circle()  // 形状是圆形
        .stroke(Color.black, width: 2))  // 黑色宽2
	.rotationEffect(.degrees(45))  // 旋转45度

3. Button 按钮组件

使用方法：

// 示例
Button(action: {}) {
            Text("Button") //按钮里面的内容，可添加文本和图片
        }

修饰符：

（1）颜色

foregroundColor()：设置按钮文本或图标的颜色

background()：设置按钮背景颜色

// 示例
Button(action: {}) {
            Text("Button") //按钮里面的内容，可添加文本和图片
	}
	.foregroundColor(.blue)  // 设置按钮文本为蓝色
	.background(Color.blue)  // 设置背景颜色

（2）按钮的形状

padding()： 添加内边距

cornerRadius()：设置按钮的圆角

frame()：设置按钮的大小

// 示例
Button(action: {}) {
            Text("Button") //按钮里面的内容，可添加文本和图片
	}
	.padding(11)  // 添加内边距为11
	.cornerRadius(15)  // 设置按钮的圆角为15
	.frame(width: 200, height: 50)  // 设置按钮的大小

二、输入控件

1.TextField

使用方法：

//示例
@State private var test: String = "" //输入的数据

var body: some View {
    TextField("占位符，如果为输入则会显示", text: $test)
}

修饰符：

（1）颜色

foregroundColor()：设置颜色

background()：设置按钮背景颜色

// 示例
TextField("Enter your name", text: $name)
	.foregroundColor(.blue)  // 设置文本为蓝色
	.background(Color.blue)  // 设置背景颜色

（2）形状

textFieldStyle()：设置不同的文本框样式

padding()：内边距

frame()：设置按钮的大小

// 示例
TextField("Enter your name", text: $name)
    .textFieldStyle(RoundedBorderTextFieldStyle())  // 圆角边框样式

（2）输入样式

keyboardType()：置键盘类型，例如数字、邮箱等

autocapitalization()：控制输入框是否自动大写字母

// 示例
TextField("Enter your name", text: $name)
    .autocapitalization(.words)  // 自动大写每个单词的首字母
	.keyboardType(.emailAddress)  // 设置键盘为电子邮件地址输入模式

三、布局系统

1.HStack 横向排列

将多个视图按水平方向排列，并自动调整它们的尺寸和位置。

// 示例
HStack {
    Text("Item 1")
    Text("Item 2")
    Text("Item 3")
}

（1）间距

spacing: 设置视图之间的间距，如果不指定，系统会使用默认的间距

// 示例
HStack(spacing: 20){
    Text("Item 1")
    Text("Item 2")
    Text("Item 3")
}

（2）对齐方式

对齐方式	描述
.top	将所有子视图对齐到顶部
.center	将所有子视图垂直居中（默认值）
.bottom	将所有子视图对齐到底部
.firstTextBaseline	将所有子视图的文本基线对齐
.lastTextBaseline	将所有子视图的最后一行文本基线对齐

（3）填充

使用Spacer()

// 示例
HStack {
    Text("Left")
    Spacer()
    Text("Right")
}  // Spacer() 会将 "Left" 和 "Right" 文字分别推到 HStack 的两端

2.VStack 纵向排列

将多个视图按竖直方向排列

// 示例
VStack {
    Text("Item 1")
    Text("Item 2")
    Text("Item 3")
}

（1）间距

spacing: 设置视图之间的间距，如果不指定，系统会使用默认的间距

// 示例
HStack(spacing: 20){
    Text("Item 1")
    Text("Item 2")
    Text("Item 3")
}

（2）对齐方式

对齐方式	描述
.leading	将所有子视图左对齐
.center	将所有子视图垂直居中（默认值）
.trailing	将所有子视图右对齐

（3）填充

使用Spacer()

// 示例
HStack {
    Text("shang")
    Spacer()
    Text("下")
}  // Spacer() 会将 "shang" 和 "下" 文字分别推到 HStack 的上下两端

3.ZStack 视图叠加

将多个视图按垂直方向叠加在一起，顺序由底到顶

// 示例
ZStack {
    Text("Item 1")
    Text("Item 2")
    Text("Item 3")
}

对齐方式

对齐方式	描述
.top	将所有子视图对齐到顶部
.center	将所有子视图居中对齐（默认值）
.bottom	将所有子视图对齐到底部
.leading	将所有子视图对齐到左侧
.trailing	将所有子视图对齐到右侧