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

控制頁(yè)面刷新范圍（OpenHarmony）

作者：野生菌君
系統(tǒng) OpenHarmony
根據(jù)業(yè)務(wù)需要，有時(shí)我們需要觸發(fā)單個(gè)組件的狀態(tài)更新，有時(shí)需要觸發(fā)部分或全部組件的狀態(tài)更新。那么如何控制組件狀態(tài)刷新的范圍呢？本例將為大家提供一種參考方案。

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

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

https://ost.51cto.com

場(chǎng)景說明

在實(shí)現(xiàn)頁(yè)面UI時(shí)，業(yè)務(wù)方需要根據(jù)業(yè)務(wù)邏輯動(dòng)態(tài)更新組件的狀態(tài)，常見的如在手機(jī)桌面長(zhǎng)按某個(gè)App的圖標(biāo)時(shí)，圖標(biāo)背景色、大小等會(huì)發(fā)生變化。根據(jù)業(yè)務(wù)需要，有時(shí)我們需要觸發(fā)單個(gè)組件的狀態(tài)更新，有時(shí)需要觸發(fā)部分或全部組件的狀態(tài)更新。那么如何控制組件狀態(tài)刷新的范圍呢？本例將為大家提供一種參考方案。

效果呈現(xiàn)

本例最終效果如下：

控制頁(yè)面刷新范圍（OpenHarmony）-開源基礎(chǔ)軟件社區(qū)

運(yùn)行環(huán)境

本例基于以下環(huán)境開發(fā)，開發(fā)者也可以基于其他適配的版本進(jìn)行開發(fā)：

  • IDE: DevEco Studio 3.1 Release
  • SDK: Ohos_sdk_public 3.2.12.5(API Version 9 Release)

實(shí)現(xiàn)思路

ArkUI可以通過頁(yè)面的狀態(tài)數(shù)據(jù)驅(qū)動(dòng)UI的更新，其UI更新機(jī)制可以通過如下表達(dá)式來體現(xiàn)：

UI=f(state)

用戶構(gòu)建了UI模型，其中參數(shù)state代表頁(yè)面組件的運(yùn)行時(shí)狀態(tài)。當(dāng)state改變時(shí)，UI作為返回結(jié)果，也將進(jìn)行對(duì)應(yīng)的改變刷新。f作為狀態(tài)管理機(jī)制，維護(hù)組件運(yùn)行時(shí)的狀態(tài)變化所帶來的UI重新渲染。組件的狀態(tài)改變可通過狀態(tài)變量進(jìn)行控制。

基于上述理論，如果要控制頁(yè)面的更新范圍，我們必須要：定義準(zhǔn)確狀態(tài)變量，并控制狀態(tài)變量影響的組件范圍。

本例中包含8個(gè)APP圖標(biāo)，其中涉及5種狀態(tài)變化，按照局部刷新和全局刷新可分為：

  • 局部刷新（單個(gè)卡片變化）
  • 點(diǎn)擊卡片，卡片背景色變?yōu)榧t色。
  • 點(diǎn)擊卡片，卡片進(jìn)行縮放。
  • 拖拽卡片，卡片位置變化。
  • 全局刷新（全部卡片變化）
  • 長(zhǎng)按某個(gè)卡片，為所有卡片添加刪除圖標(biāo)。
  • 點(diǎn)擊刪除圖標(biāo)外的任意地方，刪除圖標(biāo)消失。

所以處理思路為，控制局部刷新的狀態(tài)變量在子組件中定義，綁定子組件，控制全局刷新的狀態(tài)變量在父組件中進(jìn)行定義，并由父組件傳遞給所有子組件。如下圖：

控制頁(yè)面刷新范圍（OpenHarmony）-開源基礎(chǔ)軟件社區(qū)

開發(fā)步驟

由于本例重點(diǎn)講解刷新區(qū)域的控制，所以開發(fā)步驟會(huì)著重講解相關(guān)實(shí)現(xiàn)，不相關(guān)的內(nèi)容不做介紹，全量代碼可參考完整代碼章節(jié)。

創(chuàng)建APP卡片組件作為子組件，每個(gè)卡片包含文本和刪除圖標(biāo)。
具體代碼如下：

