鸿蒙开发:自定义一个股票代码选择键盘

简介: 金融类的软件,特别是股票基金类的应用,在查找股票的时候,都会有一个区别于正常键盘的键盘,也就是股票代码键盘,和普通键盘的区别就是,除了常见的数字之外,也有一些常见的股票代码前缀按钮,方便在查找股票的时候,更加方便的进行检索。

前言


代码运行环境:全部基于HarmonyOs NEXT

DevEco Studio:Build Version: 5.0.3.900

API:12

modelVersion5.0.0


金融类的软件,特别是股票基金类的应用,在查找股票的时候,都会有一个区别于正常键盘的键盘,也就是股票代码键盘,和普通键盘的区别就是,除了常见的数字之外,也有一些常见的股票代码前缀按钮,方便在查找股票的时候,更加方便的进行检索。

针对这样的一个键盘,实现起来可以说非常容易得,一个Grid组件我们便可以搞定,唯独需要注意的就是,除了数组之外的背景颜色设置,当然了,你可以通过数据源的形式进行设置,也可以根据所在的索引位置进行设置。

代码实现

定义数据源

数据源定义,可以单数据定义,也就是只定义需要的字符串,但是后面的背景切换就需要根据索引进行设置了,也可以直接对象数组的形式进行定义,对象中定义需要的内容和背景颜色,两种方式都可以进行实现,目前采取的是第一种方式。

private mCodeList = ["600", "1", "2", "3", "", "601", "4", "5", "6", "隐藏",
    "000", "7", "8", "9", "清空", "300", "002", "603", "0", "确定"]

设置组件

由于采用了字符串数组的形式设置数据,那么在设置背景颜色的时候,就需要设置根据索引位置进行动态设置了。

Grid() {
      ForEach(this.mCodeList, (item: string, index: number) => {
        GridItem() {
          Column() {
            if (index == 4) {
              Image(this.deleteIconSrc)
                .width(this.deleteIconWidth)
            } else {
              Text(item)
                .fontSize(this.rectTextSize)
                .fontColor(this.rectTextColor)
            }
          }
          .width("100%")
          .height(this.rectHeight)
          .border({ radius: this.rectBorderRadius })
          .backgroundColor((index == 1 || index == 2 || index == 3 ||
            index == 6 || index == 7 || index == 8 ||
            index == 11 || index == 12 || index == 13 || index == 18) ? this.numberColor : this.notNumberColor)
          .justifyContent(FlexAlign.Center)
          .onClick(() => {
            //点击事件
            if (index == 4) {
              //删除
              if (this.onDelete != undefined) {
                this.onDelete()
              }
            } else if (index == 9) {
              //隐藏
              if (this.onHide != undefined) {
                this.onHide()
              }
            } else if (index == 14) {
              //清空
              if (this.onClear != undefined) {
                this.onClear()
              }
            } else if (index == this.mCodeList.length - 1) {
              //确认
              if (this.onConfirm != undefined) {
                this.onConfirm()
              }
            } else {
              if (this.onItemClick != undefined) {
                this.onItemClick(item, index)
              }
            }
          })
        }
      })
    }
    .columnsTemplate("1fr ".repeat(this.columnSize).trimEnd())
    .columnsGap(this.columnsGap)
    .rowsGap(this.rowsGap)

全部代码:

代码非常简单,就一个纯Grid组件就实现了,这里就不多赘述了。

