鸿蒙学习 - 轮播控件和@Extend给组件封装自定义样式

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'
  swiperC: SwiperController = new SwiperController()
  build() {
    Column() {
        Swiper(this.swiperC){
          Text("111").customTextStyle()
            .width('100%')
          Text("222").customTextStyle()
            .width('100%')
          Image($r('app.media.icon'))
            .width('100%').height(200)
            .backgroundColor(Color.Blue)
        }.loop(false)
          .autoPlay(true)
          .interval(1000) // 每1秒自动轮播一次
          .indicatorStyle({ // 指示器样式
            right:0,
            color:Color.White,
            selectedColor:Color.Red
          })

        Button("确定").onClick(() => {
          this.swiperC.showPrevious()
        }).width(100).height(60)

      }
      .height('100%')
      .justifyContent(FlexAlign.Center)
    .backgroundColor(Color.Gray)
  }
}

@Extend(Text) // 给Text组件添加样式
function customTextStyle() {
  .fontSize(50)
  .fontColor(Color.Red)
  .fontWeight(FontWeight.Regular)
  .textAlign(TextAlign.Center)
  .backgroundColor(Color.Yellow)
  .height(200)
}