#创作者激励#【FFH】自制ArkUI组件-文件管理器（二）悬浮小球！ 原创 精华

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.

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

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.

  @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.

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.