鸿蒙自定义侧滑菜单布局(DrawerLayout)

前言

为了实现安卓中的侧滑菜单布局效果,通过查找鸿蒙的布局控件,发现SideBarContainer控件有点像,但是使用中发现并不是很符合我们的UI交互效果,因此我在鸿蒙中通过自定义布局的方式实现,本文主要介绍该自定义控件如何使用、SideBarContainer原生控件如何使用,后面会介绍如何通过自定义实现侧滑菜单布局。

DeVEcoStudio版本如下:

"minAPIVersion": 9,
"targetAPIVersion": 9,

控件效果

 

如何使用

1、DrawerLayout.har包的引用

DrawerLayout.har下载地址:https://download.csdn.net/download/Abner_Crazy/88864397

entry下的main目录下新建libs目录将下载完成的DrawerLayout.har拷贝到该目录,然后在oh-package.json5文件中添加对DrawerLayout.har的引用

oh-package.json5文件

{
  "license": "",
  "devDependencies": {},
  "author": "",
  "name": "entry",
  "description": "Please describe the basic information.",
  "main": "",
  "version": "1.0.0",
  "dependencies": {
    "@app/DrawerLibrary": "file:./src/main/libs/DrawerLibrary.har"
  }
}

2、调用DrawerLayout布局

import { DrawerController, DrawerLayout } from '@app/DrawerLibrary'

@Entry
@Component
struct Index {
   @State controller: DrawerController = new DrawerController()
   @State isShowSideBar: boolean = false

   @Builder
   leftView() {
      Text('我是侧边栏').fontSize(30)
   }

   @Builder
   rightView() {
      Column() {
         RelativeContainer() {
            Image(this.isShowSideBar ? $r('app.media.drawer_select') : $r('app.media.drawer_normal'))
               .width(32)
               .height(32)
               .id('imageDrawer')
               .margin({ left: 20 })
               .alignRules({
                  center: { anchor: '__container__', align: VerticalAlign.Center },
                  left: { anchor: '__container__', align: HorizontalAlign.Start }
               })
               .onClick(() => {
                  if (this.isShowSideBar) {
                     this.controller.hideSideBar()
                  } else {
                     this.controller.showSideBar()
                  }
               })

            Text('首页')
               .fontSize(24)
               .fontColor(Color.White)
               .fontWeight(FontWeight.Bold)
               .id("textTitle")
               .alignRules({
                  center: { anchor: '__container__', align: VerticalAlign.Center },
                  middle: { anchor: '__container__', align: HorizontalAlign.Center }
               })
         }
         .backgroundColor('#1296db')
         .width('100%')
         .height(56)
      }.width('100%')
      .height('100%')
   }

   build() {
      Stack() {
         DrawerLayout({
            isShowSideBar: this.isShowSideBar,
            controller: this.controller,
            leftView: () => this.leftView(),
            rightView: () => this.rightView()
         })
      }.width('100%')
      .height('100%')
   }
}

DrawerLayout参数解释:

属性是否必须描述
isShowSideBar侧边栏是否显示
controller

布局控制器,有两个方法:

showSideBar():显示侧边栏

hideSideBar():隐藏侧边栏

leftView左侧侧边栏的布局
rightView右侧内容的布局
sideBarWidth左侧侧边栏的宽度

鸿蒙原生侧边栏布局使用介绍

SideBarContainer控件官方介绍:sidebarcontainer介绍

1、SideBarContainer调用


@Entry
@Component
struct Index {
   @State isShowSideBar: boolean = false

   @Builder
   leftView() {
      Text('我是侧边栏').fontSize(30)
   }

   @Builder
   rightView() {
      Column() {
         RelativeContainer() {
            Image(this.isShowSideBar ? $r('app.media.drawer_select') : $r('app.media.drawer_normal'))
               .width(32)
               .height(32)
               .id('imageDrawer')
               .margin({ left: 20 })
               .alignRules({
                  center: { anchor: '__container__', align: VerticalAlign.Center },
                  left: { anchor: '__container__', align: HorizontalAlign.Start }
               })
               .onClick(() => {
                  this.isShowSideBar = !this.isShowSideBar
               })

            Text('首页')
               .fontSize(24)
               .fontColor(Color.White)
               .fontWeight(FontWeight.Bold)
               .id("textTitle")
               .alignRules({
                  center: { anchor: '__container__', align: VerticalAlign.Center },
                  middle: { anchor: '__container__', align: HorizontalAlign.Center }
               })
         }
         .backgroundColor('#1296db')
         .width('100%')
         .height(56)
      }.width('100%')
      .height('100%')
   }

