联合类型

截屏2024-08-20 09.49.24.png

枚举类型

截屏2024-08-16 09.10.26.png

界面开发起步

截屏2024-08-16 09.35.47.png

界面开发-布局思路

截屏2024-08-16 09.38.09.png
截屏2024-08-16 09.39.45.png

组件的属性方法

截屏2024-08-16 09.45.42.png

字体颜色

截屏2024-08-16 09.53.33.png

文字溢出省略号、行高

截屏2024-08-16 10.06.20.png

Image图片组件

截屏2024-08-16 10.22.48.png

输入框与按钮

截屏2024-08-16 10.29.40.png

综合实战-华为登录

截屏2024-08-16 10.31.50.png
截屏2024-08-16 10.42.33.png

设计资源-svg图标

截屏2024-08-16 10.45.04.png

布局元素的组成&内边距

截屏2024-08-16 10.53.49.png

外边距

截屏2024-08-16 10.58.51.png

边框border

截屏2024-08-16 11.12.08.png

设置组件圆角

截屏2024-08-16 11.43.56.png

特殊形状的圆角设置

截屏2024-08-16 11.48.24.png

背景属性

截屏2024-08-16 11.55.08.png
截屏2024-08-16 11.56.54.png
截屏2024-08-16 11.56.04.png

背景图位置

截屏2024-08-16 12.03[图片上传中...(截屏2024-08-17 10.48.00.png-886c42-1723862885693-0)] .17.png

单位问题

默认的单位都是vp，vp基于设备转换，保证不同设备视觉效果一致

截屏2024-08-17 10.34.14.png
截屏2024-08-17 10.37.40.png

背景图尺寸

截屏2024-08-17 10.40.48.png

线性布局

截屏2024-08-17 10.50.46.png
截屏2024-08-17 11.02.01.png

自适应伸缩

截屏2024-08-17 11.12.50.png

弹性布局（flex）

截屏2024-08-17 16.06.11.png
截屏2024-08-17 16.11.16.png

绝对定位

截屏2024-08-17 16.17.51.png
截屏2024-08-17 16.26.30.png

层叠布局

截屏2024-08-17 16.32.26.png
截屏2024-08-17 16.31.14.png

字符串拼接

截屏2024-08-17 16.50.07.png
截屏2024-08-17 16.54.15.png

类型转换

字符串转数字

截屏2024-08-17 16.59.32.png
截屏2024-08-17 17.00.25.png
截屏2024-08-17 17.00.48.png
截屏2024-08-17 17.00.05.png

数字转字符串

截屏2024-08-17 17.08.12.png

交互-点击事件

截屏2024-08-17 17.13.54.png

状态管理

截屏2024-08-17 17.20.23.png
截屏2024-08-17 17.23.20.png

运算符

截屏2024-08-17 17.31.40.png
截屏2024-08-17 17.33.16.png
截屏2024-08-17 17.41.09.png
截屏2024-08-17 17.44.26.png
截屏2024-08-17 17.48.13.png

运算符优先级

截屏2024-08-17 17.50.56.png

数组的操作

截屏2024-08-17 18.01.11.png
截屏2024-08-17 18.00.44.png
截屏2024-08-17 18.03.48.png
截屏2024-08-17 18.05.42.png
截屏2024-08-17 18.07.36.png

语句

截屏2024-08-17 18.11.36.png

if分支语句

截屏2024-08-17 18.14.29.png
截屏2024-08-17 18.15.19.png
截屏2024-08-17 18.19.32.png

switch分支

截屏2024-08-17 18.23.14.png

三元条件表达式

截屏2024-08-17 18.27.25.png

条件渲染

截屏2024-08-17 18.28.43.png

循化语句while

截屏2024-08-17 18.38.07.png

循化语句for

截屏2024-08-17 18.44.17.png
截屏2024-08-17 18.47.02.png

退出循环

截屏2024-08-17 18.52.34.png

便历数组

截屏2024-08-17 18.56.32.png
截屏2024-08-17 18.58.05.png

对象数组

截屏2024-08-17 19.01.21.png

ForEach-渲染控制

截屏2024-08-17 19.09.46.png

阶段案例-生肖抽奖卡

截屏2024-08-18 09.26.44.png
截屏2024-08-18 09.30.20.png
截屏2024-08-18 09.48.10.png
截屏2024-08-18 09.52.42.png
截屏2024-08-18 09.57.03.png
截屏2024-08-18 10.07.03.png

Swiper轮播组件

截屏2024-08-18 10.22.30.png
截屏2024-08-18 10.23.45.png
截屏2024-08-18 10.28.40.png
截屏2024-08-18 10.41.31.png
截屏2024-08-18 10.39.50.png

样式&结构重用

截屏2024-08-18 11.17.10.png

1、@Extend扩展组件：扩展组件的样式、事件，实现复用效果

截屏2024-08-18 10.52.31.png

2、@Styles抽取通用属性、事件，不支持传参

截屏2024-08-18 10.59.52.png

3、@Builder：自定义构建函数（结构、样式、事件）

如果在组件内使用，则不需要关键字functon

截屏2024-08-18 11.05.42.png

滚动容器Scroll