@Component
export struct StockCodeView {
  private mCodeList = ["600", "1", "2", "3", "", "601", "4", "5", "6", "隐藏",
    "000", "7", "8", "9", "清空", "300", "002", "603", "0", "确定"]
  bgColor: ResourceColor = "#e8e8e8" //背景颜色
  codeBgColor: ResourceColor = "#e8e8e8" //code背景颜色
  numberColor: ResourceColor = Color.White //数字背景颜色
  notNumberColor: ResourceColor = "#999999" //不是数字背景颜色
  rootHeight: number = 0 //键盘总体的高度
  rectHeight: Length = 60 //每个格子高度
  rowsGap: Length = 10 //行间距
  columnsGap: Length = 10 //列间距
  gridMarginTop: Length = 10 //网格距离顶部
  gridMarginBottom: Length = 10 //网格距离底部
  rectBorderRadius: Length = 2 //格子边框圆角
  onItemClick?: (item: string, index: number) => void //点击条目
  onDelete?: () => void //点击删除
  onHide?: () => void //点击隐藏
  onClear?: () => void //点击清空
  onConfirm?: () => void //点击确认
  columnSize: number = 5 //展示几列,默认是5列
  marginLeft: Length = 10 //距离左边
  marginRight: Length = 10 //距离右边
  deleteIconWidth: Length = 30 //删除图片宽度
  deleteIconSrc: PixelMap | ResourceStr | DrawableDescriptor = $r("app.media.view_ic_key_delete")
  rectTextSize: Length = 16 //格子的文字大小
  rectTextColor: ResourceColor = "#333333" //格子文字的默认颜色
  aboutToAppear(): void {
    this.rootHeight = (Number(this.rectHeight) * 4) + Number(this.rowsGap) * 3
      + Number(this.gridMarginTop) + Number(this.gridMarginBottom)
  }
  build() {
    Grid() {
      ForEach(this.mCodeList, (item: string, index: number) => {
        GridItem() {
          Column() {
            if (index == 4) {
              Image(this.deleteIconSrc)
                .width(this.deleteIconWidth)
            } else {
              Text(item)
                .fontSize(this.rectTextSize)
                .fontColor(this.rectTextColor)
            }
          }
          .width("100%")
          .height(this.rectHeight)
          .border({ radius: this.rectBorderRadius })
          .backgroundColor((index == 1 || index == 2 || index == 3 ||
            index == 6 || index == 7 || index == 8 ||
            index == 11 || index == 12 || index == 13 || index == 18) ? this.numberColor : this.notNumberColor)
          .justifyContent(FlexAlign.Center)
          .onClick(() => {
            //点击事件
            if (index == 4) {
              //删除
              if (this.onDelete != undefined) {
                this.onDelete()
              }
            } else if (index == 9) {
              //隐藏
              if (this.onHide != undefined) {
                this.onHide()
              }
            } else if (index == 14) {
              //清空
              if (this.onClear != undefined) {
                this.onClear()
              }
            } else if (index == this.mCodeList.length - 1) {
              //确认
              if (this.onConfirm != undefined) {
                this.onConfirm()
              }
            } else {
              if (this.onItemClick != undefined) {
                this.onItemClick(item, index)
              }
            }
          })
        }
      })
    }
    .columnsTemplate("1fr ".repeat(this.columnSize).trimEnd())
    .columnsGap(this.columnsGap)
    .rowsGap(this.rowsGap)
    .padding({ left: this.marginLeft, right: this.marginRight, top: this.gridMarginTop })
    .backgroundColor(this.bgColor)
    .height(this.rootHeight)
  }
}

封装使用

和车牌省份简称一样,车牌字母也进行封装,方便大家进行使用。

方式一:在Terminal窗口中,执行如下命令安装三方包,DevEco Studio会自动在工程的oh-package.json5中自动添加三方包依赖。


建议:在使用的模块路径下进行执行命令。


ohpm install @abner/keyboard


方式二:在工程的oh-package.json5中设置三方包依赖,配置示例如下:


"dependencies": { "@abner/keyboard": "^1.0.0"}

代码调用

StockCodeView({
        onItemClick: (item: string, index: number) => {
          //点击事件
          console.log("=====点击内容:" + item + "===点击索引:" + index)
        },
        onDelete: () => {
          //点击删除
          console.log("=====点击删除")
        },
        onHide: () => {
          //点击隐藏
          console.log("=====点击隐藏")
        },
        onClear: () => {
          //点击清空
          console.log("=====点击清空")
        },
        onConfirm: () => {
          //点击确认
          console.log("=====点击确认")
        }
      })


属性介绍


属性

类型

概述

onItemClick

(item: string, index: number) => void

点击条目回调

onDelete

() => void

点击删除回调

onHide

() => void

点击隐藏回调

onClear

() => void

点击清空回调

onConfirm

() => void

点击确认回调

bgColor

ResourceColor

背景颜色

codeBgColor

ResourceColor

code背景颜色

numberColor

ResourceColor

数字背景颜色

notNumberColor

ResourceColor

不是数字背景颜色

rootHeight

number

键盘总体的高度

rectHeight

Length

每个格子高度

rowsGap

Length

行间距

columnsGap

Length

列间距

gridMarginTop

Length

网格距离顶部

gridMarginBottom

Length

网格距离底部

rectBorderRadius

Length

格子边框圆角

marginLeft

Length

距离左边

marginRight

Length

距离右边

deleteIconWidth

Length

删除icon宽度

deleteIconSrc

PixelMap / ResourceStr / DrawableDescriptor

删除icon资源

rectTextSize

Length

格子文字大小

rectTextColor

ResourceColor

格子文字的默认颜色

