#夏日挑战赛# 3.7 Counter组件 原创 精华

[ 本文正在参加星光计划3.0–夏日挑战赛 ] 本节介绍一个比较简单的计数器组件Counter，可提供相应的增加或者减少的计数操作。

1.接口

Counter组件的接口不需要任何参数。

Counter()

2.事件

不支持通用事件和手势， 仅支持监听数值增加或减少的事件。

onInc(callback: () => void) 监听数值增加事件。
onDec(callback: () => void) 监听数值减少事件。

示范代码

首先，我们定义两个变量，用于记录当前计数器的数值和设置每次点击后增减数值的步长，代码如下：

  @State value: number = 0 // 数值
  private step: number = 10 // 步长

这里我设置了一个代表步长的变量step，我希望每次点击后数值在原有基础上增减10。代码如下：

Row(){
        TextBody1({text: $r("app.string.title_quantity")}) // 标题
        Blank()
        Counter() {
          Text(this.value.toString()).fontSize('20fp')
        }
        .backgroundColor($r("app.color.success"))  // 计数器组件无法设置背景色
        .onInc(() => { // 监听数值增加事件
          this.value += this.step
        })
        .onDec(() => { // 监听数值减少事件
          this.value -= this.step
        })
      }.width('100%')

在DevEco Studio中Counter()组件不被识别，代码下面飘红，但不影响编译和功能运行。如下图所示：

在本地预览器中浅色模式、中文环境中运行效果如下：

在本地预览器中深色模式、英文环境中运行效果如下：

注意

从上面的效果中我们发现，即使我们设置了绿色的背景颜色，但是无论深色模式还是浅色模式，Counter组件都会忽视这个属性。

另外，计数器中的文字的字号会随着数值长度变大而变小。当数值达到三位以上，会折行，影响阅读，如下图所示：

解决办法是给Counter组件设置一个宽度属性：

   .width(150) // 设置一个宽度

效果如下：

本节完整代码如下：

import {H8, TextBody1} from './index'

/**
 * 3.7 Counter组件
 * 计数器组件，提供相应的增加或者减少的计数操作。
 * 可以包含子组件。
 *
 * 事件:
 *  不支持通用事件和手势， 仅支持如下事件：
 *  onInc(callback: () => void) 监听数值增加事件。
 *  onDec(callback: () => void) 监听数值减少事件。
 */
@Entry
@Component
struct CountSample {
  @State value: number = 0 // 数值
  private step: number = 10 // 步长
  build() {
    Column({space:8}) {
      // 返回首页
      Row({space:8}){
        Image($r("app.media.ic_back")).width(24).height(24)

        Navigator({ target: 'pages/index', type: NavigationType.Back }) {
          H8({text:'返回'})
        }
      }

      Row(){
        TextBody1({text: $r("app.string.title_quantity")}) // 标题
        Blank()
        Counter() {
          Text(this.value.toString()).fontSize('20fp')
        }
        .width(150) // 设置一个宽度
        .backgroundColor($r("app.color.success"))  // 计数器组件无法设置背景色
        .onInc(() => { // 监听数值增加事件
          this.value += this.step
        })
        .onDec(() => { // 监听数值减少事件
          this.value -= this.step
        })
      }.width('100%')
    }
    .width('100%')
    .height('100%')
    .padding({top: $r("app.float.spaceTop"), bottom:$r("app.float.spaceBottom"), left:$r("app.float.spaceLeft"), right: $r("app.float.spaceRight")})
    .backgroundColor($r("app.color.appBg"))
    .alignItems(HorizontalAlign.Start)
  }
}

【源码地址：https://gitee.com/cloudev/harmonyos3/tree/master/3.0/BaseComponent】