HarmonyOS 鸿蒙Next 跑马灯效果
HarmonyOS 鸿蒙Next 跑马灯效果
我们想实现首页App的跑马灯效果，但是研究下无法完美实现，麻烦帮忙下
遇见问题如下: 如果采用text的TextOverflow.MARQUEE，如何实现暂停重新播放等效果？
如果采用Marquee的话如何实现TextOverflow.MARQUEE的滚动效果（即连续滚动，不间断） 以上尝试了都无法满足
textOverflow暂不支持开始，暂停滚动和滚动速度的设定。 可以先考虑使用scroll自行封装的替代方案，参考下面demo：
@Entry
@Component
struct Index {
@State message: string = 'Hello World';
@State textList: string[] = [
'this is a test string1 this is a test string1 this is a test string1',
'this is a test string2 this is a test string2',
'this is a test string3 this is a test string3 this is a test string3 this is a test string3',
]
build() {
Row() {
Column() {
myMarqueeCard({
textList: this.textList,
})
}
.width('100%')
.margin(20)
}
.height('100%')
}
}
@Component
struct myMarqueeCard {
@Prop textList: string[]
scroller1: Scroller = new Scroller()
scroller2: Scroller = new Scroller()
scroller3: Scroller = new Scroller()
build() {
Column() {
this.SingleText(this.textList[0], this.scroller1)
this.SingleText(this.textList[1], this.scroller2)
this.SingleText(this.textList[2], this.scroller3)
}
}
@Builder
SingleText(text: string, scroller: Scroller) {
Scroll(scroller) {
Row() {
Text(text).fontSize(30)
}
}
.width(300)
.scrollable(ScrollDirection.Horizontal)
.enableScrollInteraction(false)
.scrollBar(BarState.Off)
.onAppear(() => {
this.handleScroll(scroller)
})
}
handleScroll(scroller: Scroller) {
let timer: number = setInterval(() => {
const curOffset: OffsetResult = scroller.currentOffset()
scroller.scrollTo({
xOffset: curOffset.xOffset + 50, yOffset: curOffset.yOffset, animation: {
duration: 1000,
curve: Curve.Linear
}
})
if (scroller.isAtEnd()) {
clearInterval(timer);
if (this.scroller1.isAtEnd() && this.scroller2.isAtEnd() && this.scroller3.isAtEnd()) {
// 其他操作
}
}
}, 500)
}
}
Scroll参考 https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V13/ts-container-scroll-V13
执行完之后，如果想重新执行 在修改这个方法
handleScroll(scroller: Scroller) {
let timer: number = setInterval(() => {
const curOffset: OffsetResult = scroller.currentOffset()
scroller.scrollTo({
xOffset: curOffset.xOffset + 50, yOffset: curOffset.yOffset, animation: {
duration: 1000,
curve: Curve.Linear
}
})
if (scroller.isAtEnd()) {
clearInterval(timer);
//当都停止之后 想重新滚动，可以重新执行
if (this.scroller1.isAtEnd() && this.scroller2.isAtEnd() && this.scroller3.isAtEnd()) {
其他操作
this.scroller1.scrollTo({xOffset: 0, yOffset: this.scroller1.currentOffset().yOffset})
this.handleScroll(this.scroller1)
this.scroller2.scrollTo({xOffset: 0, yOffset: this.scroller2.currentOffset().yOffset})
this.handleScroll(this.scroller2)
this.scroller3.scrollTo({xOffset: 0, yOffset: this.scroller3.currentOffset().yOffset})
this.handleScroll(this.scroller3)
}
}
}, 500)
}
更多关于HarmonyOS 鸿蒙Next 跑马灯效果的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
HarmonyOS 鸿蒙Next提供了多种实现跑马灯效果的方式。
首先，可以通过内置的Marquee组件实现单行文本的滚动展示，当文本内容宽度超过组件宽度时滚动，否则不滚动。在使用时，需明确设置其宽度，以确保滚动行为符合预期布局范围。
其次，若Marquee组件无法满足特定需求，例如文本接替并显示在同一可视区，可以通过Text组件外层包裹Scroll组件的方式实现。具体需设置Scroll组件的百分比宽度值，并获取文本内容宽度和Scroll组件宽度，通过判断文本宽度是否大于Scroll组件宽度来执行文本滚动。
此外，还可以创建自定义组件，如MarqueeGradientTextView，在其中定义文本内容、字体大小、字体颜色、渐变角度等参数，并在build函数中设置Text组件的跑马灯效果，实现更复杂的跑马灯效果，如渐变跑马灯。
如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html 。