截屏2024-08-18 11.19.43.png
截屏2024-08-18 11.21.29.png
截屏2024-08-18 11.27.17.png
截屏2024-08-18 11.31.28.png
截屏2024-08-18 11.40.48.png

容器组件Tabs

截屏2024-08-18 11.48.06.png
截屏2024-08-18 11.50.06.png
截屏2024-08-18 11.53.12.png
截屏2024-08-18 14.18.29.png
截屏2024-08-18 14.22.55.png
截屏2024-08-18 14.39.49.png

Class类

截屏2024-08-18 14.47.24.png
截屏2024-08-18 15.16.55.png
截屏2024-08-18 15.23.08.png
截屏2024-08-18 15.29.24.png
截屏2024-08-18 15.33.28.png
截屏2024-08-18 15.45.47.png
截屏2024-08-18 15.50.38.png
截屏2024-08-18 15.56.07.png
截屏2024-08-18 15.56.56.png
截屏2024-08-18 15.58.50.png
截屏2024-08-18 15.59.45.png
截屏2024-08-18 16.02.09.png
截屏2024-08-18 16.23.20.png

剩余参数和展开运算符

截屏2024-08-18 16.31.12.png
截屏2024-08-18 16.34.23.png

接口补充

主要用于定义对象类型，可以对对象的形状进行描述。

截屏2024-08-22 11.33.07.png
截屏2024-08-18 16.39.20.png
截屏2024-08-18 16.40.13.png

范型

截屏2024-08-18 16.53.47.png
截屏2024-08-18 17.22.15.png
截屏2024-08-18 17.24.39.png
截屏2024-08-18 17.28.40.png
截屏2024-08-18 17.31.39.png

模块化语法

截屏2024-08-18 17.34.51.png
截屏2024-08-18 17.35.49.png
截屏2024-08-18 17.41.33.png
截屏2024-08-18 17.45.27.png

自定义组件

截屏2024-08-18 17.48.47.png
截屏2024-08-18 18.00.15.png
截屏2024-08-18 18.02.24.png

@BuilderParam传递ui

截屏2024-08-18 18.13.04.png

多个@BuilderParam参数

截屏2024-08-18 18.19.17.png

状态管理（父子传值）

截屏2024-08-18 18.58.12.png
截屏2024-08-18 19.00.51.png
截屏2024-08-18 20.26.04.png
截屏2024-08-19 20.53.40.png
截屏2024-08-22 11.56.02.png 截屏2024-08-19 20.51.11.png
截屏2024-08-22 12.03.46.png

@0bserved和@0bjectLink
1、属性更新的逻辑: 当我们@0bserved装饰过的数据，属性改变时，就会监听到，
2、然后遍历依赖它的 @0bjectLink 包装类， 通知数据更新
意思是说：数据真的更新了，但是只有用了@0bjectLink的组件的视图才更新，未使用@0bjectLink的组件的视图不更新

截屏2024-08-19 20.57.07.png

list列表组件

截屏2024-08-18 21.14.42.png
截屏2024-08-19 14.39.04.png
截屏2024-08-19 20.52.11.png

IconFont字体图标

截屏2024-08-19 14.45.07.png
image.png

输入框双向绑定

截屏2024-08-19 18.48.02.png

时间函数

截屏2024-08-19 18.11.04.png

@Link双向同步

截屏2024-08-19 19.01.43.png

路由

截屏2024-08-19 22.20.17.png
截屏2024-08-19 22.22.57.png
截屏2024-08-19 22.26.47.png
截屏2024-08-19 22.31.03.png
截屏2024-08-19 22.37.25.png
截屏2024-08-19 22.39.53.png
截屏2024-08-19 22.43.05.png

生命周期

截屏2024-08-19 22.46.22.png
截屏2024-08-22 12.59.31.png 截屏2024-08-22 13.00.30.png

• 有页面、组件嵌套时候的生命周期顺序
  页面aboutToAppear ---> 页面onDidBuild ---> 所有子组件aboutToAppear ---> 所有子组件onDidBuild ---> 页面onPageShow --> 页面onPageHide---> 页面aboutToDisappear ---> 所有子组件aboutToDisappear

• 组件生命周期：
  aboutToappear: 创建组件实例后执行，可以修改状态变量
  onDidBuild：组件build()函数执行完成之后回调该接口，不建议修改状态变量。
  aboutToDisappear：组件实例销毁前执行，不允许修改状态变量

• 页面生命周期（也有普通组件的那三个）：
  onPageShow：页面每次显示触发（路由过程、应用进入前后台）
  onPageHide：页面每次隐藏触发（路由过程、应用进入前后台）
  onBackPress：点击返回触发（reaurn true 阻止返回键默认返回效果）

• 应用生命周期：
  onCreact：应用创建
  onDestory：应用销毁
  onForeground：切换到前台
  onBackground：切换到后台

Stage模型

截屏2024-08-20 07.56.51.png
截屏2024-08-20 08.04.10.png
截屏2024-08-20 08.08.32.png
截屏2024-08-20 08.09.25.png
截屏2024-08-20 08.14.28.png
截屏2024-08-20 08.22.50.png
截屏2024-08-20 09.37.35.png 截屏2024-08-20 09.36.07.png

自定义路由表