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

鸿蒙开发之南拳北腿

发布于 2022-6-16 22:20

浏览

1收藏

1.接口

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

Counter()
1.

2.事件

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

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

示范代码

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

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

这里我设置了一个代表步长的变量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%')
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.

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

#夏日挑战赛# 3.7 Counter组件-鸿蒙开发者社区

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

#夏日挑战赛# 3.7 Counter组件-鸿蒙开发者社区

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

#夏日挑战赛# 3.7 Counter组件-鸿蒙开发者社区

注意

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

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

#夏日挑战赛# 3.7 Counter组件-鸿蒙开发者社区

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

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

效果如下：

#夏日挑战赛# 3.7 Counter组件-鸿蒙开发者社区

本节完整代码如下：

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)
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.