当前位置: 首页 > article >正文

【每日学点HarmonyOS Next知识】上下拉列表、停止无限循环动画、页面列表跟随列表滑动、otf字体、日期选择

1、HarmonyOS 实现只需要保留上拉加载更多,但是不需要下拉刷新?

Refresh通过参数refreshing判断当前组件是否正在刷新,可以控制该参数变化来触发下拉刷新:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-refresh-V5#ZH-CN_TOPIC_0000001930756929__refreshoptions%E5%AF%B9%E8%B1%A1%E8%AF%B4%E6%98%8E

Demo:

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

  build() {
    Column() {
      Button('刷新').onClick(()=>{
        this.isRefreshing = true
      })
      Refresh({ refreshing: $$this.isRefreshing}) {
        List() {
          ForEach(this.arr, (item: string) => {
            ListItem() {
              Text('' + item)
                .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)
      }
      .onStateChange((refreshStatus: RefreshStatus) => {
        console.info('Refresh onStatueChange state is ' + refreshStatus)
      })
      .onOffsetChange((value: number) => {
        console.info('Refresh onOffsetChange offset:' + value)
      })
      .onRefreshing(() => {
        setTimeout(() => {
          this.isRefreshing = false
        }, 2000)
        console.log('onRefreshing test')
      })
      .backgroundColor(0x89CFF0)
      .refreshOffset(64)
      .pullToRefresh(true)
    }
  }
}
2、HarmonyOS 如何停止一个无限循环的动画?

如何停止一个无限循环的动画

第一次触发无限循环动画后,再快速点击打断该无限循环动画, 再次点击就无法看到动画了。问题原因:动画其实不是不跑了,而是一直再跑,动画是不断的再叠加,后面就不明显了。解决方案:需要设置一个duration为0的动画,来停掉上一个动画,但是需要停在指定值,且和上一次设的终值不一样,然后再创建需要的动画。简单示例:

@Entry
@Component
struct Page240119142354017 {
  @State message: string = "Hello World";
  @State opacityValue: number = 0.5
  @State isRecording: boolean = false;

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
          .opacity(this.opacityValue)
          .onClick(() => {
            if(this.isRecording) {
              // 设置一个duration为0的动画停掉上一次动画
              animateTo({ duration: 0, iterations: 1, playMode: PlayMode.Normal }, () => {
                // 这里的opacityValue不可以和上一次设置的终止0.1相同
                this.opacityValue = 0.2
              })
              this.isRecording = false;
              // 再创建需要的动画
              animateTo({ duration: 0, iterations: 1, playMode: PlayMode.Normal }, () => {
                this.opacityValue = 1
              })
            } else {
              this.isRecording = true
              animateTo({ duration: 1500, iterations: -1, }, () => {
                this.opacityValue = 0.1
              })
            }
          })
      }
      .width("100%")
    }
    .height("100%")
  }
}
3、HarmonyOS 同一页面其中一个列表跟随另一个列表滚动?

如何在一个页面2个列表的情况下,滚动一个列表的时候,另外一个列表也同时跟着滚动?

参考demo:

@Entry
@Component
struct index240426171014042 {
  @State dataList: Array<number> = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19]

  private leftListScroller: Scroller = new Scroller()
  private rightListScroller: Scroller = new Scroller()
  private scrollFlag = -1 // 1=左边 2=右边

  build() {
    Row() {
      this.left()
      this.right()
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#a68765')
  }

  // 左边
  @Builder
  left() {
    Column() {
      Text('表头').width(100).height(100)
      List({ scroller: this.leftListScroller }) {
        ForEach(this.dataList, (item: number, index) => {
          ListItem() {
            Row() {
              Text(`左边${item}`).width(100).textAlign(TextAlign.Center)
            }
            .width("100%")
            .height(100)
            .backgroundColor(Color.Blue)
          }
        })
      }
      .width(100)
      .height("100%")
      .cachedCount(5)
      .edgeEffect(EdgeEffect.None)
      .onScrollStart(() => {
        this.scrollFlag = 1
      })
      .onScrollStop(() => {
        this.scrollFlag = -1
      })
      /*.onScroll((scrollOffset, state) => {
      let yOffset = this.leftListScroller.currentOffset().yOffset
      if (this.scrollFlag == 1) {
      // this.rightListScroller.scrollBy(0, scrollOffset)
      this.rightListScroller.scrollTo({ xOffset: 0, yOffset: yOffset })
      }
      })*/
      .onScrollFrameBegin((offset: number, state: ScrollState) => {
        if (this.scrollFlag == 1) {
          let yOffset = this.leftListScroller.currentOffset().yOffset + offset
          this.rightListScroller.scrollTo({ xOffset: 0, yOffset: yOffset })
        } return { offsetRemain: offset }
      })
    }
  }

  // 右边
  @Builder
  right() {
    Scroll() {
      Column() {
        Text('表头').width(700).height(100)
        this.rightList()
      }
      .width(700)
      .height('100%')
      .alignItems(HorizontalAlign.Start)
      .backgroundColor(Color.Orange)
    }
    .width(700)
    .height('100%')
    // .layoutWeight(1)
    .scrollable(ScrollDirection.Horizontal)
    .backgroundColor(Color.Pink)
  }

  // 右边的列表
  @Builder
  rightList() {
    List({ scroller: this.rightListScroller }) {
      ForEach(this.dataList, (item: number, index) => {
        ListItem() {
          Row() {
            Text(`第一列${item}`).width(100).textAlign(TextAlign.Center)
            Text(`第二列${item}`).width(100).textAlign(TextAlign.Center)
            Text(`第三列${item}`).width(100).textAlign(TextAlign.Center)
            Text(`第四列${item}`).width(100).textAlign(TextAlign.Center)
            Text(`第五列${item}`).width(100).textAlign(TextAlign.Center)
            Text(`第六列${item}`).width(100).textAlign(TextAlign.Center)
            Text(`第七列${item}`).width(100).textAlign(TextAlign.Center)
          }
          .width('100%')
          .height(100)
        }
      })
    }
    .width(700)
    .height('100%')
    .edgeEffect(EdgeEffect.None)
    .backgroundColor(Color.Yellow)
    .onScrollStart(() => {
      this.scrollFlag = 2
    })
    .onScrollStop(() => {
      this.scrollFlag = -1
    })
    /*.onScroll((scrollOffset, state) => {
    let yOffset = this.rightListScroller.currentOffset().yOffset
    if (this.scrollFlag == 2) {
    // this.leftListScroller.scrollBy(0, scrollOffset)
    this.leftListScroller.scrollTo({ xOffset: 0, yOffset: yOffset })
    }
    })*/
    .onScrollFrameBegin((offset: number, state: ScrollState) => {
      if (this.scrollFlag == 2) {
        let yOffset = this.rightListScroller.currentOffset().yOffset + offset
        this.leftListScroller.scrollTo({ xOffset: 0, yOffset: yOffset })
      } return { offsetRemain: offset }
    })
  }

}
4、HarmonyOS ArkUI的Text支持的字体类型是否包括otf类型的字体文件?

