OpenHarmony实战开发-导航栏的使用编辑

最新推荐文章于 2024-06-13 16:45:49 发布
最新推荐文章于 2024-06-13 16:45:49 发布
阅读量1k 收藏 27
点赞数 28
分类专栏： 鸿蒙工程师 鸿蒙 HarmonyOS 文章标签： HarmonyOS harmonyos 鸿蒙应用开发 华为 鸿蒙系统 鸿蒙开发 鸿蒙
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_82546228/article/details/139158032
版权
鸿蒙工程师 同时被 3 个专栏收录
567 篇文章 4 订阅
订阅专栏
鸿蒙
567 篇文章 1 订阅
订阅专栏
HarmonyOS
555 篇文章 0 订阅
订阅专栏

场景描述

在大部分应用中导航栏的使用是非常普遍的，用户可以通过拖拽导航栏里的页签标题变换位置来调整导航栏的顺序。本文即为大家介绍导航栏的使用编辑。

效果呈现

本例最终效果图如下：

在这里插入图片描述

运行环境

本例基于以下环境开发，开发者也可以基于其他适配的版本进行开发：

  • IDE: DevEco Studio 4.0 Release
  • SDK: Ohos_sdk_public 4.0.10.13 (APIVersion 10 Release)

实现思路

本例包含的关键操作及其实现方案如下：

  1. 自定义弹窗的展示：通过点击分类实现自定义弹窗的弹出
  2. 自定义弹窗内部元素的排列、拖拽和换位：通过Grid()和GridItem()显示页签标题的网格排列，通过onItemDragStart、onItemDrop、onDrag事件完成拖拽换位。
  3. Tabs页签的顺序与网格元素顺序同步：通过@State与@Link父子组件双向同步。

开发步骤

本例详细开发步骤如下，开发步骤仅展示相关步骤代码，全量代码请参考完整代码章节的内容。

1.UI框架的构建：通过Stack、Tabs、Row等关键组件将UI框架搭建起来。具体代码如下：