目录
打赏
0
7
7
0
164
分享
相关文章
|
3天前
鸿蒙开发:V2版本装饰器@Once
@Once装饰器只能与@Param搭配使用,仅此一个组合,无其他使用方式,还有就是,必须在V2版本,也就是@ComponentV2装饰的自定义组件中,否则会报异常。
鸿蒙开发:V2版本装饰器@Once
|
1天前
|
鸿蒙开发:实现AOP代码插桩能力
正确的运用AOP,可以提升代码的模块化、复用性、可维护性和灵活性,同时降低了耦合度,使系统更易于扩展和维护。
24 13
鸿蒙开发:实现AOP代码插桩能力
|
4天前
鸿蒙开发:熟知@BuilderParam装饰器
在实际的开发中,我们经常会遇到自定义组件的情况,比如通用的列表组件,选项卡组件等等,由于使用方的样式不一,子组件是动态变化的,针对这一情况,就不得不让使用方把子组件视图传递过来,如何来接收这个UI视图,这就是@BuilderParam装饰器的作用。
鸿蒙开发:熟知@BuilderParam装饰器
|
3天前
|
鸿蒙开发:校验构造传参装饰器@Require
@Require装饰器依赖ArkTs的类型检查,仅在编译阶段拦截类型错误和缺失参数,对于运行时才能确定的动态值,如从网络请求获取的数据,仍需在生命周期函数中进行二次校验。
36 18
鸿蒙开发:V2版本装饰器之@Monitor装饰器
如果要实现@Monitor监听,其变量一定要被@Local、@Param、@Provider、@Consumer、@Computed装饰,未被修饰则无法被监听,还有,如果监听对象的变化,则不建议在一个类中对同一个属性进行多次@Monitor的监听,多次监听,只有最后一个定义的监听方法才会有效。
嵌入式linux/鸿蒙开发板(IMX6ULL)开发 (二)Ubuntu操作入门与Linux常用命令(中)
嵌入式linux/鸿蒙开发板(IMX6ULL)开发 (二)Ubuntu操作入门与Linux常用命令
216 1
嵌入式linux/鸿蒙开发板(IMX6ULL)开发 (二)Ubuntu操作入门与Linux常用命令(中)
鸿蒙开发入门 | 开发第一个鸿蒙应用+页面跳转
准备好鸿蒙开发环境后,接下来就需要创建鸿蒙项目,掌握项目的创建过程以及配置。项目创建好后,需要把项目运行在模拟器上,鸿蒙的模拟和安卓模拟器有些不同,鸿蒙提供远程模拟器和本地模拟器,通过登录华为账号登录在线模拟器,使用DevEco Studio可将项目部署到远程模拟器中。
1334 1
鸿蒙开发入门 | 开发第一个鸿蒙应用+页面跳转
嵌入式linux/鸿蒙开发板(IMX6ULL)开发 (二)Ubuntu操作入门与Linux常用命令(下)
嵌入式linux/鸿蒙开发板(IMX6ULL)开发 (二)Ubuntu操作入门与Linux常用命令
381 0
嵌入式linux/鸿蒙开发板(IMX6ULL)开发 (二)Ubuntu操作入门与Linux常用命令(下)
嵌入式linux/鸿蒙开发板(IMX6ULL)开发 (二)Ubuntu操作入门与Linux常用命令(上)
嵌入式linux/鸿蒙开发板(IMX6ULL)开发 (二)Ubuntu操作入门与Linux常用命令
267 0
嵌入式linux/鸿蒙开发板(IMX6ULL)开发 (二)Ubuntu操作入门与Linux常用命令(上)
HarmonyOS(鸿蒙)开发一文入门
HarmonyOS(鸿蒙)开发一文入门
194 0
HarmonyOS(鸿蒙)开发一文入门

热门文章

最新文章

  • 1
    原生鸿蒙版小艺APP接入DeepSeek-R1,为HarmonyOS应用开发注入新活力
    16
  • 2
    【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置-gradle-agp-ndkVersion模拟器运行真机测试环境-本地环境搭建-如何快速搭建android本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
    17
  • 3
    EMAS 性能分析全面适配HarmonyOS NEXT,开启原生应用性能优化新纪元
    10
  • 4
    鸿蒙开发:了解@Builder装饰器
    7
  • 5
    【04】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-正确安装鸿蒙SDK-结构目录介绍-路由介绍-帧动画(ohos.animator)书写介绍-能够正常使用依赖库等-ArkUI基础组件介绍-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
    16
  • 6
    【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
    10
  • 7
    Harmony os next~HarmonyOS Ability与页面跳转开发详解
    45
  • 8
    HarmonyOS使用系统图标
    6
  • 9
    鸿蒙H5离线包技术分享
    24
  • 10
    【02】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-准备工具安装-编译器DevEco Studio安装-arkts编程语言认识-编译器devco-鸿蒙SDK安装-模拟器环境调试-hyper虚拟化开启-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
    15
  • AI助理

    你好,我是AI助理

    可以解答问题、推荐解决方案等