   build() {
      Stack() {
         SideBarContainer(SideBarContainerType.Embed) {
            this.leftView()

            this.rightView()
         }
         .showSideBar(this.isShowSideBar)
         .showControlButton(false) //是否显示控制按钮
         .sideBarWidth(300)
         .maxSideBarWidth(300)
         .onChange((value: boolean) => {
            console.info('status:' + value)
         })
      }.width('100%')
      .height('100%')
   }
}

2、控件效果:

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/404580.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

第3.6章:StarRocks数据导入——DataX StarRocksWriter

一、Datax 1.1 DataX 3.0概述 DataX3.0是一个异构数据源离线同步工具,可以方便的对各种异构数据源进行高效的数据同步。 其github地址为: https://github.com/alibaba/DataX/blob/master/introduction.mdhttps://github.com/alibaba/DataX/blob/mast…

【Java代码审计】XSS漏洞

1. XSS漏洞 XSS(Cross Site Scripting,为了和层叠样式表(Cascading Style Sheet,CSS)有所区分,故称XSS)跨站脚本攻击是一种针对网站应用程序的安全漏洞攻击技术。它可以实现用户会话劫持、钓鱼攻击、恶意重…

罗克韦尔AB的PLC实现ModbusTCP和ModbusRTU协议标签方式通讯

本文是通过IGT-DSER智能网关读写AB罗克韦尔Compact、Control系列PLC的标签数据缓存并转为Modbus从站协议,与上位机通讯的案例。 打开智能网关的参数软件(下载地址),通过功能->数据转发与平台对接,再选择数据转发与缓存’,进入以…

浏览器录屏技术:探索网页内容的视觉记录之道

title: 浏览器录屏技术:探索网页内容的视觉记录之道 date: 2024/2/23 14:32:49 updated: 2024/2/23 14:32:49 tags: 浏览器录屏技术原理Web API应用场景用户体验在线教育产品演示 在当今数字化时代,浏览器录屏技术已经成为了一种强大的工具,…

基于springboot+vue的视频网站系统(前后端分离)

