布局进阶
- 列表 List => 容器组件
通用属性
- 颜色渐变,阴影,多态,动画animation,图形变换(平移,缩放,旋转)
- ------------------------List------------------------
- List的主轴默认是垂直方向的
- 内容超过屏幕大小时,提供滚动功能
- list组价中可以水平或者垂直滚动
- List() {
- listItem() {}
- ...
- }
- 修改List的主轴方向
- listDirecton()
- List() {
- listItem() {}
- ...
- }
- .listDirecton(Axis.Horizontal) // 设置list主轴方向
列模式
lanes()
参数1 交叉轴列数
参数2 交叉轴方向的间距 => 可选参数
listDirecton()
List() {
listItem() {}
...
}
.listDirecton(Axis.Horizontal) // 设置list主轴方向
.lanes(2,10) // 交叉轴列数为2,间距为10
.lanes(2) // 剩余间距默认平均分配
- 列对齐方式 => 交叉手上的对齐方式
- alignListItem(ListItemAlign.枚举)
滚动条状态
- scrollBar(BarState.枚举)
- Off
- On
- Auto => 默认
- 分割线样式
- divider({strokeWidth: 数字,color: Color.blue,startMargin:数字,endMargin: 数字})
- startMargin 开始位置不加分割线
- endtMargin 结束位置不加分割线
- -------------------通用属性---------------------
1. 线性渐变
- linerGradient()
- colors: [[颜色,颜色位置],[],[]...]
- 颜色的位置 0~1 0开始 1结束 默认方向是竖直的
- direction:GradientDirection.Right 到右
- angle:数字 => 0~360 坐标轴顺时针旋转
- repeating: 布尔值 => 默认false
2. 径向渐变
- radialGradient()
- {center:[] , radius: , colors: [[],[]...], repeating: 布尔值}
阴影
- shadow()
- {redius: ,type: ,color: ,offsetX: ,offsetY: ,fill: }
多态样式
- stateStyles()
- clicked 组件点击状态的样式
- pressed 组件按下状态的样式
- normal 组件无状态(默认状态)
- disabled 组件禁用的状态
- focused 组件获焦的状态
- 点击时,背景变红
- stateStyles({clicked:{ .backgroundColor.red }})
- 多态的重要说明!!!
- 多态的样式,必须有初始值(正常值)
- 可以在无状态里加初始值,或者加在stateStyles外面
- 无状态里可以设置初始值(正常值),变回原来的效果
- 按下状态 => 长按(动画有区别),短按(点击)
- pressed({})
- pressed: {
- .backgroundColor(Color.Red)
- .width(50)
- .height(50)
- .borderRadius(50)
- .margin(100)
- }
动画
- 通用属性变化时,可以通过动画实现渐变的效果
- animation()
- 参数 {}
- 1. 动态支持的通用属性
- 2. 动画 得有样式的切换
- duration 设置动画时长 1秒=1000毫秒 默认1000毫秒
- delay 设置动画的延迟的时长 默认0
- curve 设置动画曲线 (影响变化的速率)
- Curve.Ease 秋千效果 => 默认
- Curve.linear 匀速
- iterations 设置动画执行几次,设置-1表示无限次播放,0是没有效果
图形变换(平移,缩放,旋转)
- 平移
- translate()
- 参数 {x: ,y: ,z: }
- 缩放
- scale()
- 参数 {x: ,y: ,z: ,centerX: ,centerY: } 默认值是1
- centerX 和 centerY 可以改变缩放时中心轴的位置
- 旋转
- rotate()
- 参数 : {angle: , cnterX: ,centerY: }
- 动画 => 必须放在多态的下面才能生效
text 扩展
- Text() {
- // ImageSpan 图片组件 行内显示的结构
- // Span 文本组件 行内显示的结构
- Span('123')
- Span('456')
- }
鸿蒙开发-第七天
最新推荐文章于 2024-08-24 16:13:21 发布