【每日学点鸿蒙知识】输入法按压效果、web组件回弹、H5回退问题、Flex限制两行、密码输入自定义样式

1、HarmonyOS 输入法键盘按键的按压效果？

可以使用Button组件通过stateEffect属性设置按钮按下时是否开启按压态显示效果。参考链接如下：

• https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-button-V5
• https://developer.huawei.com/consumer/cn/blog/topic/03113927877624007

按键事件指组件与键盘、遥控器等按键设备交互时触发的事件，适用于所有可获焦组件，例如Button。对于Text，Image等默认不可获焦的组件，可以设置focusable属性为true后使用按键事件。

2、HarmonyOS Web组件滑动到边界是否有回弹能力？

overscrollmode属性：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-web-V5#overscrollmode11

overScrollMode(mode: OverScrollMode)
设置Web过滚动模式，默认关闭。当过滚动模式开启时，当用户在Web根页面上滑动到边缘时，Web会通过弹性动画弹回界面，根页面上的内部页面不会触发回弹。

示例代码：

// xxx.ets
import { webview } from '@kit.ArkWeb';@Entry
@Component
struct WebComponent {controller: webview.WebviewController = new webview.WebviewController();@State mode: OverScrollMode = OverScrollMode.ALWAYS;build() {Column() {Web({ src: 'www.example.com', controller: this.controller }).overScrollMode(this.mode)}}
}

3、HarmonyOS H5的hash路由在HarmonyOS上后退有问题？

H5的路由为hash路由是，点击返回的时候会把页面直接给关闭了，并没有执行路由的后退；history路由是正常的。

问题原因：

1. 路由配置错误：HarmonyOS系统的路由配置需要正确设置，包括路由路径和数据请求接口的配置。如果路由表或数据请求接口配置不正确，可能导致后退时出现问题。
2. 页面生命周期管理不当：在HarmonyOS系统上，页面的生命周期管理需要特别注意。例如，如果在页面的onInit中调用了数据请求接口，而在onError或其他生命周期方法中没有处理数据，可能会导致数据请求接口没有正确执行，从而影响后退。
3. 数据获取和赋值问题：在HarmonyOS系统上，数据获取和赋值需要特别注意。例如，如果数据请求接口返回的数据没有正确赋值给页面数据模型，可能会导致数据不一致，从而影响后退。

解决方法：

1. 检查路由配置：确保路由路径和数据请求接口配置正确，并且路由跳转逻辑清晰。
2. 正确管理页面生命周期：在页面的生命周期方法（如onInit、onError等）中处理数据请求和数据赋值，确保数据在正确的生命周期阶段被处理。
3. 正确处理数据获取和赋值：确保数据请求接口返回的数据经过正确的处理和赋值，避免数据不一致的情况。

4、HarmonyOS 如何使用Flex限制在2行，超过2行就折叠？

如何使用Flex限制在2行，超过2行就折叠

参考demo：

import measure from '@ohos.measure'
import display from '@ohos.display';const childMaxWidth: number = 500 //为了方便后续计算，这里的宽度数值为px
let displayClass: display.Display | null = null;
let componentWidth: number = 0;
try {displayClass = display.getDefaultDisplaySync();componentWidth = displayClass.widthconsole.info('Flex_overNumber displayClass.width:' + displayClass.width)
} catch (exception) {console.error('Flex_overNumber Failed to obtain the default display object. Code: ' + JSON.stringify(exception));
}/*export function getScreenWidth(): number {let screenWidth = 0;try {screenWidth = display.getDefaultDisplaySync().width;} catch (err) {console.error(`get screen width error: ${JSON.stringify(err)}`);}return screenWidth;
}*/@Component
struct TextItem {@State message: string = ''@Prop fontSizeData: numberbuild() {Text(this.message).fontSize(this.fontSizeData).margin({ left: 10, top: 10 }).backgroundColor('#c4c2cc').constraintSize({ maxWidth: childMaxWidth + 'px' }).maxLines(1).textOverflow({ overflow: TextOverflow.Ellipsis })}
}@Entry
@Component
struct Flex_overNumber {@State @Watch('IndexChange') index: number = 0@State @Watch('textChange') message: string = ''@State FlexWidth: string = '80%';@State newIndex: number = 0;@State heightControl: number | string = 100;@State ButtonText: string = '∨';@State AllData: string[] =['1', '22', '333', '44444', '55', '666', '7777', '8888888888888', '99', '3434', '5656', '7878', '141414141','68681']@State SomeData: string[] = []@State ShowData: string[] = []@State fontSizeData: number = 30@State AllWidth: number = 0@State textWidth: number = 0@State restrictWidth: number = 0;IndexChange() {if (this.AllWidth >= (this.restrictWidth - childMaxWidth) && this.AllWidth <= (this.restrictWidth)) {this.newIndex = this.indexconsole.info('Flex_overNumber text1 newIndex', this.newIndex)console.info('Flex_overNumber text1 change', this.newIndex)}}textChange() {let content: string = this.messagethis.textWidth = measure.measureText({textContent: content,fontSize: this.fontSizeData})if (this.textWidth > childMaxWidth) {this.AllWidth += childMaxWidth} else {this.AllWidth += this.textWidth}console.info('Flex_overNumber text1 content', content)console.info('Flex_overNumber text1 Width', this.textWidth)}aboutToAppear(): void {//  componentWidth 1260if (componentWidth != 0) {// this.restrictWidth = Math.floor((parseFloat(this.FlexWidth) * componentWidth) * 1.3 * 0.01)   //1310this.restrictWidth = componentWidth * 1.2  // 0.8 1008console.info('Flex_overNumber text1 componentWidth', componentWidth)console.info('Flex_overNumber text1 restrictWidth', this.restrictWidth)}for (let i = 0; i < this.AllData.length; i++) {this.message = this.AllData[i]this.index = i}console.log('text1 change newIndex', this.newIndex)this.SomeData = this.AllData.slice(0, this.newIndex + 1)this.ShowData = this.SomeData}build() {Row() {Column() {Flex({ wrap: FlexWrap.Wrap }) {ForEach(this.ShowData,(item: string) => {TextItem({ message: item, fontSizeData: this.fontSizeData })})Button(this.ButtonText).onClick(() => {if (this.heightControl === 100) {this.heightControl = '100%'this.ButtonText = '^'this.ShowData = this.AllData} else {this.heightControl = 100this.ButtonText = 'v'this.ShowData = this.SomeData}}).width(40).height(30).margin({ left: 10, top: 10 })}.constraintSize({ maxHeight: this.heightControl }).border({ width: 1 }).width(this.FlexWidth).margin({ left: '5%' }).clip(true)}.width('100%')}.height('100%')}
}

5、HarmonyOS TextInput密码输入如何自定义样式？

参考代码

Column() {TextInput({placeholder: "请输入密码"}).margin({top:100, left: '10%'}).width('80%').type(InputType.Password).backgroundColor(Color.White).showPasswordIcon(false)Line().height(0.5).width('80%').margin({left: '10%'}).backgroundColor(Color.Gray)
}