...
Stack({ alignContent: Alignment.TopEnd }) {
  Tabs() {
    ForEach(this.tabBarArray, (item: string, index: number) => {
      TabContent() {
      }.tabBar(this.TabBuilder(index))
    }, (item: string) => JSON.stringify(item))
    TabContent() {
    }
    .tabBar(this.TabBuilder2(8))
  }
  .fadingEdge(true)
  .barHeight('7.2%')
  .barMode(BarMode.Scrollable)
  .barWidth('100%')
  .onChange((index: number) => {
    this.currentIndex = index;
  })
  .vertical(false)

  Row() {
    Divider()
      .vertical(true)
      .width(1)
      .height(18)
      .color(Color.Black)
    Image($r('app.media.ic_public_more'))
      .width(16)
      .height(16)
      .objectFit(ImageFit.Contain)
      .margin({ left: 4 })
    Text('分类')
      .fontSize(18)
      .opacity(0.8)
      .fontColor(Color.Black)
      .margin({ left: 2 })
  }.width('17%').height('7.2%').backgroundColor(Color.White)
  ...

2.自定义弹窗的构建：首先将自定义弹窗样式设置为true,设置自定义弹窗的高度、显示位置、偏移量等。具体代码块如下：

@CustomDialog
struct CustomDialogExample{
  controller?:CustomDialogController
  @Link tabBarArray:Array<string>
  build(){
    Column(){
      Row({space:180}){
        Text('导航')
          .fontSize(30)
          .fontColor(Color.Black)
        Text('完成')
          .fontSize(20)
          .fontColor(Color.Green)
          .onClick(()=>{
            this.controller.close()
          })
      }
      Divider()
        .width('100%')
        .height(5)
        .color(Color.Black)
      Text('我的频道')
        .fontSize(20)
        .fontColor(Color.Black)
        .fontWeight(500)
        .textAlign(TextAlign.Start)
      Grid1({items:$tabBarArray})
    }.width('80%').height('100%').backgroundColor(Color.White).padding({top:60})
  }
}
...
dialogController:CustomDialogController|null = new CustomDialogController({
  builder:CustomDialogExample({tabBarArray:$tabBarArray}),
  // 允许点击遮蔽层退出
  autoCancel:true,
  // 弹窗在竖直方向上的对齐方式：右中对齐
  alignment:DialogAlignment.CenterEnd,
  offset:{dx:35,dy:16},
  // 弹窗容器样式允许自定义
  customStyle:true,
  backgroundColor:Color.White,
  cornerRadius:0
})

3.自定义弹窗内的拖拽和换位：设置属性editMode(true)设置Grid进入编辑模式，进入编辑模式可以进行拖拽Grid组件内部GridItem。在onItemDragStart回调中设置拖拽过程中显示的图片。在onItemDrop中获取拖拽起始位置，和拖入位置，在onDrag回调中完成交换数组位置逻辑。具体代码块如下：

@Component
export struct Grid1{
  @Link items:Array<string>
  @State text:string= 'drag'

  @Builder pixelMapBuilder(){
    Column(){
      Text(this.text)
        .fontSize(16)
        .backgroundColor(0xF9CF93)
        .width(80)
        .height(80)
        .textAlign(TextAlign.Center)
    }
  }

  changeIndex(index1:number,index2:number){
    let temp :Resource|string;
    temp = this.items[index1];
    this.items[index1] = this.items[index2];
    this.items[index2] = temp;
  }
  build(){
    Column({space:5}){
      Grid(){
        ForEach(this.items,(name:string,index:number)=>{
          GridItem(){
            Text(name)
              .fontSize(16)
              .backgroundColor(0xF9CF93)
              .width(80)
              .height(80)
              .textAlign(TextAlign.Center)
          }
        })
      }
      .columnsTemplate('1fr 1fr 1fr')
      .columnsGap(10)
      .rowsGap(10)
      .onScrollIndex((first:number)=>{
        console.info(first.toString())
      })
      .width('90%')
      .backgroundColor(Color.White)
      .height('100%')
      .editMode(true)
      .onItemDragStart((event:ItemDragInfo,itemIndex:number)=>{
        this.text = this.items[itemIndex]
        return this.pixelMapBuilder()
      })
      .onItemDrop((event:ItemDragInfo,itemIndex:number,insertIndex:number,isSuccess:boolean)=>{
        if(insertIndex < this.items.length){
          this.changeIndex(itemIndex,insertIndex)
        }
      })
    }.width('100%')
    .margin({top:5})
  }
}

完整代码

完整示例代码如下：

// Index.ets
import {Grid1} from './Grid'

@CustomDialog
struct CustomDialogExample{
  controller:CustomDialogController
  @Link tabBarArray:Array<string>
  build(){
    Column(){
      Row({space:180}){
        Text('导航')
          .fontSize(30)
          .fontColor(Color.Black)
        Text('完成')
          .fontSize(20)
          .fontColor(Color.Green)
          .onClick(()=>{
            this.controller.close()
          })
      }
      Divider()
        .width('100%')
        .height(5)
        .color(Color.Black)
      Text('我的频道')
        .fontSize(20)
        .fontColor(Color.Black)
        .fontWeight(500)
        .textAlign(TextAlign.Start)
      Grid1({items:$tabBarArray})
    }.width('80%').height('100%').backgroundColor(Color.White).padding({top:60})
  }
}

@Entry
@Component
struct TabBar {
  dialogController:CustomDialogController|null = new CustomDialogController({
    builder:CustomDialogExample({tabBarArray:$tabBarArray}),
    autoCancel:true,
    offset:{dx:0,dy:0},
    alignment:DialogAlignment.CenterEnd,
    customStyle:true,
    backgroundColor:Color.White,
    cornerRadius:0
  })
  @State currentIndex:number = 0;
  @State tabBarArray:Array<string> = ['关注','推荐','男生','女生','历史','传记','人性','动漫']

  @Builder TabBuilder(index:number){
    Column(){
      Text(this.tabBarArray[index])
        .height('100%')
        .padding({left:'5%',right:'5%'})
        .fontSize(this.currentIndex === index ? 24 : 18)
        .fontWeight(this.currentIndex === index ? 700 : 400)
        .fontColor(Color.Black)
    }
  }
  @Builder TabBuilder2(index:number){
    Column(){
      Text('')
        .height('100%')
        .padding({left:'5%',right:'10%'})
        .fontSize(this.currentIndex === index ? 24 : 18)
        .fontWeight(this.currentIndex === index ? 700 : 400)
        .fontColor(Color.Black)
    }
  }

  build() {
    Stack({ alignContent: Alignment.TopEnd }) {
      Tabs() {
        ForEach(this.tabBarArray, (item: string, index: number) => {
          TabContent() {
          }
          .tabBar(this.TabBuilder(index))
        }, (item: string) => JSON.stringify(item))
        TabContent() {
        }
        .tabBar(this.TabBuilder2(8))
      }
      .fadingEdge(true)
      .barHeight('7.2%')
      .barMode(BarMode.Scrollable)
      .barWidth('100%')
      .onChange((index: number) => {
        this.currentIndex = index;
      })
      .vertical(false)

      Row() {
        Divider()
          .vertical(true)
          .width(1)
          .height(18)
          .color(Color.Black)
        Image($r('app.media.ic_public_more'))
          .width(16)
          .height(16)
          .objectFit(ImageFit.Contain)
          .margin({ left: 4 })
        Text('分类')
          .fontSize(18)
          .opacity(0.8)
          .fontColor(Color.Black)
          .margin({ left: 2 })
      }.width('17%').height('7.2%').backgroundColor(Color.White)
      .onClick(() => {
        if (this.dialogController != null) {
          this.dialogController.open()
        }
      })
    }.width('100%')
  }
}
// Grid.ets
@Component
export struct Grid1{
  @Link items:Array<string>
  @State text:string= 'drag'

  @Builder pixelMapBuilder(){
    Column(){
      Text(this.text)
        .fontSize(16)
        .backgroundColor(0xF9CF93)
        .width(80)
        .height(80)
        .textAlign(TextAlign.Center)
    }
  }

  changeIndex(index1:number,index2:number){
    let temp :Resource|string;
    temp = this.items[index1];
    this.items[index1] = this.items[index2];
    this.items[index2] = temp;
  }
  build(){
    Column({space:5}){
      Grid(){
        ForEach(this.items,(name:string,index:number)=>{
          GridItem(){
            Text(name)
              .fontSize(16)
              .backgroundColor(0xF9CF93)
              .width(80)
              .height(80)
              .textAlign(TextAlign.Center)
          }
        })
      }
      .columnsTemplate('1fr 1fr 1fr')
      .columnsGap(10)
      .rowsGap(10)
      .onScrollIndex((first:number)=>{
        console.info(first.toString())
      })
      .width('90%')
      .backgroundColor(Color.White)
      .height('100%')
      .editMode(true)
      .onItemDragStart((event:ItemDragInfo,itemIndex:number)=>{
        this.text = this.items[itemIndex]
        return this.pixelMapBuilder()
      })
      .onItemDrop((event:ItemDragInfo,itemIndex:number,insertIndex:number,isSuccess:boolean)=>{
        if(insertIndex < this.items.length){
          this.changeIndex(itemIndex,insertIndex)
        }
      })
    }.width('100%')
    .margin({top:5})
  }
}

我这边特意整理了《鸿蒙语法ArkTS、TypeScript、ArkUI、实战开发视频教程》以及《鸿蒙生态应用开发白皮书V2.0PDF》《鸿蒙开发学习手册》（共计890页）鸿蒙开发资料等…希望对大家有所帮助：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

鸿蒙语法ArkTS、TypeScript、ArkUI等…视频教程：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

在这里插入图片描述

OpenHarmony APP开发教程步骤：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

在这里插入图片描述

鸿蒙生态应用开发白皮书V2.0PDF：https://docs.qq.com/doc/DZVVkRGRUd3pHSnFG

在这里插入图片描述

应用开发中级就业技术：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

在这里插入图片描述

应用开发中高级就业技术：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

在这里插入图片描述

南北双向高工技能基础：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

在这里插入图片描述

全网首发-工业级 南向设备开发就业技术：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

在这里插入图片描述

《鸿蒙开发学习手册》：

如何快速入门：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

1.基本概念
2.构建第一个ArkTS应用
3.……
在这里插入图片描述

开发基础知识：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

1.应用基础知识
2.配置文件
3.应用数据管理
4.应用安全管理
5.应用隐私保护
6.三方应用调用管控机制
7.资源分类与访问
8.学习ArkTS语言
9.……
在这里插入图片描述

基于ArkTS 开发：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

1.Ability开发
2.UI开发
3.公共事件与通知
4.窗口管理
5.媒体
6.安全
7.网络与链接
8.电话服务
9.数据管理
10.后台任务(Background Task)管理
11.设备管理
12.设备使用信息统计
13.DFX
14.国际化开发
15.折叠屏系列
16.……
在这里插入图片描述

码牛程序猿
关注
  • 28
    点赞
  • 踩
  • 27
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
从零开始的HarmonyOS Next开发指南：打造HarmonyOS NEXT元服务
一键难忘的博客
05-26 4011
DevEco Studio 4.0是一个集成开发环境（IDE），专门为开发者提供一站式的HarmonyOS应用和服务开发支持。以下是DevEco Studio 4.0的一些主要特点：高效智能代码编辑：支持多种语言，如ArkTS、JavaScript、C/C++等，提供代码高亮、智能补齐、错误检查、自动跳转、格式化、查找等功能，以提升代码编写的效率。低代码可视化开发：拥有丰富的UI界面编辑能力，支持自由拖拽组件和可视化数据绑定，能够快速预览效果，所见即所得。
最全面鸿蒙系统开发的相关资料收录
Wscats
07-31 4049
开发 本示例基于 OpenHarmony 下的 JavaScript UI 框架，进行项目目录解读，JS FA、常用和自定义组件、用户交互、JS 动画的实现，通过本示例可以基本了解和学习到 JavaScript UI 的开发模式。 本项目是基于 OpenHarmony 项目而不是 HarmonyOS 项目，请注意运行环境。 请参考 OpenHarmony 项目配置方法 进行项目配置和运行。 如果你不熟悉 OpenHarmony 的 JS 开发，请参考该项目的 开发讲解。 示例 下载 awesome-har
OpenHarmony实战开发-使用一次开发多端部署实现一多导航栏
m0_70749039的博客
04-03 869
本示例展示了导航组件在不同设备形态下的样式。
HarmonyOS4.0应用开发-学习笔记
Cool_foolisher的博客
04-04 1205
HarmonyOS4.0学习笔记（整理自B站黑马程序员的HarmonyOS4.0教程）
鸿蒙(ArkTS)—ArkUI布局开发常见问题
m0_70749039的博客
05-28 1071
容器组件在使用position之后会脱离文本流，导致容器脱离外层容器束缚，导致height不生效，可以将外层容器换成Stack可以解决这个问题。
HarmonyOS Next应用开发案例大全-(持续更新中……)
shudaoshanQAQ的博客
04-07 2271
文章归纳了一些常见的性能问题，并提供相应的解决方案
OpenHarmony开发实战：健康生活应用（ArkTS）
shudaoshanQAQ的博客
04-12 814
本篇Codelab介绍了如何实现一个简单的健康生活应用
鸿蒙OS开发实战： 构建第一个ArkTS应用（Stage模型）
m0_64422261的博客
06-09 711
若首次打开DevEco Studio，请点击Create Project创建工程。如果已经打开了一个工程，请在菜单栏选择File>New>Create Project来创建一个新工程。
鸿蒙HarmonyOS实战-窗口管理_鸿蒙nativewindow 获取窗口(2)
2401_84164469的博客
04-18 724
（**ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony****多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）**技术知识点。应用子窗口是指在一个主窗口或父窗口之内创建一个较小的窗口，用于显示其他相关的内容或功能。// 开发者可以在适当的时机，如子窗口上点击关闭按钮等，销毁子窗口。// 开发者可以在适当的时机，如主窗口上按钮点击事件等，创建子窗口。
swift-iOS自定义导航栏-导航栏联动
08-15
现在大多数的APP都有导航栏联动效果，即滑动返回的时候导航栏也跟着一起返回，比如：网易新闻，网易云音乐，腾讯视频等等，于是通过查找一些资料及其他库的做法，自己也写了一个框架，可以让每一个控制器都拥有自己...
Web前端开发-简单导航栏实例
05-17
关于HTML中的导航栏的设计(夏季风格)~可以出现鼠标悬停效果变化~用div框起来，使用ul标签包含a。
Qt - 导航栏的实现
01-25
Qt - 导航栏的实现 只是当初练手的一些草稿类的东西，具体请参考博文 http://blog.csdn.net/lys211/article/details/43743187
HarmonyOS(33) @LocalStorageProp使用指南
菜鸟博客
06-12 350
HarmonyOS @LocalStorageProp使用指南
【HarmonyOS】鸿蒙应用模块化实现
我的小窝
06-10 909
鸿蒙应用模块化实现
HarmonyOS Next 系列之从手机选择图片或拍照上传功能实现（五）
pixle的博客
06-11 627
HarmonyOS Next（基于API11）实现从手机选择图片或拍照上传功能，常用于头像上传等操作
HarmonyOS(35) @State使用注意事项
菜鸟博客
06-13 220
HarmonyOS @State使用注意事项
鸿蒙轻内核A核源码分析系列七 进程管理 (1)
最新发布
maniuT的博客
06-13 448
本文先熟悉下进程管理的概念、运行机制和编程接口。
HarmonyOS(36) DevEco Studio 配置debug和release
菜鸟博客
06-13 272
HarmonyOS 配置debug和release
使用 HTML/CSS 实现-顶部导航栏
04-14
很高兴回答你的问题。关于使用 HTML/CSS 实现顶部导航栏的问题，我可以给出一些简单的建议。您可以在HTML页面的header区域放置一个导航栏的容器，然后使用CSS样式来设计导航栏的外观和布局。您可以使用CSS的flexbox属性来设置导航栏的布局和位置，也可以使用CSS的hover伪类属性来增加导航栏的交互效果，使用户能更好地使用导航栏。希望这些建议对你有所帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值