自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

自制ArkUI組件-文件管理器（二）懸浮小球！

作者：FFH_PETSJ
系統(tǒng) OpenHarmony
為了讓它變成一款可用性強(qiáng)的開(kāi)發(fā)輔助組件，我決定從UI交互下手，將其打造成懸浮動(dòng)態(tài)窗口，并封裝成組件接口 FilerBall。

??想了解更多關(guān)于開(kāi)源的內(nèi)容，請(qǐng)?jiān)L問(wèn)：??

??51CTO 開(kāi)源基礎(chǔ)軟件社區(qū)??

??https://ost.51cto.com??

前言

經(jīng)過(guò)重重的改造封裝，這一版的FilerBall組件基本達(dá)到了輔助開(kāi)發(fā)的效果

繼上一篇文章，組件的基本功能完成了，但它的實(shí)用性和簡(jiǎn)潔性還可以有很大的提高。
為了讓它變成一款可用性強(qiáng)的開(kāi)發(fā)輔助組件，我決定從UI交互下手，將其打造成懸浮動(dòng)態(tài)窗口，并封裝成組件接口 FilerBall。
上一篇介紹了文件管理接口的使用，這篇就以它為案例，簡(jiǎn)單介紹如何發(fā)揮ArkUI框架在前端獨(dú)特的優(yōu)勢(shì)，包括UI交互動(dòng)畫(huà)、組件自適應(yīng)能力、自定義組件封裝等，經(jīng)驗(yàn)值滿(mǎn)滿(mǎn)！
上文鏈接：https://ost.51cto.com/posts/21308。

先上效果圖：組件懸浮小窗。

#創(chuàng)作者激勵(lì)#【FFH】自制ArkUI組件-文件管理器（二）懸浮小球！-開(kāi)源基礎(chǔ)軟件社區(qū)

??點(diǎn)擊跳轉(zhuǎn)文末查看效果圖GIF??。

交互設(shè)計(jì)

組件UI整體設(shè)計(jì)：

  • 頂部可滑動(dòng)橫幅：展示當(dāng)前訪(fǎng)問(wèn)的路徑。
    滑動(dòng)效果使用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')
  • 中間主體：展示該層級(jí)的文件，文件夾目錄可進(jìn)入下一級(jí)。
Scroller(){
  if(數(shù)組不為空){
    ForEach(this.curNodes,(item,index)=>{
      ......
    },item=>item.id)
  }else ......
}
  • 底部返回按鍵：返回上一級(jí)文件。
  • “進(jìn)入箭頭”實(shí)現(xiàn)：由于屬于三方組件，不方便用icon圖片，因此用“>”符號(hào)經(jīng)過(guò) ??圖形變換?? 來(lái)代替。
Text(item.fileType === 0 ? '>' : '')
  .scale({ y: 4 })
  .height('60%')
  .fontColor('#ccc')
  .margin({ right: '3%' })

屬性

scale

可以分別設(shè)置X軸、Y軸、Z軸的縮放比例，默認(rèn)值為1，同時(shí)可以通過(guò)centerX和centerY設(shè)置縮放的中心點(diǎn)。

自適應(yīng)布局：

ArkUI自身具有自適應(yīng)的能力，我們則需要用對(duì)屬性方法和遵循某些規(guī)律就可實(shí)現(xiàn)組件自適應(yīng)布局
本組件中基本使用Column和Row容器組件實(shí)現(xiàn)布局，例如：

  • 頂部和底部高度固定，中間主體的高度彈性伸縮。
  • 單個(gè)文件UI，內(nèi)容信息左對(duì)齊，箭頭右對(duì)齊，寬度采用百分比設(shè)置。

豎屏



橫屏

懸浮窗改造！

在不修改原代碼的基礎(chǔ)上，利用自身的自適應(yīng)性，額外封裝一層組件： 原組件Filer ==> 懸浮球動(dòng)態(tài)擴(kuò)展組件FilerBall 。

FilerBall 調(diào)用示例：

父組件及接口基本屬性設(shè)置：

import { FilerBall } from '../views/filemanager';
......
Column() {
  FilerBall({
    positionX: 0,
    positionY: 0,
    ballSize: 60
  })
}
.position({ x: 0, y: 0 }) // 因?yàn)槌尸F(xiàn)懸浮態(tài)，所以要設(shè)置初始絕對(duì)坐標(biāo)，對(duì)應(yīng)positionX、positionY參數(shù)，用于懸浮球拖動(dòng)效果（必需）
.zIndex(1) // 置于窗口最上層（必需）
.width(300) // 寬高可設(shè)置在父組件，也可傳入FilerBall參數(shù)Width、Height
.height(500)

參數(shù)

描述

必填

ETS類(lèi)型

positionX

懸浮球初始屏幕定位 X

是，需與父組件一致

number

positionY

懸浮球初始屏幕定位 Y

是，需與父組件一致

number

ballSize

懸浮球大小

是

Length

Height

Filer組件高度

否，默認(rèn) 100%

Length

Width