@Component
export struct AppItem {
  ...
  build() {
    Stack({ alignContent: Alignment.TopEnd }) {
      Image($r('app.media.ic_public_close'))
        .height(30)
        .width(30)
        .zIndex(2)
        .offset({
          x: -12,
          y: 12
        })
      Text(this.data.title)
        .width(100)
        .height(100)
        .fontSize(16)
        .margin(10)
        .textAlign(TextAlign.Center)
        .borderRadius(10)
    }   
  }
}

創(chuàng)建父組件，并在父組件中引用子組件。
具體代碼如下：

@Entry
@Component
struct Sample {
  ...
  build() {
    Stack({ alignContent: Alignment.Bottom }) {
      Flex({ wrap: FlexWrap.Wrap }) {
        // 通過循環(huán)渲染加載所有子組件
        ForEach(this.items, (item: ItemProps, index: number) => {
          // 引用App卡片子組件
          AppItem({data: this.items[index]})
        }, (item: ItemProps) => item.id.toString())
      }
      .width('100%')
      .height('100%')
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#ffffff')
    .margin({ top:50 })
  }
}

由于卡片背景色變化、卡片縮放、卡片拖拽在觸發(fā)時(shí)都是針對(duì)單個(gè)卡片的狀態(tài)變化，所以在卡片子組件中定義相應(yīng)的狀態(tài)變量，用來控制單個(gè)卡片的狀態(tài)變化。
本例中定義狀態(tài)變量“data”用來控制卡片拖拽時(shí)位置的刷新；定義狀態(tài)變量”downFlag“用來監(jiān)聽卡片是否被按下，從而控制卡片背景色及縮放狀態(tài)的更新。
具體代碼如下：

@Component
export struct AppItem {
  // 定義狀態(tài)變量data，用來控制卡片被拖拽時(shí)位置的刷新
  @State data: ItemProps = {};
  // 定義狀態(tài)變量downFlag用來監(jiān)聽卡片是否被按下，從而控制卡片背景色及縮放狀態(tài)的更新
  @State downFlag: boolean = false;
  ...
  build() {
    Stack({ alignContent: Alignment.TopEnd }) {
      Image($r('app.media.ic_public_close'))
            .height(30)
            .width(30)
            .zIndex(2)
            .offset({
              x: -12,
              y: 12
            })
      Text(this.data.title)
        .width(100)
        .height(100)
        .fontSize(16)
        .margin(10)
        .textAlign(TextAlign.Center)
        .borderRadius(10)
        // 根據(jù)狀態(tài)變量downFlag的變化，更新背景色
        .backgroundColor(this.downFlag ? '#EEA8AB' : '#86C7CC')
        // 背景色更新時(shí)添加屬性動(dòng)畫
        .animation({
          duration: 500,
          curve: Curve.Friction
        })
        // 綁定onTouch事件，監(jiān)聽卡片是否被按下，根據(jù)不同狀態(tài)改變downFlag的值
        .onTouch((event: TouchEvent) => {
          if (event.type == TouchType.Down) {
            this.downFlag = true
          } else if (event.type == TouchType.Up) { 
            this.downFlag = false
          }
        })
    }
    // 根據(jù)狀態(tài)變量downFlag的變化，控制卡片的縮放
    .scale(this.downFlag ? { x: 0.8, y: 0.8 } : { x: 1, y: 1 })
    // 通過狀態(tài)變量data的變化，控制卡片位置的更新
    .offset({
      x: this.data.offsetX,
      y: this.data.offsetY
    })
    // 拖動(dòng)觸發(fā)該手勢(shì)事件
    .gesture(
      GestureGroup(GestureMode.Parallel,
        ...
        PanGesture(this.panOption)
          .onActionStart((event: GestureEvent) => {
            console.info('Pan start')
          })
          // 拖動(dòng)卡片時(shí)，改變狀態(tài)變量data的值
          .onActionUpdate((event: GestureEvent) => {
            this.data.offsetX = this.data.positionX + event.offsetX
            this.data.offsetY = this.data.positionY + event.offsetY
          })
          .onActionEnd(() => {
            this.data.positionX = this.data.offsetX
            this.data.positionY = this.data.offsetY
            console.info('Pan end')
          })
      )
    )
  }
}

長(zhǎng)按卡片，卡片右上角會(huì)出現(xiàn)刪除圖標(biāo)。

由于所有卡片右上角都會(huì)出現(xiàn)刪除圖標(biāo)，所以這里需要做全局的刷新。本例在父組件中定義狀態(tài)變量“deleteVisibility”，在調(diào)用子組件時(shí)，將其作為參數(shù)傳遞給所有卡片子組件，并且通過@Link裝飾器與子組件進(jìn)行雙向綁定，從而可以控制所有卡片子組件中刪除圖標(biāo)的更新。

父組件代碼：

@Entry
@Component
struct Sample {
  ...
  // 定義狀態(tài)變量deleteVisibility，控制App卡片上刪除圖標(biāo)的更新
  @State deleteVisibility: boolean = false
  ...
  build() {
    Stack({ alignContent: Alignment.Bottom }) {
      Flex({ wrap: FlexWrap.Wrap }) {
        // 通過循環(huán)渲染加載所有子組件
        ForEach(this.items, (item: ItemProps, index: number) => {
          // 將狀態(tài)變量deleteVisibility傳遞給每一個(gè)子組件，從而deleteVisibility變化時(shí)可以觸發(fā)所有子組件的更新
          AppItem({ deleteVisibility: $deleteVisibility, data: this.items[index], onDeleteClick: this.delete })
        }, (item: ItemProps) => item.id.toString())
      }
      .width('100%')
      .height('100%')
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#ffffff')
    .margin({ top:50 })
    .onClick(() => {
      this.deleteVisibility = false
    })
  }

子組件代碼：

@Component
export struct AppItem {
  ...
  // 定義deleteVisibility狀態(tài)變量，并通過@Link裝飾器與父組件中的同名變量雙向綁定，該變量值發(fā)生變化時(shí)父子組件可雙向同步
  @Link deleteVisibility: boolean;
  ...
  build() {
    Stack({ alignContent: Alignment.TopEnd }) {
      // 通過deleteVisibility控制刪除圖標(biāo)的隱藏和顯示，當(dāng)deleteVisibility值為true時(shí)顯示，為false時(shí)隱藏
      if(this.deleteVisibility){
        Image($r('app.media.ic_public_close'))
          .height(30)
          .width(30)
          .zIndex(2)
          // 控制刪除圖標(biāo)的顯隱
          .visibility(Visibility.Visible)
          .offset({
            x: -12,
            y: 12
          })
          .onClick(() => this.onDeleteClick(this.data.id))
      }else{
        Image($r('app.media.ic_public_close'))
          .height(30)
          .width(30)
          .zIndex(2)
          .visibility(Visibility.Hidden)
          .offset({
            x: -12,
            y: 12
          })
          .onClick(() => this.onDeleteClick(this.data.id))
      }
    ...
    .gesture(
      GestureGroup(GestureMode.Parallel,
        // 識(shí)別長(zhǎng)按手勢(shì)
        LongPressGesture({ repeat: true })
          .onAction((event: GestureEvent) => {
            if (event.repeat) {
              // 長(zhǎng)按時(shí)改變deleteVisibility的值為true，從而更新刪除圖標(biāo)為顯示狀態(tài)
              this.deleteVisibility = true
            }
            console.info('LongPress onAction')
          }),
        ...
      )
    )
  }
}

完整代碼

本例完整代碼如下：
data.ets文件（數(shù)據(jù)模型文件）

// data.ets
// AppItem組件接口信息
export interface ItemProps {
  id?: number,
  title?: string,
  offsetX?: number, // X偏移量
  offsetY?: number, // Y偏移量
  positionX?: number, // 在X的位置
  positionY?: number, // 在Y的位置
}

// AppItem初始數(shù)據(jù)
export const initItemsData: ItemProps[] = [
  {
    id: 1,
    title: 'APP1',
    offsetX: 0,
    offsetY: 0,
    positionX: 0,
    positionY: 0
  },
  {
    id: 2,
    title: 'APP2',
    offsetX: 0,
    offsetY: 0,
    positionX: 0,
    positionY: 0
  },
  {
    id: 3,
    title: 'APP3',
    offsetX: 0,
    offsetY: 0,
    positionX: 0,
    positionY: 0
  },
  {
    id: 4,
    title: 'APP4',
    offsetX: 0,
    offsetY: 0,
    positionX: 0,
    positionY: 0
  },
  {
    id: 5,
    title: 'APP5',
    offsetX: 0,
    offsetY: 0,
    positionX: 0,
    positionY: 0
  },
  {
    id: 6,
    title: 'APP6',
    offsetX: 0,
    offsetY: 0,
    positionX: 0,
    positionY: 0
  },
  {
    id: 7,
    title: 'APP7',
    offsetX: 0,
    offsetY: 0,
    positionX: 0,
    positionY: 0
  },
  {
    id: 8,
    title: 'APP8',
    offsetX: 0,
    offsetY: 0,
    positionX: 0,
    positionY: 0
  },
]

AppItem.ets文件（卡片子組件）

// AppItem.ets
import { ItemProps } from '../model/data';

@Component
export struct AppItem {
  // 定義狀態(tài)變量data，用來控制卡片被拖拽時(shí)位置的刷新
  @State data: ItemProps = {};
  // 定義狀態(tài)變量downFlag用來監(jiān)聽卡片是否被按下，從而控制卡片背景色及縮放狀態(tài)的更新
  @State downFlag: boolean = false;
  // 定義deleteVisibility狀態(tài)變量，并通過@Link裝飾器與父組件中的同名變量雙向綁定，該變量值發(fā)生變化時(shí)父子組件可雙向同步
  @Link deleteVisibility: boolean;

  private onDeleteClick: (id: number) => void;
  private panOption: PanGestureOptions = new PanGestureOptions({ direction: PanDirection.All });
  build() {
    Stack({ alignContent: Alignment.TopEnd }) {
      // 通過deleteVisibility控制刪除圖標(biāo)的隱藏和顯示，當(dāng)deleteVisibility值為true時(shí)顯示，為false時(shí)隱藏
      if(this.deleteVisibility){
        Image($r('app.media.ic_public_close'))
          .height(30)
          .width(30)
          .zIndex(2)
          // 控制刪除圖標(biāo)的顯隱
          .visibility(Visibility.Visible)
          .offset({
            x: -12,
            y: 12
          })
          .onClick(() => this.onDeleteClick(this.data.id))
      }else{
        Image($r('app.media.ic_public_close'))
          .height(30)
          .width(30)
          .zIndex(2)
          .visibility(Visibility.Hidden)
          .offset({
            x: -12,
            y: 12
          })
          .onClick(() => this.onDeleteClick(this.data.id))
      }

      Text(this.data.title)
        .width(100)
        .height(100)
        .fontSize(16)
        .margin(10)
        .textAlign(TextAlign.Center)
        .borderRadius(10)
        // 根據(jù)狀態(tài)變量downFlag的變化，更新背景色
        .backgroundColor(this.downFlag ? '#EEA8AB' : '#86C7CC')
        // 背景色更新時(shí)添加屬性動(dòng)畫
        .animation({
          duration: 500,
          curve: Curve.Friction
        })
        // 綁定onTouch事件，監(jiān)聽卡片是否被按下，根據(jù)不同狀態(tài)改變downFlag的值
        .onTouch((event: TouchEvent) => {
          if (event.type == TouchType.Down) {
            this.downFlag = true
          } else if (event.type == TouchType.Up) { // 手指抬起
            this.downFlag = false
          }
        })
    }
    // 根據(jù)狀態(tài)變量downFlag的變化，控制卡片的縮放
    .scale(this.downFlag ? { x: 0.8, y: 0.8 } : { x: 1, y: 1 })
    // 通過狀態(tài)變量data的變化，控制卡片位置的更新
    .offset({
      x: this.data.offsetX,
      y: this.data.offsetY
    })
    // 拖動(dòng)觸發(fā)該手勢(shì)事件
    .gesture(
      GestureGroup(GestureMode.Parallel,
        // 識(shí)別長(zhǎng)按手勢(shì)
        LongPressGesture({ repeat: true })
          .onAction((event: GestureEvent) => {
            if (event.repeat) {
              // 長(zhǎng)按時(shí)改變deleteVisibility的值為true，從而更新刪除圖標(biāo)為顯示狀態(tài)
              this.deleteVisibility = true
            }
            console.info('LongPress onAction')
          }),
        PanGesture(this.panOption)
          .onActionStart((event: GestureEvent) => {
            console.info('Pan start')
          })
          // 拖動(dòng)卡片時(shí)，改變狀態(tài)變量data的值
          .onActionUpdate((event: GestureEvent) => {
            this.data.offsetX = this.data.positionX + event.offsetX
            this.data.offsetY = this.data.positionY + event.offsetY
          })
          .onActionEnd(() => {
            this.data.positionX = this.data.offsetX
            this.data.positionY = this.data.offsetY
            console.info('Pan end')
          })
      )
    )
  }
}

Index.ets文件（父組件）

// Index.ets
import { AppItem } from '../components/MyItem';
import { initItemsData } from '../model/data';
import { ItemProps } from '../model/data';

@Entry
@Component
struct Sample {
  @State items: ItemProps[] = [];
  // 定義狀態(tài)變量deleteVisibility，控制App卡片上刪除圖標(biāo)的更新
  @State deleteVisibility: boolean = false

  // 刪除指定id組件
  private delete = (id: number) => {
    const index = this.items.findIndex(item => item.id === id);
    this.items.splice(index, 1);
  }

  // 生命周期函數(shù)：組件即將出現(xiàn)時(shí)調(diào)用
  aboutToAppear() {
    this.items = [...initItemsData];
  }

  build() {
    Stack({ alignContent: Alignment.Bottom }) {
      Flex({ wrap: FlexWrap.Wrap }) {
        // 通過循環(huán)渲染加載所有子組件
        ForEach(this.items, (item: ItemProps, index: number) => {
          // 將狀態(tài)變量deleteVisibility傳遞給每一個(gè)子組件，從而deleteVisibility變化時(shí)可以觸發(fā)所有子組件的更新
          AppItem({ deleteVisibility: $deleteVisibility, data: this.items[index], onDeleteClick: this.delete })
        }, (item: ItemProps) => item.id.toString())
      }
      .width('100%')
      .height('100%')
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#ffffff')
    .margin({ top:50 })
    .onClick(() => {
      // 點(diǎn)擊組件，deleteVisibility值變?yōu)閒alse，從而隱藏所有卡片的刪除圖標(biāo)
      this.deleteVisibility = false
    })
  }
}

總結(jié)

刷新范圍一般通過狀態(tài)變量進(jìn)行控制，需要厘清狀態(tài)變量影響的范圍，從而當(dāng)狀態(tài)變量發(fā)生改變時(shí)可同步刷新相關(guān)的UI區(qū)域。

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

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

https://ost.51cto.com

責(zé)任編輯：jianghua 來源： 51CTO 開源基礎(chǔ)軟件社區(qū)
鴻蒙ArkUI
相關(guān)推薦

2012-08-14 14:00:21

JavaScript

2023-09-14 15:49:42

PWM鴻蒙

2012-05-22 11:15:37

jQuery

2021-03-12 16:25:17

技巧vue頁(yè)面刷新

2023-09-06 15:35:14

2015-05-13 09:36:18

js模擬手機(jī)下拉刷新

2015-03-26 13:14:53

javascriptjs callback實(shí)現(xiàn)調(diào)用

2018-07-16 15:17:49

2017-10-17 15:40:25

javascript刷新頁(yè)面

2024-11-26 11:59:06

2023-08-07 15:23:28

鴻蒙首次啟動(dòng)申請(qǐng)授權(quán)

2009-07-31 08:56:59

ASP.NET頁(yè)面刷新

2023-08-09 14:43:42

應(yīng)用開發(fā)ArkTS

2023-07-31 17:35:31

ArkTS鴻蒙

2012-03-02 09:37:53

Ajax

2022-01-07 09:56:16

鴻蒙HarmonyOS應(yīng)用

2022-06-01 22:35:25

滑桿組件鴻蒙

2023-09-13 15:33:57

I2C鴻蒙

2022-08-05 19:37:59

鴻蒙Api框架

2009-08-03 09:21:26

雅虎微軟Bing
點(diǎn)贊
收藏

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