【FFH】自制ArkUI组件-文件管理器（二）悬浮小球！_arkui-x

前言

经过重重的改造封装，这一版的FilerBall组件基本达到了辅助开发的效果

继上一篇文章，组件的基本功能完成了，但它的实用性和简洁性还可以有很大的提高。
为了让它变成一款可用性强的开发辅助组件，我决定从UI交互下手，将其打造成悬浮动态窗口，并封装成组件接口 FilerBall。
上一篇介绍了文件管理接口的使用，这篇就以它为案例，简单介绍如何发挥ArkUI框架在前端独特的优势，包括UI交互动画、组件自适应能力、自定义组件封装等，经验值满满！

---

先上效果图：组件悬浮小窗

---

交互设计

组件UI整体设计：

• 顶部可滑动横幅：展示当前访问的路径
  滑动效果使用Scroll组件

Row() {
  Scroll() {
    Row() {
      ForEach(this.pathArray, (item, index) => {
        Text('>').fontColor('#ff888888').margin(7).scale({ y: 2 }).height('100%')
        Text(item).height('100%').maxLines(1).margin({ right: index === (this.pathArray.length - 1) ? 7 : 0 })
      }, item => item)

    }.height('100%').justifyContent(FlexAlign.Start)
  }.scrollable(ScrollDirection.Horizontal)
}.width('100%').height(40).backgroundColor('#ffeeeeee')
1
2
3
4
5
6
7
8
9
10
11

• 中间主体：展示该层级的文件，文件夹目录可进入下一级

Scroller(){
	if(数组不为空){
		ForEach(this.curNodes,(item,index)=>{
			......
		},item=>item.id)
	}else ......
}
1
2
3
4
5
6
7

• 底部返回按键：返回上一级文件
• “进入箭头”实现：由于属于三方组件，不方便用icon图片，因此用“>”符号经过 图形变换 来代替

Text(item.fileType === 0 ? '>' : '')
	.scale({ y: 4 })
	.height('60%')
	.fontColor('#ccc')
	.margin({ right: '3%' })
1
2
3
4
5

自适应布局：

ArkUI自身具有自适应的能力，我们则需要用对属性方法和遵循某些规律就可实现组件自适应布局
本组件中基本使用Column和Row容器组件实现布局，例如：

• 顶部和底部高度固定，中间主体的高度弹性伸缩
• 单个文件UI，内容信息左对齐，箭头右对齐，宽度采用百分比设置
  竖屏
  
  横屏
  

---

悬浮窗改造！

在不修改原代码的基础上，利用自身的自适应性，额外封装一层组件： 原组件Filer ==> 悬浮球动态扩展组件FilerBall 。

FilerBall 调用示例：

父组件及接口基本属性设置：

import { FilerBall } from '../views/filemanager';
......
Column() {
  FilerBall({
    positionX: 0,
    positionY: 0,
    ballSize: 60
  })
}
.position({ x: 0, y: 0 }) // 因为呈现悬浮态，所以要设置初始绝对坐标，对应positionX、positionY参数，用于悬浮球拖动效果（必需）
.zIndex(1) // 置于窗口最上层（必需）
.width(300) // 宽高可设置在父组件，也可传入FilerBall参数Width、Height
.height(500)

1
2
3
4
5
6
7
8
9
10
11
12
13
14

---

代码实现：

封装FilerBall的代码主要是这几点：

• 拖动效果
• 悬浮球与Filer组件的切换效果

1. 拖动效果
   下面是实现拖动效果的代码：

  @State gx: number = 0
  @State gy: number = 0
  @Prop positionX: number // FilerBall 组件的传参
  @Prop positionY: number // FilerBall 组件的传参
  private px = 0
  private py = 0
Column() {
  .onTouch(event => {
    if (event.type === TouchType.Move) {
      this.gx = event.touches[0].screenX - this.px - this.positionX
      this.gy = event.touches[0].screenY - this.py - this.positionY
    }
    else if (event.type === TouchType.Down) {
      this.px = event.touches[0].x
      this.py = event.touches[0].y
    }
  })
}.position({ x: this.gx, y: this.gy }) // 要拖拽的组件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

2. 悬浮球与Filer组件的切换效果

• 使用ArkUI的条件渲染来切换悬浮球和Filer组件的UI。
• 给Filer添加加上像手机应用小窗顶部的横条组件，用于按住拖拽、点击切换悬浮球态。
• 为切换添加显示动画（文档传送门：显示动画 ）

Filer封装操作横条

Column() {
	Column() { // Filer顶部的操作横条
 	 Line()
   	  .width('60%')
  	  .height(6)
 	  .backgroundColor('#ff868686')
	}
	.width('100%')
	.height(20)
	.justifyContent(FlexAlign.Center)
	.onClick() // 点击切换成悬浮球态
	.onTouch() // 拖拽代码
	Column() {
 	 Filer() // Filer组件
	}
}
.position({ x: this.gx, y: this.gy }) // 拖拽效果相关变量
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

显示动画

@State @Watch('onBallStateChange') ballState: boolean = true
onBallStateChange() {
  if (this.ballState === false)
    animateTo({ duration: 300, curve: Curve.LinearOutSlowIn }, () => { // 显示动画，为打开赋予动画
      this.tempW = '100%'
      this.tempH = '100%'
    })
  else {
    this.tempW = '0%'
    this.tempH = '0%'
  }
}
1
2
3
4
5
6
7
8
9
10
11
12

END

构想源于实践，实践启发构想。在开发当中偶然的想法一步步凝聚了现实，编写FilerBall组件的过程学到了很多经验。它仍具有很高的扩展性和创造性，作为一个简单的开发辅助工具组件，可能实现的不是很好，但也许日后的某次开发中我会需要它，正好接下来也学习学习怎么封装成第三方库。
（源代码将上传到资源）