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

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

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

按键事件指组件与键盘、遥控器等按键设备交互时触发的事件,适用于所有可获焦组件,例如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.width
  console.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: number

  build() {
    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.index
      console.info('Flex_overNumber text1 newIndex', this.newIndex)
      console.info('Flex_overNumber text1 change', this.newIndex)
    }
  }

  textChange() {
    let content: string = this.message
    this.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 1260
    if (componentWidth != 0) {
      // this.restrictWidth = Math.floor((parseFloat(this.FlexWidth) * componentWidth) * 1.3 * 0.01)   //1310
      this.restrictWidth = componentWidth * 1.2  // 0.8 1008
      console.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 = 100
                this.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)
}
相关推荐
斯~内克5 分钟前
Electron 菜单系统深度解析:从基础到高级实践
前端·javascript·electron
数据知道13 分钟前
【YAML】一文掌握 YAML 的详细用法(YAML 备忘速查)
前端·yaml
dr李四维14 分钟前
vue生命周期、钩子以及跨域问题简介
前端·javascript·vue.js·websocket·跨域问题·vue生命周期·钩子函数
旭久19 分钟前
react+antd中做一个外部按钮新增 表格内部本地新增一条数据并且支持编辑删除(无难度上手)
前端·javascript·react.js
windyrain36 分钟前
ant design pro 模版简化工具
前端·react.js·ant design
浪遏43 分钟前
我的远程实习(六) | 一个demo讲清Auth.js国外平台登录鉴权👈|nextjs
前端·面试·next.js
文火冰糖的硅基工坊1 小时前
[创业之路-343]:创业:一场认知重构与组织进化的双向奔赴
华为·架构·创业·公司·治理
GISer_Jing1 小时前
React-Markdown详解
前端·react.js·前端框架
太阳花ˉ1 小时前
React(九)React Hooks
前端·react.js