【每日学点HarmonyOS Next知识】导航返回键隐藏、画布组件爱你滑动事件、可扩展文本、组件渐变、全屏自定义组件被引用
·
1、HarmonyOS navigation导航的子页面NavDestination,无法隐藏返回键,导致标题无法居中?
- 返回键隐藏功能:NavDestination组件的hideBackButton属性默认值为false,即显示返回键。如果需要隐藏返回键,可以将该属性设置为true
- 标题栏显示模式:NavDestination组件的titleMode属性可以设置为NavigationTitleMode.Mini以隐藏标题栏中的返回键
2、HarmonyOS Swiper嵌套的页面包含Canvas时,如何让Canvas可以响应左右滑动事件,但是不响应上下滑动?
Swiper嵌套的页面包含Canvas时,如何让Canvas可以响应左右滑动事件我这边使用下面的方式给Canvas加了滑动事件监听,但是没触发
.priorityGesture(GestureGroup(GestureMode.Exclusive,
SwipeGesture()
.onAction((event: GestureEvent) => {
if (event && this.klineQuotaModel) {
}
})
))
如下demo,可以触发onAction事件,且在Canvas区域滑动时,Swiper不滑动
@Component
struct CanvasExample1 {
//用来配置CanvasRenderingContext2D对象的参数,包括是否开启抗锯齿,true表明开启抗锯齿。
private settings: RenderingContextSettings = new RenderingContextSettings(true)
//用来创建CanvasRenderingContext2D对象,通过在canvas中调用CanvasRenderingContext2D对象来绘制。
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() {
Column() {
//在canvas中调用CanvasRenderingContext2D对象。
Canvas(this.context)
.width('100%')
.height('100%')
.backgroundColor('#F5DC62')
.onReady(() => {
//可以在这里绘制内容。
this.context.strokeRect(50, 50, 200, 150);
})
.priorityGesture(GestureGroup(GestureMode.Exclusive,
SwipeGesture()
.onAction((event: GestureEvent) => {
console.log('Canvas响应,swiper不响应')
})
))
.hitTestBehavior(HitTestMode.Block)
.width('80%')
.height('50%')
Text('Canvas')
.width('80%')
.height('50%')
}
.width('100%')
.height('100%')
.backgroundColor(Color.Red)
}
}
@Entry
@Component
struct Index47 {
private swiperController: SwiperController = new SwiperController()
build() {
Swiper(this.swiperController) {
Text('0')
.width('100%')
.height('100%')
.backgroundColor(Color.Gray)
.textAlign(TextAlign.Center)
.fontSize(30)
Text('1')
.width('100%')
.height('100%')
.backgroundColor(Color.Green)
.textAlign(TextAlign.Center)
.fontSize(30)
Text('2')
.width('100%')
.height('100%')
.backgroundColor(Color.Pink)
.textAlign(TextAlign.Center)
.fontSize(30)
CanvasExample1()
}
.loop(false)
}
}
3、HarmonyOS 可扩展文本?
有一个场景需要展示多行文本,最多展示4行。当超出4行时,在文本末尾可显示 ‘展开’ 按钮,当点击 ‘展开’ 按钮时,文本可全部展示出,并在文本末尾显示 ‘收起’ 按钮。当点击 ‘收起’ 按钮时,可恢复至原有最多展示4行的状态。是否有类似的组件或插件实现该功能?
可以参考api文档:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-measure-V5
本模块提供文本宽度、高度等相关计算。
示例代码:
//场景:超过特定行数4行,样式不同,比如加上展开、收缩。 计算文本总高度
let textSize : SizeOptions = measure.measureTextSize({ textContent: this.message, fontSize: 24, constraintWidth: 300 });
//限定宽度和最大行数(4行),计算高度
let textSize2 : SizeOptions = measure.measureTextSize({ textContent: this.message, fontSize: 24, maxLines: 4, constraintWidth: 300 });
//若textSize.height > textSize2.height,则表示实际高度超过4行,根据判断结果进行业务处理即可。
4、HarmonyOS 组件渐变色如何带透明度渐变?
建议这样设置颜色值:
.linearGradient({
//angle: 180,
direction: GradientDirection.Right,
colors: [["#00E6E6E6", 0.0], ["#ffE6E6E6", 1]]
})
5、HarmonyOS 全屏的自定义组件被其他页面引用后导致其他页面按钮功能无法使用?
全屏的自定义组件被其他页面引用后导致其他页面按钮功能无法使用
可以通过动态改变全屏自定义组件的zindex即可,可参考如下代码:
build() {
// 使用stack可以实现假的dialog覆盖原页面上面
Stack() {
Column() {
Button('页面底层按钮')
.onClick(() => {
// showToast('点击了底层按钮')
console.log('点击了底层按钮', this.visible)
})
.backgroundColor(Color.Red)
.margin({ top: 200 })
}.width('100%')
.height('100%')
.zIndex(10)
.hitTestBehavior(HitTestMode.Transparent)
Component1({ visible: $visible })
.zIndex(this.Component1ZIndex)
}.width('100%')
.height('100%')
}
更多推荐



所有评论(0)