鸿蒙开发中Navigation如何定制化？

Question

鸿蒙开发中Navigation如何定制化？

Answer 1

可搭配 window 的 setWindowLayoutFullScreen（设为沉浸式窗口）和 setWindowSystemBarProperties（设置状态栏文字颜色等）属性，参考：https://developer.huawei.com/consumer/cn/forum/topic/02011411... 。需注意 Navigation 的 titile 区域需用 hideTitleBar 隐藏，否则会占位不能从上开始布局。
🔗 参考资料: https://developer.huawei.com/consumer/cn/forum/topic/02011411...

Answer 2

在鸿蒙开发中，可以通过自定义样式和组件来定制化Navigation。

核心代码如下：

<template>
  <div class="navigation">
    <div class="nav-item" @click="navigateTo('home')">Home</div>
    <div class="nav-item" @click="navigateTo('about')">About</div>
    <div class="nav-item" @click="navigateTo('contact')">Contact</div>
  </div>
</template>

<script>
import router from '@system.router';

export default {
  methods: {
    navigateTo(page) {
      router.push({
        uri: `pages/${page}`
      });
    }
  }
};
</script>

<style>
.navigation {
  display: flex;
  justify-content: space-around;
  background-color: #333;
  color: white;
  padding: 10px;
}

.nav-item {
  cursor: pointer;
}

.nav-item:hover {
  color: #ddd;
}
</style>