HarmonyOS/鸿蒙.learn/NEXT 星河版-黑马/04.组件化开发.md

组件化开发

轮播组件Swiper

Swiper是一个容器组件，当设置了多个子组件后，可以对这些子组件进行轮播显示

Swiper(){
//轮播内容
}
.width()
.height()
//会自动拉伸轮播内容的大小
Column(){
     Swiper(){
       Text('1')
         .backgroundColor(Color.Blue)
       Text('2')
         .backgroundColor(Color.Green)
       Text('3')
         .backgroundColor(Color.Orange)
     }
     .width('100%')
     .height(100)
   }

Swiper常见属性

属性	传值	作用	默认值
loop	boolean	是否开启循环	true
autoPlay	boolean	是否自动播放	false
interval	number	自动播放时间间隔（ms)	3000
vertical	boolean	纵向滑动轮播	false

Swiper指示器设置

.indicator(
       Indicator.dot()//小圆点
         .itemWidth(10)//默认宽高，颜色
         //.itemHeight(20)
         //.color(Color.Black)
         .selectedItemWidth(30)//选中宽高，颜色
         //.selectedItemHeight(30)
         .selectedColor(Color.White)
     )

样式&结构重用

@Extend 扩展组件（样式、事件）

1. 全局
2. 要求统一组件
3. 格式：

@Extend(Text)//应用到哪一类组件
function text1(color: ResourceColor,txt: string)//传递参数
{
   //组件样式设置
  
}

@Styles 抽取通用属性、事件

1. 允许不同类型组件之间样式复用

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