鸿蒙开发-第七天

1. 布局进阶

2. 列表 List  => 容器组件

3. 通用属性

4. 颜色渐变，阴影，多态，动画animation，图形变换（平移，缩放，旋转）
6. ------------------------List------------------------
7. List的主轴默认是垂直方向的
8. 内容超过屏幕大小时，提供滚动功能
9. list组价中可以水平或者垂直滚动
10. List() {
11.     listItem() {}
12.     ...
13. }
14. 修改List的主轴方向 
15. listDirecton()
16. List() {
17.     listItem() {}
18.     ...
19. }
20. .listDirecton(Axis.Horizontal)  // 设置list主轴方向

22. 列模式

23. lanes()

    参数1 交叉轴列数

    参数2 交叉轴方向的间距 => 可选参数

    listDirecton()

    List() {

        listItem() {}

        ...

    }

    .listDirecton(Axis.Horizontal)  // 设置list主轴方向

    .lanes(2,10) //  交叉轴列数为2，间距为10

    .lanes(2)  // 剩余间距默认平均分配

24. 列对齐方式 => 交叉手上的对齐方式
25. alignListItem(ListItemAlign.枚举)

26. 滚动条状态

27. scrollBar(BarState.枚举)
28. Off
29. On
30. Auto => 默认
32. 分割线样式
33. divider({strokeWidth: 数字，color: Color.blue，startMargin：数字，endMargin: 数字})
34. startMargin 开始位置不加分割线
35. endtMargin  结束位置不加分割线
37. -------------------通用属性---------------------

39. 1. 线性渐变

41. linerGradient()
42. colors: [[颜色，颜色位置],[],[]...]
43. 颜色的位置 0~1 0开始 1结束 默认方向是竖直的
44. direction：GradientDirection.Right  到右
45. angle:数字   => 0~360 坐标轴顺时针旋转
46. repeating: 布尔值   => 默认false

47. 2. 径向渐变

49. radialGradient()
50. {center:[] , radius:  , colors: [[],[]...], repeating: 布尔值}

52. 阴影

54. shadow()
55. {redius: ,type: ,color: ,offsetX: ,offsetY: ,fill: }

56. 多态样式

58. stateStyles()
59. clicked  组件点击状态的样式
60. pressed  组件按下状态的样式
61. normal     组件无状态（默认状态）
62. disabled  组件禁用的状态
63. focused  组件获焦的状态
64. 点击时，背景变红
65. stateStyles({clicked:{ .backgroundColor.red }})
66. 多态的重要说明！！！
67. 多态的样式，必须有初始值（正常值）
68. 可以在无状态里加初始值，或者加在stateStyles外面
69. 无状态里可以设置初始值（正常值）,变回原来的效果
71. 按下状态 => 长按（动画有区别），短按（点击）
72. pressed({})
73.  pressed: {
74.             .backgroundColor(Color.Red)
75.             .width(50)
76.             .height(50)
77.             .borderRadius(50)
78.             .margin(100)
79.           }

80. 动画 

82. 通用属性变化时，可以通过动画实现渐变的效果
83. animation()
84. 参数 {}
85. 1. 动态支持的通用属性
86. 2. 动画 得有样式的切换
87. duration  设置动画时长  1秒=1000毫秒 默认1000毫秒
88. delay       设置动画的延迟的时长  默认0
89. curve       设置动画曲线 （影响变化的速率）
90. Curve.Ease 秋千效果  => 默认
91. Curve.linear 匀速
92. iterations   设置动画执行几次，设置-1表示无限次播放，0是没有效果

94. 图形变换（平移，缩放，旋转）

96. 平移
97. translate()
98. 参数 {x: ,y: ,z:  }
99. 缩放 
100. scale()
101. 参数 {x: ,y: ,z: ,centerX: ,centerY: }  默认值是1
102. centerX 和 centerY 可以改变缩放时中心轴的位置
103. 旋转
104. rotate()
105. 参数 ： {angle: , cnterX: ,centerY: }
106. 动画 => 必须放在多态的下面才能生效

107. text 扩展

109. Text() {
110.     // ImageSpan    图片组件 行内显示的结构
111.     
112.     // Span 文本组件  行内显示的结构
113.     
114.     Span('123')
115.     Span('456')
116. }

知识点思维导图