1、制作简历

里面运用了很多布局和组件，还有很多重要的命令

1. Column：垂直排列，把东西从上往下摆
2. Row：水平排列，把东西从左往右摆
3. Image：显示图片，这里用来放头像
4. Text：显示文字，写名字、学校、信息用的
5. Divider：分割线，把不同模块分开
6. width/height：设置宽和高，控制大小
7. borderRadius：给图片加圆角，头像变成圆形用的
8. fontSize：文字大小，调字的大小
9. fontWeight：文字加粗，让标题更显眼
10. fontColor：文字颜色，这里把学校名弄成灰色
11. padding：内边距，让内容和屏幕边缘留点空隙
12. justifyContent：内容对齐方式，这里是左对齐
13. space：间距，控制两个组件之间的空隙
14. backgroundColor：背景颜色，给整个简历页面加底色
15. lineHeight：行高，让多行文字不挤在一起

2、个人信息页面

1. Column：从上往下排东西，整个表单的大架子
2. Row：从左往右排，比如 “姓名：” 和输入框放一行
3. Text：显示文字
4. TextInput：让用户输入文字的框
5. placeholder：输入框里的灰色提示文字
6. Toggle：单选框组件，这里用来选性别、学历
7. ToggleType.Checkbox：把开关变成复选框样式
8. isOn：判断哪个选项被选中了
9. Button：提交按钮，用户点了就把信息发出去
10. onClick：按钮点击事件，点提交就执行这里的代码
11. console.log：把用户填的信息打印出来，方便看结果
12. width/height：控制组件的宽和高
13. borderRadius：给输入框、按钮加圆角，变好看
14. backgroundColor：给输入框、按钮加背景色
15. padding：给组件加内边距，内容不贴边
16. margin：给组件加外边距，和其他组件拉开距离

3、显示输入内容且开关状态

• @State isOpen：存开关状态（开 / 关），默认是关
• Column：从上往下排东西
• Text：显示文字
• TextInput：让用户输入文字的框
• placeholder：输入框里的灰色提示文字
• Button：按钮，这里用来切换开关状态
• this.isOpen ? "开" : "关"根据开关状态显示不同文字
• onClick：按钮点击事件，点一下就把取反
• textAlign：文字对齐方式，这里是左对齐
• backgroundColor：给显示内容的区域加背景色
• borderRadius：给内容区域加圆角
• fontColor：设置文字颜色
• width/height：设置组件的宽和高
• padding：给组件加内边距

4、深夜模式和白天模式转换

• Row：水平布局，把 “文字 + 开关” 放在同一行
• Text：显示提示文字
• onChange：每次滑动就 取反（开变关，关变开）
• this.isOpen ? "已开启" : "已关闭"：根据开关状态显示不同的文字
• backgroundColor(this.isOpen ? 深色 : 白色)：根据开关状态动态切换背景色
• width/height：设置组件的宽和高

5、改变文字颜色

• Column：垂直布局
• Text("测试文字，切换开关改变颜色")：显示测试文字
• .fontColor(this.isOpen ? Color.Red : Color.Green)：核心逻辑，开关开了就变红，关了就变绿
• Toggle({ type: ToggleType.Switch, isOn: this.isOpen })：滑动开关
• .selectedColor(Color.Red)：开关打开时，滑块显示的颜色
• width/height：设置开关的大小
• padding：给整个页面加内边距，避免内容贴边

6、账号登录

• @State username/password：存用户输入的账号和密码
• Image：显示头像，这里还加了圆角和阴影
• Text：显示标题 “账号登录” 和 “记住密码” 文字
• TextInput：账号和密码的输入框
  • placeholder：输入框里的灰色提示文字
  • type(InputType.Password)：把输入框变成密码样式，内容会被隐藏
• Toggle：“记住密码” 的滑动开关
• Button：登录按钮，
• AlertDialog.show：弹出提示框，显示 “登录成功” 或 “登录失败”
• borderRadius：给头像、输入框加圆角
• shadow：给头像加阴影效果，让它更立体
• padding：给输入框加左边内边距，让文字不贴边
• width/height：控制组件大小

7.递加递减

• Column：垂直布局，把文字和按钮上下排开
• Row：水平布局
• Button("-")：减号按钮，点一下数字减 1
• Button("+")：加号按钮，点一下数字加 1
• onClick(() => { this.count-- })：每次点击让count减 1
• onClick(() => { this.count++ })：每次点击让count加 1
• width/height：控制按钮的大小
• justifyContent(FlexAlign.Center)：让整个页面的内容居中显示
• backgroundColor(0xF5F5F5)：给页面加个浅灰色背景

8.改变颜色

• Column：垂直布局，把文字和开关上下排开
• Text("测试文字，切换开关改变颜色")：显示测试文字
• .fontColor(this.isOpen ? Color.Red : Color.Green)：开关开了就变红，关了就变绿
• .selectedColor(Color.Red)：开关打开时，滑块显示的颜色
• width/height：设置开关的大小
• padding：给整个页面加内边距，避免内容贴边