1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

@Entry
@Component
struct MarqueeDemo {
  @State text: string = '这是一个短字符串'
  @State isShowMarquee: boolean = false

  build() {
    Column() {
      Row() {
        if (this.isShowMarquee) {
          Marquee({
            start: true,
            src: this.text
          })
            .width(300)
        } else {
          Text(this.text)
            .fontSize(14)
            .onAreaChange((oldValue, newValue) => {
                // oldValue为区域变化之前的值
                // newValue为区域变化之后的值
                // newValue.width为变化之后的实际占位虚拟像素
              if (newValue.width > 280) {
                this.isShowMarquee = true
              }
            }
            ).margin({
            left: 10
          })
        }
        Image($r('app.media.product'))
          .width(20)
          .margin(10)
      }

      Button('切换字符串长度')
        .onClick(() => {
          this.text = '这是一个很长的字符串，目的是为了测试跑马灯效果'
        })
    }
    .width('100%')
  }
}