鸿蒙入门语法

import Footer from './components/Footer.ets'
import promptAction from '@ohos.promptAction'
// 样式抽离封装
@Styles function sameStyle() {
  .backgroundColor(Color.Green)
  .onClick(() => {
    this.count++
  })
}
@Extend(Text) function myClick(color: string, cb: () => void) {
  .backgroundColor(color)
  .width(100)
  .height(50)
  .textAlign(TextAlign.Center)
  .borderRadius(25)
  .onClick(() => cb())
}
// 胶囊按钮
@Extend(Text)
function capsule(){
  .height(40)
  .borderRadius(20)
  .backgroundColor(Color.Gray)
  .padding({ left: 15, right: 15 })
  .margin({ bottom: 15 })
}

// 对象模型
class User {
  id: string
  nickname: string
  age: number
}

class UserData {
  code: number
  message: string
  // 嵌套对象
  data: User
}
@Component
struct CounterComp {
  @State
  counts: number = 0

  build() {
    Text(this.counts.toString())
      .onClick(() => {
        this.counts ++
      })
  }
}
@Entry
@Component
struct Index {
  @State count:number = 100
  @State mobile:string = ''
  @State password: string = ''
  @State color: string = '#ccc'

  @State
  disabled: boolean = false
  @State
  focused: boolean = false
  // 不需要 `function` 关键字，覆盖全局
  @Styles
  sameStyle (){
    .backgroundColor(Color.Pink)
    .onClick(() => {
      this.count += 10
    })
  }
  @Styles
  inputStyle () {
    .border({ width: 1, color: Color.Gray })
    .layoutWeight(1)
    .margin({ left: 10, bottom: 10, top: 10 })
    .backgroundColor(Color.White)
  }
  @State
  res: UserData = {
    code: 10000,
    message: '获取用户信息成功',
    // 嵌套对象
    data: { nickname: 'jack', age: 18, id: '1' }
  }
  @State
  list: User[] = [
    { nickname: 'jack', age: 18, id: '1' },
    { nickname: 'tom', age: 16, id: '2' }
  ]
  @State loading: boolean = false
  @State
  userList: User[] = []
  build() {
    Column({ space: 20 }){
      // 循环渲染
      ForEach(
        // 1. 数据源
        this.userList,
        // 2. 组件生成函数
        (item: User) => {
          // 内容
          Text(`${item.nickname} 今年 ${item.age} 岁`)
        },
        // 3. 键值生成函数
        item => item.id
      )
      Button('加载更多')
        .onClick(() => {
          const arr: User[] = []
          for (let index = 0; index < 10; index++) {
            arr.push({ id: Math.random().toString(), nickname: 'jack', age: Math.ceil(Math.random() * 100) })
          }
          this.userList.push(...arr)
        })
      if (this.loading) {
        // 累计的 count 切换时候不会保留
        CounterComp()
        LoadingProgress()
          .width(100)
          .height(100)
      } else  {
        Text('后台数据')
        Text('后台数据')
        Text('后台数据')
      }
      Text(JSON.stringify(this.list[0]))
      Text(JSON.stringify(this.list[1]))
      Text(this.res.data.nickname)
      Text(this.res.data.age.toString())
      Button('age++')
        .onClick(() => {
          this.loading = true
          setTimeout(() => {
            this.loading = false
          }, 2000)
          // this.res.data.age ++
          const user = this.res.data
          // 替换属性，触发UI更新 要重新赋值整个对象才行 响应式
          this.res.data = { ...user, age: user.age + 1 }
          const users = this.list[1]
          this.list[1] = {...users, age: users.age + 1 }
        })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
    // Button TextInput 默认开启获取焦点，页面中默认第一个这样的元素获取焦点
    // Button 比较多限制，一个是默认开启获取焦点能看，二是禁用状态下样式无法修改
    // Button('Button').focusable(false)
    // Column() {
    //   Text('toggle disabled：' + this.disabled)
    //     .capsule()
    //     .onClick(()=>{
    //       this.disabled = !this.disabled
    //     })
    //   Text('toggle focused：' + this.focused)
    //     .capsule()
    //     .onClick(()=>{
    //       this.focused = !this.focused
    //     })
    //   Text('clickMe')
    //     .capsule()
    //     .enabled(!this.disabled)
    //     .focusable(this.focused)
    //     .onClick(() => {
    //       promptAction.showToast({ message: 'click' })
    //     })
    //     .fontColor('#fff')
    //     .stateStyles({
    //       normal: {
    //         .backgroundColor(Color.Blue)
    //       },
    //       focused: {
    //         .backgroundColor(Color.Red)
    //       },
    //       disabled: {
    //         .backgroundColor(Color.Black)
    //       },
    //       pressed: {
    //         .backgroundColor(Color.Orange)
    //       }
    //     })
    // }

    // Column({ space: 20 }) {
    //   Text('Text1')
    //     .myClick(this.color, () => {
    //       this.color = '#069'
    //     })
    //   Text('Text2')
    //     .myClick('green', () => {
    //       promptAction.showToast({ message: '做其他事~' })
    //     })
    // }
    // .width('100%')
    // .height('100%')
    // .justifyContent(FlexAlign.Center)
    // Column() {
    //   Text(this.count.toString())
    //     .width(100)
    //     .height(50)
    //     .sameStyle()
    //     .margin({ bottom: 10 })
    //     .textAlign(TextAlign.Center)
    //
    //   Button('+1')
    //     .sameStyle()
    // }
    // .width('100%')
    // .height('100%')
    // .justifyContent(FlexAlign.Center)
    // Column(){
      // 使用 `Footer` 组件
      // Footer()
      // Row() {
      //   Text('手机号')
      //   TextInput({text: this.mobile})
      //     .inputStyle()
      //     .onChange((value: string) => {
      //     this.mobile = value
      //   })
      // }
      // Row() {
      //   Text('验证码')
      //   TextInput({text: this.password})
      //     .type(InputType.Password)
      //     .inputStyle()
      //     .onChange((value: string) => {
      //     this.password = value
      //   })
      // }
      // Row({space: 15}){
      //   Button('重置').backgroundColor('#ccc').onClick(()=>{
      //       this.mobile = ''
      //       this.password = ''
      //     })
      //   Button('登录').onClick(()=>{
      //     if (this.mobile && this.password) {
      //       promptAction.showToast({ message: `${this.mobile} 登录成功` })
      //     } else {
      //       promptAction.showToast({ message: `请输入手机号或验证码` })
      //     }
      //   })
      // }
      // Row() {
      //   Text(this.count.toString())
      //     .onClick(() => {
      //       this.count++
      //     })
      // }
      // Row(){
      //   Text('left')
      //     .layoutWeight(1)
      //     .backgroundColor('red')
      //   Text('right')
      //     .layoutWeight(2)
      //     .backgroundColor('green')
      // }
      // .width('100%')
      // Text('left')
      //   .width('50%')
      //     // 宽高比例
      //   .aspectRatio(1)
      //   .backgroundColor('red')
      //
      // Image(this.src)
      //   .width(120).height(120)
    // }
    // .padding({ left: 15, right: 15 })
    // Column() {
    //   // 导航
    //   Row() {
    //     Row() {
    //       Image($r('app.media.ic_public_arrow_left'))
    //         .width(16)
    //         .aspectRatio(1) // 指定当前组件的宽高比
    //       // svg 图标可以使用填充颜色
    //       // .fillColor('red')
    //     }
    //     .width(24)
    //     .aspectRatio(1)
    //     .borderRadius(12)
    //     .backgroundColor('#f5f5f5')
    //     .justifyContent(FlexAlign.Center)
    //     .margin({left: 16})
    //
    //     Text('评论回复')
    //       .layoutWeight(1)
    //       .textAlign(TextAlign.Center)
    //       .padding({ right: 40 })
    //   }
    //   .height(40)
    //   .border({ width: { bottom: 0.5 }, color: '#e4e4e4' })
    //
    //   // 评论
    //   Row() {
    //     Image($r('app.media.ic_public_contacts_filled'))
    //       .width(32)
    //       .aspectRatio(1)
    //       .borderRadius(16)
    //
    //     Column({space: 5}) {
    //       Text('周杰伦')
    //         .width('100%')
    //         .fontWeight(FontWeight.Bold)
    //         .fontSize(15)
    //       Text('大理石能雕刻出肌肉和皮肤的质感，那个年代的工匠好牛啊')
    //         .width('100%')
    //
    //       Row() {
    //         Text('10-21 · IP属地北京')
    //           .fontSize(12)
    //           .fontColor('#c3c4c5')
    //         Row({ space: 4 }){
    //           Image($r('app.media.ic_public_favor'))
    //             .width(14)
    //             .aspectRatio(1)
    //             .fillColor('#c3c4c5')
    //           Text('100')
    //             .fontSize(12)
    //             .fontColor('#c3c4c5')
    //         }
    //       }
    //       .width('100%')
    //       .justifyContent(FlexAlign.SpaceBetween)
    //     }
    //     .layoutWeight(1)
    //     .padding({ left: 10 })
    //   }
    //   .padding(15)
    //   .alignItems(VerticalAlign.Top)
    // }
  }
}