鸿蒙开发【闹钟】实操步骤

闹钟实操文档

一 、页面前期准备工作

1.设置tabs下标签

设置自定义tab标签的内容属性，以及点击事件，为其设置标签的位置处于底部标签并且导入相应的图片。

代码如下：

Entry
@Component
  struct Index {
  @State currentIndex: number = 0
  private tabsController: TabsController = new TabsController()
  @Builder TabBuilder(title: string, image: Resource, selectImage: Resource, tag: number, badgeValue: number = 0) {
    Column({ space: 3 }) {
      Badge({ count: badgeValue, style: { badgeSize: 16 } }) {
        Image(this.currentIndex == tag ? selectImage : image).size({ width: 25, height: 20 })
      }
      Text(title).fontColor(this.currentIndex == tag ? 'black' : '#000000')
    }.width('100%').height('50').justifyContent(FlexAlign.Center)
    .onClick(() => {
      this.currentIndex = tag
      this.tabsController.changeIndex(this.currentIndex)
    })
  }
  build() {
    Tabs({ barPosition: BarPosition.End, controller: this.tabsController }) {
      TabContent() {
   、
      }
      .tabBar(this.TabBuilder('闹钟', $r('app.media.clock'), $r("app.media.clock"), 0))
      TabContent() {

      }
      .tabBar(this.TabBuilder('世界时钟', $r('app.media.world'), $r('app.media.world'), 1))
      TabContent() {

      }
      .tabBar(this.TabBuilder('计时器', $r('app.media.jishiqi'), $r('app.media.jishiqi'), 2))
    }
  }
}

运行结果如下:

2.创建一个新的页面

新建一个子页面命名为ClockPage 用来封装

闹钟里面的内容，在其页面布局

代码示例：

@Component
 export struct ClockPage {

build() {
 Column(){

   }

  }
}

二 、绘制页面内容

所需要绘制的页面：

2.1 绘制页面头部内容

2.1.1设置顶部页面图片

导入相应的图片，为其设置属性，一定要给Column布局组件设置相应的高度，以及背景颜色，若不设置高度我们写的内容则不会按照我们想要的从上往下排版。

代码示例：

build() {
 Column(){
  Row(){
   Image($r('app.media.gengduo')).width(20).height(40)
  }.margin({ left:300,top:20})

}.height('100%')

.backgroundColor('#F1F2F3')

}

运行结果：

2.1.2 利用text组件输入文本内容

代码如下：

Column({ space:5}){
 Text('闹钟').fontSize(24).fontWeight(FontWeight.Bold)
 Text('距离下次响铃还有11小时1分钟')
}.width('100%').height(60)
.alignItems(HorizontalAlign.Start) //设置文本内容在水平方向上从左开始排列

.padding(10)

运行结果：

2.2描绘所设置的闹钟内容

2.2.1定义一个montent的类用来封装时间以及内容

代码示例：

class montent{
 time:string
 text:string
 constructor( time:string,text:string) {
  this.time=time
  this.text=text
 }
}

2.2.2 自定义一个Time的列表，并且在里面传入内容

代码示例：