Filer組件高度

否，默認(rèn) 100%

Length

代碼實(shí)現(xiàn)：

封裝FilerBall的代碼主要是這幾點(diǎn)：

  • 拖動(dòng)效果
  • 懸浮球與Filer組件的切換效果
  1. 拖動(dòng)效果
    下面是實(shí)現(xiàn)拖動(dòng)效果的代碼：
@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. 懸浮球與Filer組件的切換效果
  • 使用ArkUI的條件渲染來(lái)切換懸浮球和Filer組件的UI。
  • 給Filer添加加上像手機(jī)應(yīng)用小窗頂部的橫條組件，用于按住拖拽、點(diǎn)擊切換懸浮球態(tài)。
  • 為切換添加顯示動(dòng)畫(huà)（文檔傳送門(mén)：??顯示動(dòng)畫(huà)?? ）

Filer封裝操作橫條。

Column() {
  Column() { // Filer頂部的操作橫條
   Line()
      .width('60%')
      .height(6)
    .backgroundColor('#ff868686')
  }
  .width('100%')
  .height(20)
  .justifyContent(FlexAlign.Center)
  .onClick() // 點(diǎn)擊切換成懸浮球態(tài)
  .onTouch() // 拖拽代碼
  Column() {
   Filer() // Filer組件
  }
}
.position({ x: this.gx, y: this.gy }) // 拖拽效果相關(guān)變量

顯示動(dòng)畫(huà)。

@State @Watch('onBallStateChange') ballState: boolean = true
onBallStateChange() {
  if (this.ballState === false)
    animateTo({ duration: 300, curve: Curve.LinearOutSlowIn }, () => { // 顯示動(dòng)畫(huà)，為打開(kāi)賦予動(dòng)畫(huà)
      this.tempW = '100%'
      this.tempH = '100%'
    })
  else {
    this.tempW = '0%'
    this.tempH = '0%'
  }
}

最終效果圖GIF

#創(chuàng)作者激勵(lì)#【FFH】自制ArkUI組件-文件管理器（二）懸浮小球！-開(kāi)源基礎(chǔ)軟件社區(qū)

END

構(gòu)想源于實(shí)踐，實(shí)踐啟發(fā)構(gòu)想。在開(kāi)發(fā)當(dāng)中偶然的想法一步步凝聚了現(xiàn)實(shí)，編寫(xiě)FilerBall組件的過(guò)程學(xué)到了很多經(jīng)驗(yàn)。它仍具有很高的擴(kuò)展性和創(chuàng)造性，作為一個(gè)簡(jiǎn)單的開(kāi)發(fā)輔助工具組件，可能實(shí)現(xiàn)的不是很好，但也許日后的某次開(kāi)發(fā)中我會(huì)需要它，正好接下來(lái)也學(xué)習(xí)學(xué)習(xí)怎么封裝成第三方庫(kù)。
（源代碼在文章的資源附件FilerBall.md中，是在 ???https://ost.51cto.com/posts/21308?? 附件代碼基礎(chǔ)上封裝的，測(cè)試用的Demo工程壓縮包也一起上傳了）。

文章相關(guān)附件可以點(diǎn)擊下面的原文鏈接前往下載

 https://ost.51cto.com/resource/2543。

??想了解更多關(guān)于開(kāi)源的內(nèi)容，請(qǐng)?jiān)L問(wèn)：??

??51CTO 開(kāi)源基礎(chǔ)軟件社區(qū)??

??https://ost.51cto.com??

責(zé)任編輯：jianghua 來(lái)源： 51CTO 開(kāi)源基礎(chǔ)軟件社區(qū)
ArkUI組件文件管理器
相關(guān)推薦

2023-02-24 16:08:09

ArkUI組件應(yīng)用文件管理器

2011-09-05 19:03:47

UbuntuNautilus

2023-02-13 08:39:03

GNOME 2LinuxCaja

2012-06-04 10:02:19

Linux文件管理器

2023-02-06 17:37:01

LinuxSpaceFM文件管理器

2010-12-28 14:53:29

服務(wù)器管理器

2018-09-17 11:12:14

Linux文件管理器加密文件

2022-03-10 14:57:35

ArkUIets項(xiàng)目開(kāi)發(fā)鴻蒙

2022-12-17 16:57:18

Linux文件管理器

2009-05-25 09:57:10

Ajax文件管理Web開(kāi)發(fā)

2013-03-26 11:11:38

Windows Blu文件管理器

2022-11-03 18:28:05

C語(yǔ)言Vely

2018-11-12 09:30:49

Linux命令文件管理器

2009-02-01 10:17:22

布局管理器LayoutManagGUI

2013-03-29 12:52:14

Android位置管理

2020-12-25 07:41:36

KubernetesOpenKruise應(yīng)用

2014-02-24 15:26:39

開(kāi)源文件管理器

2019-09-05 09:08:53

Android TV文件管理器應(yīng)用軟件

2015-12-08 12:17:04

2011-12-16 13:27:16

360文件管理
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)