HarmonyOS 鸿蒙Next求助实现效果(的方法

发布于 1周前 作者 htzhanglong 来自 鸿蒙OS

HarmonyOS 鸿蒙Next求助实现效果(的方法

就是这个效果怎么实现啊,上面能透明。下面吸顶还能吸顶在  透明区域的下面

cke_11254.gif

7 回复
import { common } from '[@kit](/user/kit).AbilityKit';
import { hilog } from '[@kit](/user/kit).PerformanceAnalysisKit';

[@ComponentV2](/user/ComponentV2)
[@Entry](/user/Entry)
struct TopIndex {
private scroller: Scroller = new Scroller()
[@Local](/user/Local) whiteOpacity: number = 0
[@Local](/user/Local) isTop: boolean = false

aboutToAppear(): void {
let sta = getContext(this) as common.UIAbilityContext
sta.windowStage.getMainWindowSync().setWindowLayoutFullScreen(true)
}

[@Builder](/user/Builder)
BuilderBar() {
Row() {
Text("1")
Text("2")
Text("3")
Text("4")
}.height('44vp')
.width('100%')
.backgroundColor(Color.Gray)
.justifyContent(FlexAlign.SpaceBetween)
}

build() {
Stack() {
Scroll(this.scroller) {
Column() {
Column() {
Text("我是标题")
}
.height('200vp')
.justifyContent(FlexAlign.End)
.backgroundColor(Color.Green)
.width('100%')

Column() {
this.BuilderBar()
}
.width('100%')
.height('1440vp')
.backgroundColor(Color.Blue)
}.justifyContent(FlexAlign.Start)
}.height('100%')
.width('100%')
.onDidScroll((xOffset: number, yOffset: number) => {
hilog.debug(0x000000, 'rainrain', "offset " + yOffset)
hilog.debug(0x000000, 'rainrain', "s " + this.scroller.currentOffset().yOffset)
let o = this.scroller.currentOffset().yOffset / 140
if (o > 1) {
o = 1
}
this.isTop = this.scroller.currentOffset().yOffset >= 140
if (this.whiteOpacity != o) {
this.whiteOpacity = o
}
})

Column() {
Text("我是标题").visibility(this.isTop ? Visibility.Visible : Visibility.None)
}
.height('64vp')
.alignItems(HorizontalAlign.Start)
.justifyContent(FlexAlign.End)
.backgroundColor(Color.White)
.width('100%')
.opacity(this.whiteOpacity)

Column() {
this.BuilderBar()
}.margin({ top: '64vp' })
.visibility(this.isTop ? Visibility.Visible : Visibility.None)
}.alignContent(Alignment.Top)
}
}

太强了 ,佬

只是打个样。里面的高度、距离这些都是顺手写的。实际项目里面要注意,有相应的计算逻辑。 还有windowStage的设置是影响全局的,会影响别的界面。也要注意。(这个场景下的expandSafeArea有bug,就没采用了。)

不是吸顶,是检测下滑距离,给标题栏的背景,计算渐变透明度,标题文字一直存在,最开始用if隐藏的

使用list 的 ondid scroll 获取滚动位置,使用list
的 listitemgroup 大概是这个组件,具体看一下文档,自带吸顶效果

针对您提出的HarmonyOS(鸿蒙)Next实现特定效果的需求,以下是一些直接相关的专业方法概述:

  1. 利用ArkUI框架:ArkUI是鸿蒙系统的UI开发框架,支持使用JS(Canvas/ArkTS)和eTS(Enhanced TypeScript)进行开发。通过ArkUI,您可以设计并实现丰富的用户界面效果,包括动画、布局管理、组件交互等。

  2. 调用原生API:鸿蒙系统提供了丰富的原生API接口,供开发者调用以实现底层功能。如果您需要实现一些系统级别的效果,如权限管理、硬件访问等,可以直接调用这些API。

  3. 使用分布式技术:鸿蒙系统的分布式技术是其独特优势之一,可以实现跨设备协同。通过分布式技术,您可以实现多设备间的数据同步、资源共享和协同工作,从而创造出更为丰富的用户体验。

  4. 参考官方文档和示例:鸿蒙系统的官方文档和示例代码是开发者的重要参考资源。通过仔细阅读官方文档,您可以了解系统的架构、API使用方法和最佳实践。同时,示例代码也可以为您提供实现特定效果的直接参考。

如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html 。希望以上方法能对您有所帮助。

回到顶部