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

news/发布时间2024/5/15 4:28:51

前言

为了实现安卓中的侧滑菜单布局效果,通过查找鸿蒙的布局控件,发现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@BuilderleftView() {Text('我是侧边栏').fontSize(30)}@BuilderrightView() {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@BuilderleftView() {Text('我是侧边栏').fontSize(30)}@BuilderrightView() {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、控件效果:

 

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

如若内容造成侵权/违法违规/事实不符,请联系编程老四网进行投诉反馈email:xxxxxxxx@qq.com,一经查实,立即删除!

相关文章

☀️将大华摄像头画面接入Unity 【1】配置硬件和初始化摄像头

一、硬件准备 目前的设想是后期采用网口供电的形式把画面传出来,所以这边我除了大华摄像头还准备了POE供电交换机,为了方便索性都用大华的了,然后全都连接电脑主机即可。 二、软件准备 这边初始化摄像头需要用到大华的Configtool软件&#…

Vue3自定义组件v-model双向绑定

无能吐槽一下,虽然用了很多遍v-model,但是还是不得要领,每次看官网都感觉说的不是很清晰,在写的时候还是要查看文档,可能就是不理解原理,这次特意好好写一篇文章,让自己好好理解一下。 自定义一…

【JVM】五种对象引用

📝个人主页:五敷有你 🔥系列专栏:JVM ⛺️稳中求进,晒太阳 几种常见的对象引用 可达性算法中描述的对象引用,一般指的是强引用,即是GCRoot对象对普通对象有引用关系,只要这层…

数据结构day2

结构体字节对齐 32位&#xff1a;844432 32位&#xff1a;1122444422 两种验证大小端对齐 共用体判断 #include <stdio.h> union A {char t1;int t2; }; int main(int argc, const char *argv[]) {union A a1; //栈区a1.t2 0x12345678; //0x12数据高位 0x78数据…

UE5 C++ 创建Actor并在构造函数中添加组件

一.在C文件夹里创建Actor类 在头文件中声明需要的组件 声明组件指针属性和构造函数 在构造函数中将对应的组件指针实例化&#xff0c; CreateDefaultSubobject<T> 每个Actor里内部自动带有RootComponent根组件&#xff0c;将场景组件作为组件。其余用SetupAttachment来作…

森林安全新保障:智能高压应急消防泵的应用

随着城市化进程的加快&#xff0c;森林资源的保护和利用日益受到重视。然而&#xff0c;森林火灾时有发生&#xff0c;给生态环境带来严重破坏。为了有效应对森林火灾&#xff0c;保障森林资源安全&#xff0c;智能高压森林应急消防泵应运而生&#xff0c;成为守护绿色生命的钢…

Leetcode3035. 回文字符串的最大数量

Every day a Leetcode 题目来源&#xff1a;3035. 回文字符串的最大数量 解法1&#xff1a;哈希 排序 由于可以随意交换字母&#xff0c;先把所有字母都取出来&#xff0c;然后考虑如何填入各个字符串。 如果一个奇数长度字符串最终是回文串&#xff0c;那么它正中间的那…

7-liunx服务器规范

目录 概况liunx日志liunx系统日志syslog函数openlog 可以改变syslog默认输出方式 &#xff0c;进一步结构化 用户信息进程间的关系会话ps命令查看进程关系 系统资源限制改变工作目录和根目录服务器程序后台话 概况 liunx服务器上有很多细节需要注意 &#xff0c;这些细节很重要…

【结合OpenAI官方文档】解决Chatgpt的API接口请求速率限制

OpenAI API接口请求速率限制 速率限制以五种方式衡量&#xff1a;RPM&#xff08;每分钟请求数&#xff09;、RPD&#xff08;每天请求数&#xff09;、TPM&#xff08;每分钟令牌数&#xff09;、TPD&#xff08;每天令牌数&#xff09;和IPM&#xff08;每分钟图像数&#x…

yolov9来了,附官方源码地址,蓝奏云国内下载代码

不得不说&#xff0c;yolo的更新是真TMD的勤&#xff0c;v8还没熟悉透&#xff0c;结果V9就来了。 官方地址&#xff1a;https://github.com/WongKinYiu/yolov9/ 如果访问不了github的朋友们&#xff0c;可以下载微智启软件工作室准备好的国内蓝奏云网盘&#xff0c;内容是一样…

突破亚马逊智能检测,全自动化运营的新利器:亚马逊鲲鹏系统

在亚马逊运营的道路上一般最为棘手的问题之一就是账号关联和安全性。而亚马逊鲲鹏系统它不仅拥有最新的防指纹技术&#xff0c;还能够完全模拟真实的人类行为&#xff0c;让每个账号都拥有独立环境运行&#xff0c;从而保证账号的安全性&#xff0c;让用户摆脱了账号关联的困扰…

从零开始快速构建自己的Flink应用

本文介绍如何在 mac 下快速构建属于自己的 Flink 应用。 1. 本地安装 flink 在 mac 上使用homebrew安装 flink&#xff1a; brew install apache-flink查看安装的位置&#xff1a; brew info apache-flink进入安装目录&#xff0c;启动 flink 集群&#xff1a; cd /usr/lo…

SQL- left join 与group by联合使用实例

表&#xff1a;Visits ---------------------- | Column Name | Type | ---------------------- | visit_id | int | | customer_id | int | ---------------------- visit_id 是该表中具有唯一值的列。 该表包含有关光临过购物中心的顾客的信息。表&#xff1a…

使用 JMeter 生成测试数据对 MySQL 进行压力测试

博主历时三年精心创作的《大数据平台架构与原型实现&#xff1a;数据中台建设实战》一书现已由知名IT图书品牌电子工业出版社博文视点出版发行&#xff0c;点击《重磅推荐&#xff1a;建大数据平台太难了&#xff01;给我发个工程原型吧&#xff01;》了解图书详情&#xff0c;…

数据结构——串——KMP算法

1.KMP算法是什么&#xff1f; KMP算法是一个模式匹配算法&#xff0c;可以大大避免重复遍历的情况&#xff08;也就是避免掉了传统的朴素模式匹配算法的低效&#xff09; 因此我们KMP算法用于解决的就是字符串匹配问题 因此&#xff0c;假设我们有两个串&#xff0c;一个文本串…

【深入理解设计模式】单例设计模式

单例设计模式 概念&#xff1a; 单例模式&#xff08;Singleton Pattern&#xff09;是 Java 中最简单的设计模式之一。 单例设计模式是一种创建型设计模式&#xff0c;其主要目的是确保类在应用程序中的一个实例只有一个。这意味着无论在应用程序的哪个位置请求该类的实例&a…

编程学习线上提问现场解答流程,零基础学编程从入门到精通

编程学习线上提问现场解答流程 一、前言 之前给大家分享的一款中文编程工具&#xff0c;越来越多的学员使用这个工具学习编程。 在学习中有疑难问题寻求解答流程 1、可以在本平台留言或发私信联系老师 2、可以在群提问及时解答问题 3、通过线上会议的方式&#xff0c;电脑…

日月光投控以近5亿元收购英飞凌2座封测厂 | 百能云芯

日月光投控&#xff08;ASE Group&#xff09;日前宣布&#xff0c;计划以逾人民币4.78亿元收购德国芯片大厂英飞凌&#xff08;Infineon&#xff09;旗下位于菲律宾和韩国的两座后段封测厂。这一举措旨在扩大日月光在车用和工业自动化应用的电源芯片模组封测与导线架封装方面的…

【DAY03 软考中级备考笔记】存储系统,总线系统,输入输出系统和可靠性

存储系统&#xff0c;总线系统&#xff0c;输入输出系统和可靠性 2月22日 – 天气&#xff1a;阴转晴 济南下大雪&#xff0c;居家办公两天。 1. 计算机存储器的分类 根据存储位置划分&#xff1a; 内存/主存&#xff1a;用来保存当前正在运行的程序所需要的数据&#xff0c…

直接查看电脑几核芯几线程的方法

之前查看电脑几核芯几线程时都是点击 此电脑->属性->设备管理器->处理器 但是这样并不能判断是否有多线程 譬如这里&#xff0c;是2核芯2线程还是4核芯&#xff1f; 实际上&#xff0c;打开任务管理器后点击性能查看核芯线程数即可 所以示例这台电脑是4核芯而不是2…
推荐文章