HarmonyOS 鸿蒙Next 日常案例分享之华为闹钟-继续完善UI

HarmonyOS 鸿蒙Next 日常案例分享之华为闹钟-继续完善UI

@Component
export struct ClockItemComp{
  build(){
    Row(){
      Column({space:10}){
        Row({space:5}){
          Text('下午')
            .fontColor('#666')
          Text('4：30')
            .fontSize(18)
            .fontWeight(FontWeight.Bold)
        }
        Row({space:10}){
          Text('闹钟')
            .fontColor('#999')
          Text('不重复')
            .fontColor('#999')
        }
      }
      .alignItems(HorizontalAlign.Start)
      Toggle({type:ToggleType.Switch,isOn:true})
    }
    .justifyContent(FlexAlign.SpaceBetween)
    .backgroundColor('#fff')
    .width('100%')
    .height(64)
    .borderRadius(65)
    .padding({left:20,right:20})
  }
}

import { promptAction } from '@kit.ArkUI'

@Entry
@Component
struct DeatilPage {
  submit(){
    promptAction.showToast({ message: '点击了对钩' })
  }

  @Builder
  CellBuilder(title: string, value: string) {
    Row() {
      Text(title)
      Row() {
        Text(value)
          .fontColor('#999')
        Image('/images/ic_public_arrow_right.svg')
          .width(16)
          .aspectRatio(1)
          .fillColor('#999')
      }
    }
    .padding({ left: 15, right: 15 })
    .width('100%')
    .height(64)
    .justifyContent(FlexAlign.SpaceBetween)
    .backgroundColor('#FFF')
  }

  build(){
    Navigation() {
      Column() {
        //1 时间组件
        TimePicker()
          .width('100%')
          .borderRadius(16)//根据边缘进行裁剪
          .clip(true)
        //2 闹铃名称和重复
        Column({ space: 0.5 }) {
          this.CellBuilder('闹铃名称', '闹铃')
          this.CellBuilder('重复', '不重复')
        }
        .borderRadius(16)
        .clip(true)

        //3 删除闹铃
        Text('删除闹铃')
          .width(100)
          .height(40)
          .backgroundColor('#E3E4E5')
          .fontColor('red')
          .textAlign(TextAlign.Center)
          .borderRadius(16)
          .opacity(0.3) //蒙版
      }
      .width('100%')
      .height('100%')
      .padding(15)
    }
    .title('新建闹铃')
    .titleMode(NavigationTitleMode.Mini)
    .mode(NavigationMode.Stack) //防止宽屏分成2栏
    .menus([
      { value: '', icon: '/images/ic_confirm.png', action: () => this.submit() }
    ])
    .backgroundColor('#F3F4F5')
  }
}