初探鸿蒙HarmonyOS开发全屏展示以及导航栏功能

序章

最近在网上看到很多关于鸿蒙HarmonyOS的消息看到了不一样的华为,让我满是惊喜;觉得我也有必要学习一下鸿蒙开发,然后最近看了一下视频和文档发现入门是真的不难,至少对于前端来说入门不难;ArkTS跟typeScript很像很像;就ArkUI有一点差别,但是里面写样式的语法跟CSS差不多,至少对于前端来说很快就能理解了。

为什么我想去学习鸿蒙,主要有两点原因:

  • 作为国内唯一一个系统有必要支持一下;可能我能做的贡献有限,但是我们支持一下还是可以做到的,当一颗螺丝钉。
  • 自己没有开发过App相关的应用,想自己尝试一下。

提醒: 后续我会出一到两个的实战项目,并且去发布上线;初步定位软件类型为日常评语(主要是通过AI生成),然后在开发一个处理图片的软件(主要指针对制作头像功能-比如:国庆那种头像和圣诞节那种头像);如果有兴趣的朋友我们可以一起学习交流鸿蒙开发。查看原文

导航栏功能

我们在开发的过程中经常会需要详情页面或者说子页面,这个时候就会需要返回上一页的显示以及标题等。如下图效果及代码。

在这儿需要注意一个问题,导航栏需要设置高度,如果不设置高度的情况下下方的内容区域会到最底端;学习到这儿的朋友可以去试试,我也是试出来的。

typeScript 复制代码
@Entry
@Component
struct Details {
  @State message: string = 'Hello World';

  build() {
    RelativeContainer() {

      Column() {
        // 导航栏
        Navigation() {}
        .title('详情页')
        .titleMode(NavigationTitleMode.Mini)
        .hideBackButton(false)
        .height(56)

        Column() {
          Text('444')
        }
        .backgroundColor(Color.Pink)
        .width('100%')
        .height('100%')
      }
      .width('100%')
    }
    .height('100%')
    .width('100%')
  }
}

全屏功能

如果你想设置全屏的情况下就按照下面的内容进行配置即可,这是官方配置的;代码中有注释可以重点看设置全屏的代码块即可。

typeScript 复制代码
import { window } from '@kit.ArkUI';

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

  build() {
    RelativeContainer() {

      Column() {
        // 导航栏
        Navigation() {}
        .title('详情页')
        .titleMode(NavigationTitleMode.Mini)
        .hideBackButton(false)
        .height(56)

        Column() {
          Text('444')
        }
        .backgroundColor(Color.Pink)
        .width('100%')
        .height('100%')
      }
      .width('100%')
    }
    .height('100%')
    .width('100%')
  }
  // 设置全屏显示
  windowClass?: window.Window
  async setFullScreen(flag: boolean) {
    if (!this.windowClass) {
      this.windowClass = await window.getLastWindow(getContext(this))
    }
    this.windowClass.setWindowLayoutFullScreen(flag)
  }
  onPageShow(): void {
    this.setFullScreen(true)
  }
  onPageHide(): void {
    this.setFullScreen(false)
  }
}

总结

在学习鸿蒙的这段时间我发现有很多需要去探索的地方,目前我主要是发现UI布局上面的一些问题,还没有写逻辑代码相关的,下一章我将给大家带来的是滚动相关的问题,官方提供的Scroll在纵向布局上面有一些小的问题;到时候给大家分享一下,大家静待...

相关推荐
m51276 分钟前
LinuxC语言
java·服务器·前端
Myli_ing1 小时前
HTML的自动定义倒计时,这个配色存一下
前端·javascript·html
dr李四维1 小时前
iOS构建版本以及Hbuilder打iOS的ipa包全流程
前端·笔记·ios·产品运营·产品经理·xcode
雯0609~2 小时前
网页F12:缓存的使用(设值、取值、删除)
前端·缓存
℘团子এ2 小时前
vue3中如何上传文件到腾讯云的桶(cosbrowser)
前端·javascript·腾讯云
学习前端的小z2 小时前
【前端】深入理解 JavaScript 逻辑运算符的优先级与短路求值机制
开发语言·前端·javascript
彭世瑜2 小时前
ts: TypeScript跳过检查/忽略类型检查
前端·javascript·typescript
FØund4042 小时前
antd form.setFieldsValue问题总结
前端·react.js·typescript·html
Backstroke fish2 小时前
Token刷新机制
前端·javascript·vue.js·typescript·vue
小五Five2 小时前
TypeScript项目中Axios的封装
开发语言·前端·javascript