【每日学点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对象说明
名称 | 类型 | 必填 | 说明 |
---|---|---|---|
range | string[] | string[] []10+ | Resource |<br>TextPickerRangeContent[]| TextCascadePickerRangeContent[] | 是 | 选择器的数据选择列表。不可设置为空数组,若设置为空数组,则不显示;若动态变化为空数组,则保持当前正常值显示。 说明:单列数据选择器使用 string[] ,Resource,TextPickerRangeContent[] 类型。多列数据选择器使用 string[][] 类型。多列联动数据选择器使用 TextCascadePickerRangeContent[] 类型。Resource类型只支持strarray.json range的类型及列数不可以动态修改。 |
selected | number | number[]10+ | 否 | 设置默认选中项在数组中的索引值。 默认值:0 说明:单列数据选择器使用number类型。 多列、多列联动数据选择器使用 number[] 类型。从API version 10开始,该参数支持 $$ 双向绑定变量。 |
value | string | string[]10+ | 否 | 设置默认选中项的值,优先级低于selected。 默认值:第一个元素值 说明:只有显示文本列表时该值有效。显示图片或图片加文本的列表时,该值无效。 单列数据选择器使用string类型。 多列、多列联动数据选择器使用 string[] 类型。从API version 10开始,该参数支持 $$ 双向绑定变量。 |