OpenHarmony实战开发-如何实现文件分布式同步编辑

场景说明

两台设备组网的分布式场景是工作中常常需要的。常见的如代码的同步编辑、文档的同步修改等。这样的分布式场景有助于加快工作效率，减少工作中的冗余，本例将为大家介绍如何实现上述功能。

效果呈现

本例效果如下：

运行环境

本例基于以下环境开发，开发者也可以基于其他适配的版本进行开发。

• IDE：DevEco Studio 4.0.0.201 Beta1
• SDK：Ohos_sdk_public 4.0.7.5 (APIVersion 10 Beta1)

实现思路

在分布式文件场景中，分布式设备管理包含了分布式设备搜索、分布式设备列表弹窗、远端设备拉起三部分。 首先在分布式组网内搜索设备，然后把设备展示到分布式设备列表弹窗中，最后根据用户的选择拉起远端设备。

• 分布式设备搜索：通过SUBSCRIBE_ID搜索分布式组网内的设备。
• 分布式设备列表弹窗：使用@CustomDialog装饰器来装饰分布式设备列表弹窗。
• 远端设备拉起：通过startAbility(deviceId)方法拉起远端设备的包。
• 分布式数据管理：(1)管理分布式数据库：创建一个distributedObject分布式数据对象实例，用于管理分布式数据对象。

​ (2)订阅分布式数据变化：通过this.distributedObject.on(‘status’, this.statusCallback)监听分布式数据对象的变更。

开发步骤

申请所需权限

在model.json5中添加以下配置：

"requestPermissions": [
      {
   
        "name": "ohos.permission.DISTRIBUTED_DATASYNC"//允许不同设备间的数据交换
      },
      {
   
        "name": "ohos.permission.ACCESS_SERVICE_DM"//允许系统应用获取分布式设备的认证组网能力
      }
    ]

构建UI框架

index页面：

TitleBar组件呈现标题栏。使用List组件呈现文件列表，ListItem由一个呈现文件类型标志的Image组件，一个呈现文件标题的Text组件，一个呈现文件内容的Text组件组成。

build() {
   
    Column() {
   
      TitleBar({
    rightBtn: $r('app.media.trans'), onRightBtnClicked: this.showDialog })
	//自/common/TitleBar.ets中引入标题栏相关。点击标题栏中的右侧按钮会调用showDialog()函数连接组网设备
      Row() {
   
        Text($r('app.string.state'))
          .fontSize(30)
        Image(this.isOnline ? $r('app.media.green') : $r('app.media.red'))//两台设备组网成功后状态显示为绿色、否则为红色
          .size({
    width: 30, height: 30 })
          .objectFit(ImageFit.Contain)
      }
      .width('100%')
      .padding(16)
		//通过数据懒加载的方式从数据源中每次迭代一个文件进行展示，可用列表被放置在滚动容器中，被划出可视区域外的资源会被回收
      List({
    space: 10 }) {
   
        LazyForEach(this.noteDataSource, (item: Note, index) => {
   
          ListItem() {
   
            NoteItem({
    note: item, index: index })//NoteItem引入自common/NoteItem.ets,负责主页文件信息的呈现
              .id(`${
    item.title}`)
          }
        }, item => JSON.stringify(item))
      }
      .width('95%')
      .margin(10)
      .layoutWeight(1)

      Row() {
   
        Column() {
   
          Image($r('app.media.clear'))//清除按钮
            .size({
    width: 40, height: 40 })
          Text($r('app.string.clear'))
            .fontColor(Color.Red)
            .fontSize(20)
        }.layoutWeight(1)
        .id('clearNote')
        .onClick(() => {
            //点击清除按钮清除所有文件
          Logger.info(TAG, 'clear notes')
          this.noteDataSource['dataArray'] = []
          this.noteDataSource.notifyDataReload()
          this.globalObject.clear()
          AppStorage.SetOrCreate('sessionId', this.sessionId)
        })

        Column() {
          Image($r('app.media.add'))//添加按钮
            .size({
    width: 40, height: 40 })
          Text($r('app.string.add'))
            .fontColor(Color.Black)
            .fontSize(20)
        }.layoutWeight(1)
        .id('addNote')
        .onClick(() => {
            //点击添加按钮跳转到编辑页面
          router.push({
            url: 'pages/Edit',
            params: {
              note: new Note('', '', -1),
              isAdd: true
            }
          })
        })
      }
      .width