鸿蒙应用的初次尝鲜

上篇回顾：鸿蒙api9项目结构的认识学习，

本篇预告：鸿蒙应用体验一发。

• 可能会遇到问题，按钮中的文字没有居中显示。答案在文章尾部。

鸿蒙应用的初次尝鲜

经过上一篇鸿蒙api9的项目结构的认识学习后，想必大家也和我一样，迫切滴想要来体验上一发自己写出来的鸿蒙应用吧。

话不多说，Just do it。

效果图一

效果图二

上代码

import router from '@ohos.router'

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        Button() {
          Text('跳转')
            .fontColor('#ff0')  //字体颜色
            .fontSize(50)   //字体大小
            .fontWeight(FontWeight.Medium)  //字体粗细
        }
        .width('40%')  //button按钮的宽度
        .height('10%') //button按钮的高度
        .alignSelf(ItemAlign.Center) //相对位置
        .type(ButtonType.Capsule)   //按钮形状
        .backgroundColor('#a0f')  //背景颜色
        .margin({          //外边距
          top: 30,
        })
        .onClick(v => {         //点击事件
          router.pushUrl({ url: 'pages/Second' }).then(() => {   //页面跳转
            console.log('我被点击了')              //日志输出
          }).catch((err) => {
            console.error(`fail is ${err.code}`)
          })
        })
      }
      .width('100%')
    }
    .height('100%')
  }
}

import router from '@ohos.router'

@Entry
@Component
struct Second {
  @State msg: string = 'I am Second Page'

  build() {
    Row() {
      Column() {
        Text(this.msg)
          .fontSize(50)
          .fontColor('#abc')
          .fontWeight(FontWeight.Bold)
          .fontStyle(FontStyle.Italic)
        Button() {
          Text('back')
            .fontSize(50)
            .fontColor('#cfa')
            .fontStyle(FontStyle.Italic)
            .fontWeight(FontWeight.Medium)
        }
        .type(ButtonType.Capsule)
        .width('40%')
        .height('10%')
        .backgroundColor('#6333')
        .margin({
          top: 30,
          bottom: 30,
          left: 30,
          right: 30
        })
        .onClick(v => {
          router.back()
        })

      }.width('100%')
    }.height('100%')
  }
}

特别注意

• 如果 运行代码后出现了以下图片中的效果，那么很有可能是把按钮的宽度高度设置在了button内的text上
• 解决办法