鸿蒙布局之-Grid

Grid典型应用之计算器布局

@Entry
@Component
struct Index {
@State result: string[] = [‘0’]

setParams(pattern: string) {
const operators: string = ‘+-*/.’
if (this.result.length == 1 && this.result[0] == ‘0’) {
if (‘*/’.includes(pattern)) return
this.result = [pattern]
} else {
const len = this.result.length
const last = this.result.lastIndexOf(‘.’)
const slice = this.result.slice(last + 1)
if (last != -1 && pattern == ‘.’ && /^\d+$/.test(slice.join(”))) return
if(!(operators.includes(this.result[len-1]) && operators.includes(pattern)))
{
this.result.push(pattern)
}
}
}

calc() {
let res = 0
const dd = this.result.join(”).match(/[\-\+]?\d+(\.\d+)?([\/\*]\d+(\.?\d+)?)*/g)
dd.forEach(item => {
if (/^[\+\-]?\d+(\.\d+)?$/.test(item)) {
res += +item
} else {
let rr = 0
let isj = false
let operator: string = “*”
let rrr = item.match(/[\/\*]|(\d+(\.\d+)?)/g)
for (let index = 0; index < rrr.length; index++) {
const element = rrr[index];
if (element == ‘-‘) {
isj = true
} else if (‘*/’.includes(element)) {
operator = element
} else {
if (rr == 0) {
rr = +element
continue
}
if (operator == ‘*’) {
rr *= +element
} else {
rr /= +element
}
}
if (isj) {
rr = 0 – rr
}
}
res += rr
}

})
this.result = [res + ”]
}
/**
* In low-code mode, do not add anything to the build function, as it will be
* overwritten by the content generated by the .visual file in the build phase.
*/
build() {
Grid() {
GridItem() {
Text(this.result.join(”))
.padding(10)
.height(100)
.width(‘100%’)
.fontColor(‘#fff’)
.textAlign(TextAlign.End)
.fontSize(50)

}
.columnStart(1)
.columnEnd(4)
.backgroundColor(‘#ccc’)

GridItem() {
Button(‘CE’)
.type(ButtonType.Normal)
.height(‘100%’)
.width(‘100%’)
.backgroundColor(‘#ccc’)
.fontColor(Color.Black)
.onClick(() => {
if (this.result.length == 1) {
if (this.result[0] == ‘0’) return
this.result = [‘0’]
return
}
this.result.pop()
})
}

GridItem() {
Button(‘C’)
.type(ButtonType.Normal)
.height(‘100%’)
.width(‘100%’)
.backgroundColor(‘#ccc’)
.fontColor(Color.Black)
.onClick(() => {
this.result = [‘0’]
})
}

GridItem() {
Button(‘/’)
.type(ButtonType.Normal)
.height(‘100%’)
.width(‘100%’)
.backgroundColor(‘#ccc’)
.fontColor(Color.Black)
.onClick(() => {
this.setParams(‘/’)
})
}
.backgroundColor(‘#ccc’)

GridItem() {
Button(‘*’)
.type(ButtonType.Normal)
.height(‘100%’)
.width(‘100%’)
.backgroundColor(‘#ccc’)
.fontColor(Color.Black)
.onClick(() => {
this.setParams(‘*’)
})
}

ForEach([‘7’, ‘8’, ‘9’], (item: string) => {
GridItem() {
Button(item)
.type(ButtonType.Normal)
.height(‘100%’)
.width(‘100%’)
.backgroundColor(‘#ccc’)
.fontColor(Color.Black)
.onClick(() => {
this.setParams(item)
})
}
}, item => item)

GridItem() {
Button(‘-‘)
.type(ButtonType.Normal)
.height(‘100%’)
.width(‘100%’)
.backgroundColor(‘#ccc’)
.fontColor(Color.Black)
.onClick(() => {
this.setParams(‘-‘)
})
}

ForEach([‘4’, ‘5’, ‘6’], (item: string) => {
GridItem() {
Button(item)
.type(ButtonType.Normal)
.height(‘100%’)
.width(‘100%’)
.backgroundColor(‘#ccc’)
.fontColor(Color.Black)
.fontColor(Color.Black)
.onClick(() => {
this.setParams(item)
})
}
}, item => item)

GridItem() {
Button(‘+’)
.type(ButtonType.Normal)
.height(‘100%’)
.width(‘100%’)
.backgroundColor(‘#ccc’)
.fontColor(Color.Black)
.onClick(() => {
this.setParams(‘+’)
})
}

ForEach([‘1’, ‘2’, ‘3’], (item: string) => {
GridItem() {
Button(item)
.type(ButtonType.Normal)
.height(‘100%’)
.width(‘100%’)
.backgroundColor(‘#ccc’)
.fontColor(Color.Black)
.onClick(() => {
this.setParams(item)
})
}
}, item => item)

GridItem() {
Button(‘=’)
.type(ButtonType.Normal)
.height(‘100%’)
.width(‘100%’)
.backgroundColor(‘#ccc’)
.fontColor(Color.Black)
.onClick(() => {
this.calc()
})
}
.rowStart(5)
.rowEnd(6)
.backgroundColor(‘#ccc’)

GridItem() {
Button(‘0’)
.type(ButtonType.Normal)
.height(‘100%’)
.width(‘100%’)
.backgroundColor(‘#ccc’)
.fontColor(Color.Black)
.onClick(() => {
this.setParams(‘0’)
})
}
.columnStart(1)
.columnEnd(2)

GridItem() {
Button(‘.’)
.type(ButtonType.Normal)
.height(‘100%’)
.width(‘100%’)
.backgroundColor(‘#ccc’)
.fontColor(Color.Black)

.onClick(() => {
this.setParams(‘.’)
})
}
}
.columnsGap(10)
.rowsGap(10)
.padding(10)
.rowsTemplate(‘2fr 1fr 1fr 1fr 1fr 1fr’)
.columnsTemplate(‘1fr 1fr 1fr 1fr’)
.backgroundColor(‘#ddd’)
}
}