HarmonyOS鸿蒙Next中Refresh组件refreshing参数如何传入对象中的boolean值

给出如下demo，问题在TODO标记的地方已经指出:

@Component
struct Child {
  @Watch("changeRefreshing") @ObjectLink refresh: RefreshBean
  @State arr: String[] = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10']
  @State isRefreshing: boolean = false 
  // TODO: //1. 如何才能让RefreshBean中isRefreshing变化后，this.isRefreshing可以感知变化 //或者 2. Refresh组件中的refreshing参数怎么传入RefreshBean对象的isRefreshing参数 

  changeRefreshing() {
    this.isRefreshing = this.refresh.isRefreshing
  }

  build() {
    Refresh({ refreshing: $$this.isRefreshing }) {
      List() {
        ForEach(this.arr, (item: string) => {
          ListItem() {
            Text('' + item + this.isRefreshing)
              .width('100%')
              .height(100)
              .fontSize(16)
              .textAlign(TextAlign.Center)
              .borderRadius(10)
              .backgroundColor(0xFFFFFF)
          }
        }, (item: string) => item)
      }
      .onScrollIndex((first: number) => {
        console.info(first.toString())
      })
      .width('100%')
      .height('100%')
      .divider({
        strokeWidth: 1,
        color: Color.Yellow,
        startMargin: 10,
        endMargin: 10
      })
      .scrollBar(BarState.Off)
    }
    .onRefreshing(() => {
      setTimeout(() => { 
        // TODO: 
        this.refresh.setRefresh(false)
      }, 2000)
      console.log('onRefreshing test')
    }) 
    .backgroundColor(0x89CFF0) 
    .refreshOffset(64) 
    .pullToRefresh(true)
  }
}

eggper 1楼•1 个月前

看下这个demo呢

@Entry
@Component
struct RefreshPage {
  @State refresh: RefreshBean = new RefreshBean(false)
  build() {
    Column() {
      Child({ refresh: this.refresh })
    }
  }
}

@Observed
export class RefreshBean {
  isRefreshing: boolean
  constructor(isRefreshing: boolean) {
    this.isRefreshing = isRefreshing
  }
  setRefresh(refresh: boolean) {
    this.isRefreshing = refresh
  }
}

@Component
struct Child {
  @Watch("changeRefreshing")
  @ObjectLink refresh: RefreshBean
  @State arr: String[] = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10']
  @State isRefreshing: boolean = false
  // TODO:
  //1. 如何才能让RefreshBean中isRefreshing变化后，this.isRefreshing可以感知变化
  //或者 2. Refresh组件中的refreshing参数怎么传入RefreshBean对象的isRefreshing参数
  changeRefreshing() {
    this.isRefreshing = this.refresh.isRefreshing
  }
  build() {
    Refresh({ refreshing: this.isRefreshing }) {
      List() {
        ForEach(this.arr, (item: string) => {
          ListItem() {
            Text('' + item + this.isRefreshing)
              .width('100%')
              .height(100)
              .fontSize(16)
              .textAlign(TextAlign.Center)
              .borderRadius(10)
              .backgroundColor(0xFFFFFF)
          }
        }, (item: string) => item)
      }
      .onScrollIndex((first: number) => {
        console.info(first.toString())
      })
      .width('100%')
      .height('100%')
      .divider({
        strokeWidth: 1,
        color: Color.Yellow,
        startMargin: 10,
        endMargin: 10
      })
      .scrollBar(BarState.Off)
    }
    .onRefreshing(() => {
      setTimeout(() => {
        // TODO:
        // this.refresh.setRefresh(false)
        this.changeRefreshing()
      }, 2000)
      console.log('onRefreshing test')
    })
    .backgroundColor(0x89CFF0)
    .refreshOffset(64)
    .pullToRefresh(true)
  }
}

更多关于HarmonyOS鸿蒙Next中Refresh组件refreshing参数如何传入对象中的boolean值的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

gougou168 2楼•1 个月前

在HarmonyOS鸿蒙Next中，Refresh组件的refreshing参数用于控制下拉刷新的状态。refreshing参数需要传入一个boolean类型的值，表示当前是否处于刷新状态。若要从对象中传入boolean值，可以通过以下方式实现：

假设你有一个对象state，其中包含一个isRefreshing属性，类型为boolean。你可以在Refresh组件中直接绑定该属性：

@State state: { isRefreshing: boolean } = { isRefreshing: false };

build() {
  Refresh({
    refreshing: this.state.isRefreshing,
    onRefresh: () => {
      // 处理刷新逻辑
    }
  }) {
    // 子组件内容
  }
}

在上述代码中，refreshing参数直接绑定了state.isRefreshing的值。当isRefreshing为true时，Refresh组件会显示刷新状态；为false时，刷新状态结束。

如果需要动态更新isRefreshing的值，可以在onRefresh回调中修改state.isRefreshing：

onRefresh: () => {
  this.state.isRefreshing = true;
  // 模拟异步刷新操作
  setTimeout(() => {
    this.state.isRefreshing = false;
  }, 2000);
}

这样，refreshing参数会根据state.isRefreshing的值动态更新。

vueper 3楼•1 个月前

在HarmonyOS鸿蒙Next中，Refresh组件的refreshing参数用于控制刷新状态。你可以通过绑定一个对象中的boolean值来动态控制刷新状态。例如：

@State isRefreshing: boolean = false;

build() {
  Refresh({
    refreshing: this.isRefreshing,
    onRefresh: () => {
      // 处理刷新逻辑
      this.isRefreshing = true;
      // 模拟刷新完成
      setTimeout(() => {
        this.isRefreshing = false;
      }, 2000);
    }
  }) {
    // 刷新内容
  }
}

这里，isRefreshing作为refreshing参数传入，控制Refresh组件的刷新状态。