Foreword
this article is based on Api12
financial software, especially stock fund applications, will have a keyboard that is different from the normal keyboard when searching for stocks, that is, the stock code keyboard. The difference from the ordinary keyboard is that in addition to common numbers, there are also some common stock code prefix buttons, which are more convenient to search when searching for stocks.
For such a keyboard, it can be said that it is very easy to implement. We can handle a Grid component. Only the background color setting other than the array should be noted. Of course, you can set it in the form of data source or according to the index position.
Code implementation
defining Data Sources
data source definition can be defined by single data, that is, only the required string is defined, but the background switching needs to be set according to the index, or it can be defined directly in the form of object array. The required content and background color can be defined in the object. Both methods can be implemented. Currently, the first method is adopted.
private mCodeList = ["600", "1", "2", "3", "", "601", "4", "5", "6", "隐藏",
"000", "7", "8", "9", "empty", "300", "002", "603", "0", "确定"]
Set Components
since the data is set in the form of a string array, when setting the background color, it is necessary to set it dynamically according to the index position.
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(() => {
//Click on the event
if (index == 4) {
//Delete
if (this.onDelete != undefined) {
this.onDelete()
}
} else if (index == 9) {
//Hide
if (this.onHide != undefined) {
this.onHide()
}
} else if (index == 14) {
//Clear out
if (this.onClear != undefined) {
this.onClear()
}
} else if (index == this.mCodeList.length - 1) {
//Confirm
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)
All codes:
the code is very simple, just a pure Grid component is implemented, so I won't repeat it here.
@Component
export struct StockCodeView {
Private mCodeList=["600", "1", "2", "3", "", "601", "4", "5", "6", "hidden",
000 "," 7 "," 8 "," 9 "," Clear "," 300 "," 002 "," 603 "," 0 "," OK "]
BgColor: ResourceColor="# e8e8e8"//Background color
CodeBgColor: ResourceColor="# e8e8e8"//code background color
Number Color: ResourceColor=Color. White//Number background color
NotNumberColor: ResourceColor="# 999999"//Not a numerical background color
RootHeight: number=0//The overall height of the keyboard
RectHeight: Length=60//Each grid height
RowsGap: Length=10//Line spacing
ColumnsMap: Length=10//Column spacing
GridMarkinTop: Length=10//Grid distance from top
GridMarkinBottom: Length=10//Grid distance from bottom
RectBorderRadius: Length=2//Grid border rounded corners
onItemClick? : (item: string, index: number)=>void//Click on the item
onDelete? : ()=>void//Click to delete
onHide? : ()=>void//Click to hide
onClear? : ()=>void//Click to clear
onConfirm? : ()=>void//Click confirm
ColumnSize: number=5//Display how many columns, default is 5 columns
MarginLeft: Length=10//Distance to the left
MarginRight: Length=10//Distance to the right
DeleteIconWidth: Length=30//Delete image width
deleteIconSrc: PixelMap | ResourceStr | DrawableDescriptor = $r("app.media.view_ic_key_delete")
RectTextCize: Length=16//The text size of the grid
RectTextColor: ResourceColor="# 333333"//Default color for grid text
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(() => {
//Click on the event
if (index == 4) {
//Delete
if (this.onDelete != undefined) {
this.onDelete()
}
} else if (index == 9) {
//Hide
if (this.onHide != undefined) {
this.onHide()
}
} else if (index == 14) {
//Clear out
if (this.onClear != undefined) {
this.onClear()
}
} else if (index == this.mCodeList.length - 1) {
//Confirm
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)
}
}
Encapsulation Use
like the abbreviation of the license plate province, the license plate letters are also packaged for everyone to use.
Method 1: in the Terminal window, run the following command to install the third-party package. DevEco Studio automatically adds the third-party package dependency to the project oh-package.json5.
Suggestion: Execute the command under the module path used.
ohpm install @abner/keyboard
Method 2: Set the three-party package dependency in the project oh-package.json5. The configuration example is as follows:
"dependencies": { "@abner/keyboard": "^1.0.0"}
code call
StockCodeView({
onItemClick: (item: string, index: number) => {
//Click on the event
Console.log ("===Click on content:"+item+"==Click on index:"+index)
},
onDelete: () => {
//Click to delete
Console.log ("====Click to delete")
},
onHide: () => {
//Click to hide
Console.log ("====Click to hide")
},
onClear: () => {
//Click to clear
Console.log ("====Click to clear")
},
onConfirm: () => {
//Click confirm
Console.log ("====Click to confirm")
}
})
property Introduction
| property | type | overview |
|---|---|---|
| onItemClick | (item: string, index: number) => void | click entry callback |
| onDelete | () => void | click Delete Callback |
| onHide | () => void | click to hide the callback |
| onClear | () => void | click Clear Callback |
| onConfirm | () => void | click to confirm callback |
| bgColor | ResourceColor | Background Color |
| codeBgColor | ResourceColor | code Background Color |
| numberColor | ResourceColor | digital background color |
| notNumberColor | ResourceColor | not a digital background color |
| rootHeight | number | overall height of the keyboard |
| rectHeight | Length | height of each grid |
| rowsGap | Length | line Spacing |
| columnsGap | Length | column Spacing |
| gridMarginTop | Length | grid Distance Top |
| gridMarginBottom | Length | grid Distance Bottom |
| rectBorderRadius | Length | check Border Fillet |
| marginLeft | Length | distance to the left |
| marginRight | Length | distance to the right |
| deleteIconWidth | Length | delete icon width |
| deleteIconSrc | PixelMap / ResourceStr / DrawableDescriptor | delete icon resources |
| rectTextSize | Length | checker text size |
| rectTextColor | ResourceColor | default color for check text |
Top comments (0)