博主主页:猫头鹰源码 博主简介:Java领域优质创作者、CSDN博客专家、阿里云专家博主、公司架构师、全网粉丝5万、专注Java技术领域和毕业设计项目实战,欢迎高校老师\讲师\同行交流合作 ​主要内容:毕业设计(Javaweb项目|小程序|Pyt…

力扣随笔之按奇偶排序数组(简单905)

思路1:根据双指针对撞指针的思路,定义一个左指针从数组前端开始遍历,定义一个右指针从后端开始遍历,这时候有四种情况 左奇右偶:这种情况需要将其位置交换,将偶数提前,奇数后移左奇右奇&#xf…

【Lazy ORM】 小工具 acw 本地客户端 你负责点击页面,他负责输出代码

介绍 wu-smart-acw-client 简称acw-client&#xff0c;是一个基于Lazy ORM定制的客户端代码生成小工具 Lazy ORM 小工具 acw 本地客户端 你负责点击页面&#xff0c;他负责输出代码安装 <dependency><groupId>top.wu2020</groupId><artifactId>wu-sma…

Qt_快速安装指南

下载Qt在线安装程序&#xff08;不仔细介绍&#xff09;注册Qt账号&#xff08;不仔细介绍&#xff09;使用快速运行的命令&#xff0c;按照指定的下载地址下载 在Qt指定目录打开cmd命令窗口.\eqt-unified-windows-x86-4.0.1-1-online. exe --mirror https://mirrors.ustc.edu.…

计算机设计大赛 深度学习卷积神经网络垃圾分类系统 - 深度学习 神经网络 图像识别 垃圾分类 算法 小程序

文章目录 0 简介1 背景意义2 数据集3 数据探索4 数据增广(数据集补充)5 垃圾图像分类5.1 迁移学习5.1.1 什么是迁移学习&#xff1f;5.1.2 为什么要迁移学习&#xff1f; 5.2 模型选择5.3 训练环境5.3.1 硬件配置5.3.2 软件配置 5.4 训练过程5.5 模型分类效果(PC端) 6 构建垃圾…

Cesium 展示——加载 tileset.json 格式的模型数据

文章目录 需求分析需求 已给 tileset.json 文件,现需加载该模型文件, 该模型特点:模型上的各模块均可以进行点击设置,且相机视角拉近后可以看到内部隐藏的物件模块 分析 tileset.json :模型数据【模型加载】方法export function init3dTileLayer (option) {var tilesetMo…

【SpringBoot3】Spring Security 常用配置总结

注&#xff1a;本文基于Spring Boot 3.2.1 以及 Spring Security 6.2.1 相关文章 【SpringBoot3】Spring Security 核心概念 【SpringBoot3】Spring Security 常用注解 【SpringBoot3】Spring Security 详细使用实例&#xff08;简单使用、JWT模式&#xff09; 【SpringBoot3】…

ChatGPT调教指南 | 咒语指南 | Prompts提示词教程(二)

在我们开始探索人工智能的世界时&#xff0c;了解如何与之有效沉浸交流是至关重要的。想象一下&#xff0c;你手中有一把钥匙&#xff0c;可以解锁与OpenAI的GPT模型沟通的无限可能。这把钥匙就是——正确的提示词&#xff08;prompts&#xff09;。无论你是AI领域的新手&#…

flinksql 流表转换, 自定义udf/udtf,SQL 内置函数及自定义函数

flinksql 流表转换&#xff0c; 自定义udf/udtf 1、标量函数2、表函数3、聚合函数4、表聚合函数 1、在大多数情况下&#xff0c;用户定义的函数必须先注册&#xff0c;然后才能在查询中使用。不需要专门为 Scala 的 Table API 注册函数。 2、函数通过调用 registerFunction&am…

yolov9目标检测报错AttributeError: ‘list‘ object has no attribute ‘device‘

最近微智启软件工作室在运行yolov9目标检测的detect.py测试代码时&#xff0c;报错&#xff1a; File “G:\down\yolov9-main\yolov9-main\detect.py”, line 102, in run pred non_max_suppression(pred, conf_thres, iou_thres, classes, agnostic_nms, max_detmax_det) Fil…

Python urllib、requests、HTMLParser

HTTP协议 HTTP 协议&#xff1a;一般指HTTP(超文本传输)协议。 HTTP是为Web浏览器和Web服务器之间的通信而设计的&#xff0c;基于TCP/IP通信协议嘞传递数据。 HTTP消息结构 客户端请求消息 客户端发送一个HTTP请求到服务器的请求消息包括以下格式 请求行(request line)请求…

排序算法之——归并排序

归并排序 1. 基本思想2. 数据的分解3. 数据的合并4.归并排序的实现4.1 递归实现4.1.1 一个易错点4.1.2 运行结果 4.2 非递归实现4.2.1 图示思路4.2.2 代码实现4.2.3 一个易错点4.2.4 修改后的代码4.2.5 运行结果 6. 时间复杂度7. 空间复杂度8. 稳定性9. 动图演示 1. 基本思想 …

h-table(表格列表组件的全封装)

文章目录 概要h-table的封装过程查询组件封装 h-highForm结果页右侧工具栏封装RightToolbar结果页列表组件h-table结果页vue页面使用js文件有需要的请私信博主&#xff0c;还请麻烦给个关注&#xff0c;博主不定期更新组件封装&#xff0c;或许能够有所帮助&#xff01;&#x…

如何用GPT进行成像光谱遥感数据处理?

第一&#xff1a;遥感科学 从摄影侦察到卫星图像 遥感的基本原理 遥感的典型应用 第二&#xff1a;ChatGPT ChatGPT可以做什么&#xff1f; ChatGPT演示使用 ChatGPT的未来 第三&#xff1a;prompt 提示词 Prompt技巧&#xff08;大几岁&#xff09; 最好的原则和策…

互动游戏团队如何将性能体验优化做到TOP级别

一、背景 随着互动游戏业务 DAU 量级增加&#xff0c;性能和体验重要性也越发重要&#xff0c;好的性能和体验不仅可以增加用户使用体感&#xff0c;也可以增加用户对于互动游戏的使用粘性。 对现状分析&#xff0c;主要存在首屏渲染速度慢、打开页面存在白屏、页面加载过多资…

app测试必掌握的核心测试:UI、功能测试!

一、UI测试 UI即User Interface (用户界面)的简称。UI 设计则是指对软件的人机交互、操作逻辑、界面美观的整体设计。好的UI设计不仅是让软件变得有个性有品味,还要让软件的操作变得舒适、简单、自由、充分体现软件的定位和特点。手机APP从启动界面开始, 到运行过程,直至退出,…