$$語法:內(nèi)置組件雙向同步

2024-01-25 12:08 更新

$$運(yùn)算符為系統(tǒng)內(nèi)置組件提供TS變量的引用,使得TS變量和系統(tǒng)內(nèi)置組件的內(nèi)部狀態(tài)保持同步。

內(nèi)部狀態(tài)具體指什么取決于組件。例如,Refresh組件的refreshing參數(shù)。

使用規(guī)則

  • 當(dāng)前$$支持基礎(chǔ)類型變量,以及@State、@Link和@Prop裝飾的變量。
  • 當(dāng)前$$僅支持Refresh組件的refreshing參數(shù)。
  • $$綁定的變量變化時(shí),會(huì)觸發(fā)UI的同步刷新。

使用示例

Refresh組件的refreshing參數(shù)為例:

當(dāng)使用了$$符號(hào)綁定isRefreshing狀態(tài)變量時(shí),頁面進(jìn)行下拉操作,isRefreshing會(huì)變成true。

同時(shí),Text中的isRefreshing狀態(tài)也會(huì)同步改變?yōu)閠rue,如果不使用$$符號(hào)綁定,則不會(huì)同步改變。

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct RefreshExample {
  5. @State isRefreshing: boolean = false
  6. @State counter: number = 0
  7. build() {
  8. Column() {
  9. Text('Pull Down and isRefreshing: ' + this.isRefreshing)
  10. .fontSize(30)
  11. .margin(10)
  12. Refresh({ refreshing: $$this.isRefreshing, offset: 120, friction: 100 }) {
  13. Text('Pull Down and refresh: ' + this.counter)
  14. .fontSize(30)
  15. .margin(10)
  16. }
  17. .onStateChange((refreshStatus: RefreshStatus) => {
  18. console.info('Refresh onStatueChange state is ' + refreshStatus)
  19. })
  20. }
  21. }
  22. }

以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)