[Daily HarmonyOS Next Knowledge] Click Event Not Responding, Soft Keyboard Pop-up, Animation Effects, Text Selection, Status Bar Font Settings
1. Only one of two buttons on a HarmonyOS page receives click events?
@Entry
@Component
struct SplashScreenPage {
@State pageShowTime: number = CommonConstants.TIME_DEFAULT_VALUE;
@State intervalID: number = CommonConstants.INTERVAL_ID_DEFAULT;
build() {
Column() {
Stack({ alignContent: Alignment.TopStart }) {
Image($r('app.media.ic_splash_page_background'))
.width(CommonConstants.IMAGE_WIDTH)
.height(CommonConstants.IMAGE_HEIGHT)
HideButton();
SkipButton({ secondsCount: (CommonConstants.DELAY_SECONDS - this.pageShowTime) });
}
.layoutWeight(CommonConstants.STACK_LAYOUT_WEIGHT)
.width(CommonConstants.STACK_WIDTH);
}
.alignItems(HorizontalAlign.Start)
.width(CommonConstants.COLUMN_WIDTH)
.height(CommonConstants.COLUMN_HEIGHT)
}
}
// Create two buttons separately
@Component
struct SkipButton {
@Prop secondsCount: number = 0;
build() {
Flex({
direction: FlexDirection.Row,
justifyContent: FlexAlign.End
}) {
Text($r('app.string.skip', this.secondsCount))
.onClick(() => {
console.log("EntryAbility Skip Button is clicked");
})
}
}
}
@Component
struct HideButton {
build() {
Flex({
direction: FlexDirection.Row,
justifyContent: FlexAlign.Start
}) {
Text($r('app.string.hide'))
.onClick(() => {
console.log("EntryAbility Hide Button is clicked");
})
}
}
}
Solution: Add the .hitTestBehavior(HitTestMode.Transparent) attribute.
Reference: https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-attributes-hit-test-behavior-V5
This attribute sets the touch test mode of a component. The ArkUI framework uses hit testing to collect components that should respond to touch events before distributing them. Different hitTestBehavior values affect which components are included in the hit test results, thus influencing event distribution.
@Component
struct SkipButton {
@Prop secondsCount: number = 0;
build() {
Flex({
direction: FlexDirection.Row,
justifyContent: FlexAlign.End
}) {
Text($r('app.string.app_name', this.secondsCount))
.onClick(() => {
console.log("EntryAbility Skip Button is clicked");
})
}
.hitTestBehavior(HitTestMode.Transparent)
}
}
2. How to handle soft keyboard pop-up in HarmonyOS?
Issue: When a TextArea in a custom @CustomDialog gains focus, the soft keyboard pops up and pushes the entire dialog up. Requirement: The keyboard should only push up the area around the TextArea instead of the entire dialog.
Solution: The soft keyboard may obscure part of the UI by default. To ensure the focused input area is visible above the keyboard, get the keyboard's avoid area and adjust the margin accordingly.
import window from '@ohos.window';
@Entry
@Component
struct ScrollExample {
scroller: Scroller = new Scroller()
private arr: number[] = [0, 1, 2, 3, 4, 5]
@State scrollHeight: number = 0;
@State isRebuild: boolean = false;
@State keyHeight: number =0;
@State text: string = ''
aboutToAppear() {
window.getLastWindow(getContext(this)).then(currentWindow =>{
let property = currentWindow.getWindowProperties();
// Init window height
let avoidArea = currentWindow.getWindowAvoidArea(window.AvoidAreaType.TYPE_KEYBOARD);
this.scrollHeight = px2vp(property.windowRect.height - avoidArea.bottomRect.height);
// Monitor soft keyboard show/hide
currentWindow.on('avoidAreaChange', async data => {
if (data.type !== window.AvoidAreaType.TYPE_KEYBOARD) {
this.keyHeight=avoidArea.bottomRect.height;
return;
}
this.scrollHeight = px2vp(property.windowRect.height - data.area.bottomRect.height);
})
})
}
build() {
Stack({ alignContent: Alignment.TopStart }) {
Column() {
Scroll(this.scroller) {
Column() {
TextInput({ text: this.text, placeholder: 'input your word...' })
.placeholderFont({ size: 14, weight: 400 })
.width(320)
.height(40).margin(200)
.fontSize(14)
.fontColor(Color.Black)
.backgroundColor(Color.White)
ForEach(this.arr, (item:number) => {
Text(item.toString())
.width('90%')
.height(150)
.backgroundColor(0xFFFFFF)
.borderRadius(15)
.fontSize(16)
.textAlign(TextAlign.Center)
.margin({ top: 10 })
})
}.width('100%')
}
.width('100%').height(this.scrollHeight).layoutWeight(1)
Text('这是一个测试文本')
.width('100%')
.height(50)
.backgroundColor(Color.Red)
.margin({bottom: this.scrollHeight})
}.width('100%').height('100%').justifyContent(FlexAlign.Start)
}.width('100%').height('100%').backgroundColor(0xDCDCDC)
}
}
3. No animation effect when using .scale in HarmonyOS?
Issue: The .scale attribute does not trigger animation.
@Component ImageScale {
@State scaleValue: ScaleOptions = { x: 1, y: 1, z: 1 }
build() {
Column() {
Image(this.viewModel?.item?.image?.hdUrl)
.width("100%")
.aspectRatio(1.0)
.animation({ duration: 200, curve: "ease" })
.scale(this.scaleValue)
.gesture(TapGesture({ count: 2 }).onAction((event: GestureEvent) => {
let width = event.target.area.width.valueOf() as number
let height = event.target.area.height.valueOf() as number
let centerX = event.fingerList[0].localX / width
let centerY = event.fingerList[0].localY / height
if (this.scaleMode) {
this.scaleMode = false
this.scaleValue = {x : 1, y : 1}
} else {
this.scaleMode = true
this.scaleValue = {x : 2, y : 2, centerX: `${centerX * 100}%`, centerY:`${centerY * 100}%`}
}
}))
}
}
}
Reference implementation:
@Entry
@Component
struct AnimationPage {
@State message: string = 'Hello World fhlsfslfslfhklafhlaskhfkjsfhjksadfhlkjsafsafhkjsfhkljfhjksafhkjasfksfh';
@State textY:number = 0
build() {
Row() {
Column() {
Text(this.message)
.fontSize(20)
.fontWeight(FontWeight.Bold)
.scale({x:1,y:this.textY})
.animation({
duration:2000,
curve: "linear"
}).id("text")
Button("点击动画展开").onClick((ele)=>{
this.textY = 1
}).width(200).height(50)
.backgroundColor(Color.Pink).borderRadius(10)
}
.width('100%')
}
.height('100%')
}
}
4. Background blur effect fails when selecting items in TextPicker within a custom HarmonyOS Dialog?
Issue: When a custom dialog sets backgroundColor and backgroundBlurStyle with an OPACITY transition animation, selecting an item in TextPicker causes the background blur to失效 (fail).
Cause: Using OPACITY in the transition may override backgroundBlurStyle.
Solutions:
- Adjust animation order: Apply OPACITY after
backgroundBlurStyle. - Use separate animations: Apply OPACITY and blur effects to different properties.
- Adjust property order: Ensure
backgroundBlurStyletakes effect after OPACITY.
5. Setting status bar font color in HarmonyOS appears ineffective?
Issue: The statusBarContentColor setting in setWindowSystemBarProperties succeeds in the callback but does not change the status bar appearance.
windowclass.setWindowSystemBarProperties({
statusBarContentColor: '#000000' // Status bar font color (supported from API Version 8)
}).then((d)=>{
console.debug("")
},(e:BusinessError)=>{
console.debug("")
})
Solution: Status bar settings apply to the entire window. To adjust per-page, call setWindowSystemBarProperties in the page's lifecycle.
Notes:
- This API does not take effect on 2in1 devices.
- In split-screen, floating, or free multi-window modes, changes only take effect when the window is in full-screen.
onPageShow(): void {
window.getLastWindow(getContext(), (err, data) => {
let win: window.Window;
if (err.code) {
console.error("error code :" + JSON.stringify(err.code))
return;
}
try {
win = data;
// Set window to full-screen
win.setWindowLayoutFullScreen(true);
// Set status bar properties
win.setWindowSystemBarProperties({
statusBarColor: '#00ff00', // Status bar background color
statusBarContentColor: '#353535' // Status bar text color
})
console.info('带状态栏沉浸式窗口设置完成')
} catch (expextion) {
console.error("error cause :" + JSON.stringify(expextion))
}
})
}
Top comments (0)