$$語法:內置組件雙向同步

2024-01-25 12:08 更新

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

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

使用規(guī)則

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

使用示例

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

當使用了$$符號綁定isRefreshing狀態(tài)變量時,頁面進行下拉操作,isRefreshing會變成true。

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

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

以上內容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號