鸿蒙开发组件之跑马灯Marquee_鸿蒙 走马灯

鸿蒙封装了跑马灯组件Marquee，使用起来确实很简单。需要注意的是想要让跑马灯效果动起来，需要设置start为true。并且父组件的宽度要小于Marquee的宽度。

@Entry
@Component
struct OfficialMarqueePage {
 
  build() {
      Column() {
        Row() {
          Marquee({src:'我爱你中国',
            start:true, //开始
            step:20, //速度，默认6
            loop:10, //循环次数
          })
            .fontColor(Color.White)
            .fontSize(100)
            //开始
            .onStart(() => {
              console.info('Marquee onStart')
            })
            //文本播放一次结束
            .onBounce(() => {
              console.info('Marquee onBounce')
            })
            //完成
            .onFinish(() => {
              console.info('Marquee onFinish')
            })
        }
        //设置父组件的宽度小于文本宽度
        .width(200)
        .height(100)
        .backgroundColor(Color.Black)
      }
      .width('100%')
      .height('100%')
  }
}