Extending to Status Bar, Global Storage Issues, State Variable Collaboration, Refresh Component Usage

@Entry
@Component
struct Index {
  build() {
    Swiper() {
      Column() {
        Image($r('app.media.background'))
          .height('50%').width('100%')
          // Set image to extend to status bar
          .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP])
        Column() {
          Text('HarmonyOS 第一课')
            .fontSize(32)
            .margin(30)
          Text('Through a gradual learning path, both inexperienced and experienced developers can master the ArkTS declarative development paradigm and experience a simpler and more friendly HarmonyOS application development journey.')
            .fontSize(20).margin(20)
        }.height('50%').width('100%')
        .backgroundColor(Color.White)
        // Set text content area background to extend to navigation bar
        .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.BOTTOM])
      }
    }
    .width('100%')
    .height('100%')
    // Disable the default clipping effect of the Swiper component to allow child nodes to draw outside the Swiper.
    .clip(false)
  }
}

import taskpool from '@ohos.taskpool';
import { SendableData } from './SendableData';

@Concurrent
function threadGetData(param: string): SendableData {
  let ret = new SendableData()
  ret.name = param + "-o"
  ret.age = Math.floor(Math.random() * 40)
  ret.likes = Math.floor(Math.random() * 100)
  return ret // Return a new SendableData instance
}


@ObservedV2
class ViewModelWithSendable {
  @Trace data?: SendableData // Track the entire object with @Trace
  @Trace sendParam: string = "chen"

  runTask() {
    taskpool.execute(threadGetData, this.sendParam).then((value: object) => {
      this.data = value as SendableData // Replace the entire data object
      this.sendParam = this.data.name
    })
  }
}

@Entry
@Component
struct Index {
  mySendData: ViewModelWithSendable = new ViewModelWithSendable()

  build() {
    Column() {
      Text(`SendParam=${this.mySendData.sendParam}`).fontSize(30).fontColor(Color.Red)
      Button("runTask").onClick(this.mySendData.runTask.bind(this.mySendData))
      if (this.mySendData.data) {
        Row() {
          Text(this.mySendData.data.name).fontSize(30).layoutWeight(4)
          Text(this.mySendData.data.age.toString()).fontSize(30).fontColor(Color.Blue).layoutWeight(1)
          Text(this.mySendData.data.likes.toString()).fontSize(30).fontColor(Color.Green).layoutWeight(1)
          Text(this.mySendData.data.follow ? "已关注" : "关注").fontSize(30).fontColor(Color.Green).layoutWeight(2)
        }
      }
    }
  }
}

import taskpool from '@ohos.taskpool';
import { SendableData } from './SendableData';

@Concurrent
function threadLike(param: SendableData): boolean {
  param.likes++
  return true
}

@Concurrent
function threadFollow(param: SendableData): boolean {
  param.likes++
  return true
}

@Concurrent
function threadReset(param: SendableData): boolean {
  let likes: number = param.likes
  // .....
  return true
}


@ObservedV2
class ViewModelWithSendable {
  data: SendableData = new SendableData() // No need to track overall changes
  @Trace sendParam: string = "chen"
  @Trace likes: number = 0 // Define responsive data
  @Trace follow: boolean = false // Define responsive data

  iLike() {
    taskpool.execute(threadLike, this.data).then((value: object) => {
      this.likes = this.data.likes // Assign only changed properties for UI refresh
    })
  }

  iFollow() {
    taskpool.execute(threadFollow, this.data).then((value: object) => {
      this.follow = this.data.follow // Assign only changed properties for UI refresh
    })
  }
  reset() {
    // Update data first, then refresh the UI, and then use the thread to work
    this.likes = 0
    this.data.likes = this.likes
    this.follow = false
    this.data.follow = this.follow
    taskpool.execute(threadReset, this.data)
  }
}

@Entry
@Component
struct Index {
  mySendData: ViewModelWithSendable = new ViewModelWithSendable()

  build() {
    Column() {
      Row() {
        Button("Like").onClick(this.mySendData.iLike.bind(this.mySendData))
        Button("Follow").onClick(this.mySendData.iFollow.bind(this.mySendData))
        Button("Reset").onClick(this.mySendData.reset.bind(this.mySendData))
      }

      Row() {
        Text(this.mySendData.data.name).fontSize(30).layoutWeight(4)
        Text(this.mySendData.data.age.toString()).fontSize(30).fontColor(Color.Blue).layoutWeight(1)
        Text(this.mySendData.data.likes.toString()).fontSize(30).fontColor(Color.Green).layoutWeight(1)
        Text(this.mySendData.data.follow ? "已关注" : "关注").fontSize(30).fontColor(Color.Green).layoutWeight(2)
      }
    }
  }
}

@Entry
@Component
struct Index {
  @State isRefreshing: boolean = false
  @State arr: String[] = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10']

  @Builder
  refreshComponent() {
    Stack() {
      Row() {
        LoadingProgress()
          .height(32)
          .width(40)
          .color(Color.Red)
        Text("正在刷新...")
          .fontSize(16)
          .margin({ left: 20 })
      }
      .clip(true)
      .alignItems(VerticalAlign.Center)
    }.width("100%").align(Alignment.Center)
  }

  build() {
    Stack({ alignContent: Alignment.TopStart }) {
      Flex({ direction: FlexDirection.Column }) {
        Refresh({
          refreshing: $$this.isRefreshing,
          builder: this.refreshComponent()
        }) {
          Scroll() {
            Column() {
              ForEach(this.arr, (item: string) => {
                Text('' + item)
                  .width('100%')
                  .height(100)
                  .fontSize(16)
                  .textAlign(TextAlign.Center)
                  .borderRadius(10)
              }, (item: string) => item)
            }

          }

        }
        .onStateChange((refreshStatus: RefreshStatus) => {
          console.info('Refresh onStatueChange state is ' + refreshStatus)
        })
        .onRefreshing(() => {
          setTimeout(() => {
            this.isRefreshing = false
          }, 2000)
          console.log('onRefreshing test')
        })

      }
    }
  }
}