初探鸿蒙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在纵向布局上面有一些小的问题;到时候给大家分享一下,大家静待...

相关推荐
李鸿耀5 分钟前
仅用几行 CSS,实现优雅的渐变边框效果
前端
码事漫谈25 分钟前
解决 Anki 启动器下载错误的完整指南
前端
im_AMBER1 小时前
Web 开发 27
前端·javascript·笔记·后端·学习·web
蓝胖子的多啦A梦1 小时前
低版本Chrome导致弹框无法滚动的解决方案
前端·css·html·chrome浏览器·版本不同造成问题·弹框页面无法滚动
玩代码1 小时前
vue项目安装chromedriver超时解决办法
前端·javascript·vue.js
訾博ZiBo1 小时前
React 状态管理中的循环更新陷阱与解决方案
前端
StarPrayers.2 小时前
旅行商问题(TSP)(2)(heuristics.py)(TSP 的两种贪心启发式算法实现)
前端·人工智能·python·算法·pycharm·启发式算法
一壶浊酒..2 小时前
ajax局部更新
前端·ajax·okhttp
DoraBigHead3 小时前
React 架构重生记:从递归地狱到时间切片
前端·javascript·react.js
彩旗工作室4 小时前
WordPress 本地开发环境完全指南:从零开始理解 Local by Flywhee
前端·wordpress·网站