【每日学点鸿蒙知识】沉浸式状态栏、类似ref 属性功能属性实现、自定义对话框背景透明、RichEditor粘贴回调、自动滚动列表

1、HarmonyOS 沉浸式状态栏？

实现沉浸式状态栏功能时，能够实现，但是目前每个自定义组件都需要padding top 状态栏的高度才行，有办法实现统一设置吗？不需要每个自定义组件中都padding top 状态栏的高度？

暂时没有统一设置的方法，可以将每个页面的底部padding top统一封装成一个组件，再每个页面引入该组件来达到统一维护的目的。以此达到提升开发效率，降低维护成本的目的

2、HarmonyOS 自定义组件如何实现类似web开发中 React 或 Vue 的 ref 属性功能？

React 或 Vue 中的 ref 属性可以获得对组件的引用，调用组件暴露给外部的方法。HarmonyOS开发中系统自带组件比如 Web，有与之对应的 controller。如果是自定义组件，如何实现 controller 的功能呢？比如我封装一个 LottieView 用于声明式的展示 lottie 动画，同时需要暴露一些方法如：play() pause() stop() 等给外部使用。

参考以下案例，地址如下：https://developer.huawei.com/consumer/cn/forum/topic/0203144585061300847?fid=0109140870620153026

3、HarmonyOS CustomDialogController自定义一个view，然后背景颜色像设置为透明色，然后Color.Transparent不管用，默认就是白色的，希望可以设置背景颜色为透明？

希望可以设置背景颜色为透明，自定义view怎么设置透明色

可以设置customStyle为true，自定义样式，背景就是透明的文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-methods-custom-dialog-box-V5#customdialogcontrolleroptions%E5%AF%B9%E8%B1%A1%E8%AF%B4%E6%98%8E

4、HarmonyOS RichEditor粘贴内容不会有回调？

RichEditor的aboutToIMEInput和onIMEInputComplete在输入或者删除时候有回调显示，但是如果直接粘贴内容则不会有回调，看文档中提供了onPaste方法，但该方法只开放了阻止系统默认粘贴事件的能力，有没有提供粘贴成功后的回调？

粘贴事件完成的回调，在onPaste回调里面加延时器。

.onPaste((): void => {setTimeout(() =>{const spans = this.controller.getSpans()console.log(spans.length.toString() + JSON.stringify(spans))},0)
})

5、HarmonyOS 自动横向滚动List？

可以参考以下代码，如需要自动滚动，使用setInterval调用scroller.scrollTo方法

class Article {id: string;title: string;brief: string;constructor(id: string, title: string, brief: string) {this.id = id;this.title = title;this.brief = brief;}
}@Entry
@Component
struct ArticleListView {@State isListReachEnd: boolean = false;@State articleList: Array<Article> = [new Article('001', '第1篇文章', '文章简介内容'),new Article('002', '第2篇文章', '文章简介内容'),new Article('003', '第3篇文章', '文章简介内容'),new Article('004', '第4篇文章', '文章简介内容'),new Article('005', '第5篇文章', '文章简介内容'),new Article('006', '第6篇文章', '文章简介内容')]loadMoreArticles() {this.articleList.push(this.articleList[0]);this.articleList.splice(0,1);}build() {Column({ space: 5 }) {List() {ForEach(this.articleList, (item: Article) => {ListItem() {ArticleCard({ article: item }).margin({ top: 20 })}}, (item: Article) => item.id)}.onReachEnd(() => {this.loadMoreArticles();}).padding(20).scrollBar(BarState.Off)}.width('100%').height('100%').backgroundColor(0xF1F3F5)}
}@Component
struct ArticleCard {@Prop article: Article;build() {Row() {Image($r('app.media.startIcon')).width(80).height(80).margin({ right: 20 })Column() {Text(this.article.title).fontSize(20).margin({ bottom: 8 })Text(this.article.brief).fontSize(16).fontColor(Color.Gray).margin({ bottom: 8 })}.alignItems(HorizontalAlign.Start).width('80%').height('100%')}.padding(20).borderRadius(12).backgroundColor('#FFECECEC').height(120).width('100%').justifyContent(FlexAlign.SpaceBetween)}
}

可以参考以下案例实现:https://gitee.com/harmonyos-cases/cases/tree/master/CommonAppDevelopment/feature/marquee