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

ops/2025/3/18 17:32:11/
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 = trueanimateTo({ 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')}// 左边@Builderleft() {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().yOffsetif (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 + offsetthis.rightListScroller.scrollTo({ xOffset: 0, yOffset: yOffset })} return { offsetRemain: offset }})}}// 右边@Builderright() {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)}// 右边的列表@BuilderrightList() {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().yOffsetif (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 + offsetthis.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.ppmy.cn/ops/166829.html

相关文章

09-SDRAM控制器的设计——按键的处理(边沿捕获电路、硬件消抖、Verilog消抖电路)

按键边沿检测▷▷▷ 边沿检测经常用于按键输入检测电路中&#xff0c;按键按下时输入信号 key 变为低电平&#xff0c;按键抬起变为高电平。当输入的信号为理想的高低电平时&#xff08;不考虑毛刺和抖动&#xff09;&#xff0c;边沿检测就发挥了很重要的作用。 由于输入的信号…

css基本功

为什么 ::first-letter 是伪元素&#xff1f; ::first-letter 的作用是选择并样式化元素的第一个字母&#xff0c;它创建了一个虚拟的元素来包裹这个字母&#xff0c;因此属于伪元素。 grid布局 案例一 <!DOCTYPE html> <html lang"zh-CN"><head&…

C#-委托delegate

一.C#-委托delegate C#中委托即C中函数指针,通过delegate关键字可声明一个代理.代理可像指针一样作为参数传递和调用. <1.声明一个代理类型 class Test{public delegate string CreateNativeString(); }<2.创建代理变量 class Main{public Test.CreateNativeString poi…

本地部署Jina AI Reader:用Docker打造你的智能解析引擎

本地部署Jina AI Reader&#xff1a;用Docker打造你的智能解析引擎 &#x1f31f; 引言&#xff1a;为什么需要本地部署&#xff1f;&#x1f4cc; 场景应用图谱&#x1f527; 部署指南&#xff08;Linux环境&#xff09;1. 环境准备2. Docker部署3. 验证服务状态 &#x1f680…

前端如何实现生成excel文件,并下载

后端很忙没有实现配合&#xff0c;主要由前端来实现&#xff0c;需要点击下载模版生成一个excel并下载的功能&#xff0c; 这是格式 <a href"javascript:void(0)"click"downloadTemplate">下载模板</a> import * as XLSX from "xlsx&qu…

【存储中间件】Redis核心技术与实战(四):Redis高并发高可用(Redis集群介绍与搭建)

文章目录 Redis集群集群前置知识数据分布理论节点取余分区一致性哈希分区虚拟一致性哈希分区虚拟槽分区为什么槽的范围是0 &#xff5e;16383&#xff1f; Redis数据分区Redis 虚拟槽分区的特点集群功能限制 搭建集群节点配置集群创建创建集群随机主从节点指定主从节点创建集群…

Harmony NEXT开发之创建自定义组件

目录 自定义组件的基本用法 自定义组件的基本结构 成员函数/变量 自定义组件的参数规定 build()函数 自定义组件通用样式 在ArkUI中&#xff0c;UI显示的内容均为组件&#xff0c;由框架直接提供的称为系统组件&#xff0c;由开发者定义的称为自定义组件。在进行 UI 界面…

基于 easyExcel 3.1.5依赖的包 实现动态表头 动态表格内容

1.需求&#xff1a;需要导出的EXCEL示例&#xff1a; 2.依赖&#xff1a; <dependency><groupId>com.alibaba</groupId><artifactId>easyexcel</artifactId><version>3.1.5</version></dependency> 3.工具类&#xff1a; p…