鸿蒙任务列表与秒表集合软件开发（二）

秒表部分功能实现代码解析

// 构建计时器组件的界面
  build() {
    Row() {
      Column() {
        // 显示已经过时间，格式化为分钟：秒钟：毫秒
        Text(this.formatElapsedTime()).fontSize(40).fontColor(Color.Black)

        Row() {
          // 重置按钮
          Button() {
            Text('重置').fontColor(Color.White)
          }
          .backgroundColor('#6c6c6c')
          .height(80)
          .width(80)
          .onClick(() => {
            this.resetTimer()
          })

          // 开始/暂停按钮，根据计时器状态显示不同文本
          Button() {
            Text(this.startPauseButtonText).fontColor(Color.White)
          }
          .height(80)
          .width(80)
          .margin({ left: 50 })
          .onClick(() => {
            this.startOrPauseTimer()
          })
        }.margin({ top: 100 })
      }
      .width('100%')
    }
    .height('100%')
    .backgroundColor(Color.White)
  }

        实现了一个简单而直观的计时器界面，包括显示时间、重置计时器和控制计时器状态（开始/暂停）的功能。用户可以清晰地看到经过的时间，并通过按钮方便地控制计时器的运行状态。

布局

• 使用 Row 和 Column 组件来布局界面元素。最外层是一个 Row，里面包含一个 Column。

显示已过时间

• Text(this.formatElapsedTime()).fontSize(40).fontColor(Color.Black)：
  • 使用 Text 组件显示经过的时间。
  • this.formatElapsedTime() 是一个方法，返回格式化的时间字符串（分钟：秒钟：毫秒）。
  • 设置字体大小为40，并将颜色设置为黑色。

重置按钮

• 使用 Button 组件创建一个重置按钮。
  • 按钮内包含一个 Text 组件，显示文本“重置”，字体颜色为白色。
  • 设置按钮背景颜色为 #6c6c6c，高度和宽度都为 80。
  • 使用 .onClick(() => { this.resetTimer() }) 为按钮添加点击事件。当用户点击按钮时，会调用 this.resetTimer() 方法，重置计时器。

开始/暂停按钮

• 使用另一个 Button 组件创建一个开始/暂停按钮。
  • 按钮内包含一个 Text 组件，显示动态文本。文本内容根据计时器的状态变化，由 this.startPauseButtonText 控制。
  • 字体颜色设置为白色，高度和宽度都为 80。
  • 使用 .onClick(() => { this.startOrPauseTimer() }) 为按钮添加点击事件。当用户点击按钮时，会调用 this.startOrPauseTimer() 方法，开始或暂停计时器。
  • 设置左边距为 50 以便与重置按钮分隔开来。

布局和样式调整

• 使用 .margin({ top: 100 }) 给按钮所在的 Row 增加顶部间距，使其与显示时间的文本有一定的距离。
• 使用 .width('100%') 将 Column 宽度设为 100%，使其充满父容器。
• 使用 .height('100%') 和 .backgroundColor(Color.White) 设置最外层 Row 的高度为 100%，并将背景颜色设置为白色，使整个界面看起来更整洁干净。