【每日学点HarmonyOS Next知识】沉浸式状态栏、类似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() 等给外部使用。

参考以下案例，地址如下：developer.huawei.com/consumer/cn…

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

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

可以设置customStyle为true，自定义样式，背景就是透明的文档：developer.huawei.com/consumer/cn…

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)
  }
}

可以参考以下案例实现:gitee.com/harmonyos-c…