鸿蒙开发加强

Swiper 轮播
样式的重复使用
Grid和GridItem

提供滑动轮播显示的效果
Swiper() {
// 轮播内容
// 设置尺寸(撑开Swiper)

}

尺寸：
设置Swiper的尺寸：内容会拉伸为和Swiper一致（优先级高）
设置内容尺寸：会将Swiper撑开

优先级高 =》 你自己的宽高 顶不过 父结构的宽高
如果没有宽高，自动拉伸成父结构的宽高
如果不给父结构设置宽高，那么每一个子结构都需要单独设置，建议以后都给父结构设置宽高

没有设置父结构的宽高，会拿到最大的宽或者高

autoPlay  boolean  自动播放 默认false
interval   number   控制切换时间  默认3000
loop      boolean   循环   默认true
vertical   boolean   是否纵向  默认false

圆点指示器
indicator  默认true 显示  false关闭
可以设置 样式 颜色 位置  数字
.indicator(Indicator.dot()) => 圆点样式
.indicator(Indicator.digit()) => 数字样式

.indicator(Indicator.dot()
.itemWidth()
.itemHeight()
.color()
.selectedItemWidth()
.selectedItemHeight()
.selectedColor()) => 圆点

位置 =》有优先级 左>右   上>下
.indicator(Indicator.dot()
.left(数字))
.right(数字))
.top(数字))
.bottom(数字))

页面切换
如何通过代码控制轮播图切换
步骤：
实例化控制器
设置给Swiper
调用控制器方法

实例化控制器 =》调用一个函数（此处需要通过new关键字 调用这个函数）

控制器不能被状态装饰装饰

样式复用(点击事件也可以)
@Extend  =》 写在结构外面（组件外/全局）,给某个组件用

@Extend(组件名)
function 函数名() {
  .组件样式
}

调用
 .函数名()
 

消息提示（在下面显示）
prompAction.showToast({messgage: '提示'})

// 在组件内定义
// 组件内样式复用才能用this，没有function关键字
@Styles
 fun() {
.通用属性
.通用事件(()=>{})
}

// 全局样式复用 ,不能使用this，有function关键字
@Styles
function fun() {
.通用属性
.通用事件(()=>{})
}

知识点
@Extend 和 @Styles 区别
@Extend 只能全局
@Extend 针对组件
@Extend 样式不限制 @Styles 通用的
@Styles 不支持传参

// 重复使用样式 重复使用结构
@Builder
fun() {
 重复使用的样式和重复使用的结构
}

调用时 用 this.fun()
可以传参

往往不重复使用的样式结构也写在@Builder里

网格布局Grid/GridItem
固定行列
Grid的子组件必须是GridItem组件
GridItem只能有一个子组件
grid组件设置了宽高，其尺寸为设置值
Grid组件没有设置宽高，Grid组件的尺寸为默认适应父组件尺寸

columnsTemplate('1fr 1fr 1fr') // 控制每个格子的比例
rowsTemplate('1fr 1fr 1fr')

columnsGap(数字)  // 控制格子之间的间隙
rowsGap(数字)

合并行列  =》GridItem()的属性方法
rowStart
rowEnd
columnStart
columnEnd

合并式时按照1234排列

设置滚动 ：
水平滚动 设置的是rowsTemplate，Grid的滚动方向是水平方向
竖直滚动 设置的是rowsTemplate，Grid的滚动方向是竖直方向

水平 =》 保留rowsTemplate（ 一定要超出 ） 小格子高度直接失效  配合GridItem设置宽或者加空格

竖直 =》 保留columnsTemplate（ 一定要超出 ） 小格子高度直接失效  配合GridItem设置宽或者加空格

局部的大于全局的优先级