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

发布于 2022-6-16 22:20
浏览
1收藏

[ 本文正在参加星光计划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()组件不被识别,代码下面飘红,但不影响编译和功能运行。如下图所示:

#夏日挑战赛#  3.7 Counter组件-开源基础软件社区

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

#夏日挑战赛#  3.7 Counter组件-开源基础软件社区

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

#夏日挑战赛#  3.7 Counter组件-开源基础软件社区

注意

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

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

#夏日挑战赛#  3.7 Counter组件-开源基础软件社区

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

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

效果如下:

#夏日挑战赛#  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)
  }
}

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

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
2
收藏 1
回复
举报
回复
添加资源
添加资源将有机会获得更多曝光,你也可以直接关联已上传资源 去关联
    相关推荐