$rawfile方式参考文档:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-font-V5

字体文件放置路径:src/main/resources/rawfile/font/gealova.otf

代码中引用示例:

font.registerFont({
  familyName: 'Gealova',
  familySrc: $rawfile('font/gealova.otf')
})

在EntryAbility的onWindowStageCreate中注册字体,在模拟器上运行:

//EntryAbility的onWindowStageCreate中:
windowStage.getMainWindow().then(res=>{
  //注册字体
  const uiCtc=res.getUIContext()
  uiCtc.getFont().registerFont({
    familyName:'mediumRawFile',
    familySrc:$rawfile('font/BLACKTW-Bold.otf')

  })
  uiCtc.getFont().registerFont({
    familyName:'twrafile',
    familySrc:$rawfile('font/TW-Bold.otf')
  })
})

//index.ets
@Entry
@Component
struct index{
  @State message: string = 'Hello World'
  build() {
    Column() {
      Text(this.message)
        .align(Alignment.Center)
        .fontSize(20)
        .fontFamily('mediumRawFile') // mediumRawFile:注册自定义字体的名字
      Text('eeeee')
        .align(Alignment.Center)
        .fontSize(20)
        .fontFamily('twrafile')
    }.width('100%')

  }

}
5、HarmonyOS DatePicker?

DatePicker 是否可以控制 只显示 年和月 的属性。

只显示年和月的属性,可使用TextPickerDialog,range字段设置可选年月。参考文档:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-textpicker-V5

TextPicker(options?: TextPickerOptions)
根据range指定的选择范围创建文本选择器。
TextPickerOptions对象说明

名称类型必填说明
rangestring[] | string[] []10+ | Resource |<br>TextPickerRangeContent[]| TextCascadePickerRangeContent[]选择器的数据选择列表。不可设置为空数组,若设置为空数组,则不显示;若动态变化为空数组,则保持当前正常值显示。

说明:单列数据选择器使用string[],Resource,TextPickerRangeContent[]类型。

多列数据选择器使用string[][]类型。

多列联动数据选择器使用TextCascadePickerRangeContent[]类型。

Resource类型只支持strarray.json

range的类型及列数不可以动态修改。
selectednumber | number[]10+设置默认选中项在数组中的索引值。

默认值:0

说明:单列数据选择器使用number类型。

多列、多列联动数据选择器使用number[]类型。

从API version 10开始,该参数支持$$双向绑定变量。
valuestring | string[]10+设置默认选中项的值,优先级低于selected。

默认值:第一个元素值

说明:只有显示文本列表时该值有效。显示图片或图片加文本的列表时,该值无效。

单列数据选择器使用string类型。

多列、多列联动数据选择器使用string[]类型。

从API version 10开始,该参数支持$$双向绑定变量。

http://www.kler.cn/a/590020.html

相关文章:

  • Linux目录理解
  • 海外红人营销助力游戏出海:从单一营销到生态构建的转变
  • uniapp APP权限弹框
  • 图论——广度优先搜索实现
  • golang-嵌套结构体
  • Python----计算机视觉处理(Opencv:ROI图像切割)
  • 基于FPGA的3U机箱轨道交通网络通讯板,对内和主控板、各类IO板通信,对外可进行RS485、CAN或MVB组网通信
  • 结构型模式之组合模式:让对象构成树形结构
  • 数据结构——双向链表dlist
  • 360安全软件拦截鼠标键盘模拟操作的解决方法
  • 【CPU】CPU多级缓存和MESI一致性协议
  • C# 封装数据 详解
  • Prompt Learning Awesome
  • 东隆科技携手PRIMES成立中国校准实验室,开启激光诊断高精度新时代
  • NLP高频面试题(三)——普通RNN的梯度消失和梯度爆炸问题
  • Dify 搭建
  • css实现报警特效
  • Unity插件-适用于画面传输的FMETP STREAM使用方法(二)组件介绍
  • 【蓝桥杯】1124修建公路1(Kruskal算法)
  • 机器学习之激活函数