2013 duilib入门简明教程 -- 完整的自绘标题栏(8)

2023-10-19 21:19

本文主要是介绍2013 duilib入门简明教程 -- 完整的自绘标题栏(8),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

看了前面那么多教程,相信对duilib已有基本映像了,我们就快马加鞭,做出一个完整的自绘标题栏吧~
看到下面这个效果图,小伙伴们是不是有点惊呆了呢~O(∩_∩)O~
duilib实现以上效果非常简单,
1、将按钮图片的文件夹放到exe目录, 点此下载
2、main.cpp的代码无需改动,只需改动XML,XML内容如下(受网页宽度限制,以下XML格式有点乱,请复制到本地的XML编辑器上,以方便查看):


<?xml version="1.0" encoding="UTF-8"?>
<Window size="800,600" mininfo="600,400" caption="0,0,0,32" sizebox="4,4,4,4"> <!-- 窗口的初始尺寸(宽800,高600)、窗口的最小尺寸(宽600,高400)、标题栏拖拽区域(高32)、可拖拽边框大小(这里添加sizebox后就可以拖拽边框调整大小了) --><VerticalLayout bkcolor="#FFF0F0F0" bkcolor2="#FFAAAAA0"> <!-- 整个窗口的背景色 --><!-- 标题栏区 --><HorizontalLayout height="32" bkcolor="#FFE6E6DC" bkcolor2="#FFAAAAA0"> <!-- 标题栏背景色 bkcolor、bkcolor2、bkcolor3分别是渐变色的三个值-->         <VerticalLayout /> <!-- 占空位,占据左边所有的空位--><VerticalLayout width="77"> <!-- 右边三个控件所占的宽度--><Button name="minbtn"   tooltip="最小化" float="true" pos="0,5,22,24"  width="23" normalimage=" file='SysBtn\MinNormal.bmp' " hotimage=" file='SysBtn\MinFocus.bmp' " pushedimage=" file='SysBtn\MinFocus.bmp' "/><Button name="maxbtn"   tooltip="最大化" float="true" pos="22,5,44,24" width="23" normalimage=" file='SysBtn\MaxNormal.bmp' " hotimage=" file='SysBtn\MaxFocus.bmp' " pushedimage=" file='SysBtn\MaxFocus.bmp' " /><Button name="restorebtn" visible="false" tooltip="还原" float="true" pos="22,5,44,24" width="23" normalimage=" file='SysBtn\StoreNormal.bmp' " hotimage=" file='SysBtn\StoreFocus.bmp' " pushedimage=" file='SysBtn\StoreFocus.bmp' " /><Button name="closebtn" tooltip="关闭"   float="true" pos="44,5,74,24" width="28" normalimage=" file='SysBtn\CloseNormal.bmp' " hotimage=" file='SysBtn\CloseFocus.bmp' " pushedimage=" file='SysBtn\CloseFocus.bmp' "/></VerticalLayout>      </HorizontalLayout><!-- 客户区 --><HorizontalLayout><Button name="btnHello" text="Hello World"/></HorizontalLayout></VerticalLayout>
</Window>

  仅仅在XML里面加了20行代码,一个完整的标题栏居然就完成了!

试试标题栏可以拖动不,试试可以最大化不,试试有提示条不,试试按钮外观会变化不,试试可以拖拽边框调整窗口大小不?
必须都可以!
虽然我们并没有处理以上消息,但是很多功能都已实现,因为WindowImplBase帮我们都做好了。
小伙伴们,继承了WindowImplBase之后,妈妈再也不用担心我的界面啦~O(∩_∩)O哈哈~
虽然XML里面已经有很详细的注释了,鉴于以下问题在群里多次出现,所以还是重复提醒一遍:
以下问题都在XML第二行的 <Window>节点里添加。
1、为什么标题栏不能拖动?
需要在<Window>节点添加 caption="0,0,0,32",这里的32是指标题栏的高度
2、怎么让窗口大小可以通过拖拽来调整?
需要在<Window>节点添加 sizebox="4,4,4,4", 这里的4是指鼠标移动到边框4个像素的范围内,鼠标就会显示拖拽样式,这时就可以调整窗口大小了
下面Alberl来一一解释下XML代码的意思。大部分地方都有明显注释了,重点要解释的就是HorizontalLayout、VerticalLayout以及Button的样式了。
    这一节先介绍Button的样式,大家可以看到关闭按钮除了鼠标移上去有不同外观,还有一个提示条。这些都是在这一行代码里指定的

<Button name="closebtn" tooltip="关闭"   float="true" pos="44,5,74,24" width="28" normalimage=" file='SysBtn\CloseNormal.bmp' " hotimage=" file='SysBtn\CloseFocus.bmp' " pushedimage=" file='SysBtn\CloseFocus.bmp' "/>

其中:

name="closebtn"    唯一标识按钮,其他按钮的name不能与其重复
tooltip="关闭"         就是那个提示条的文字
float="true"            代表按钮的位置是绝对定位,其位置由pos属性指定
pos="44,5,74,24"    代表按钮的位置矩阵,分别为矩阵左、上、右、下四个点
width="28"             代表按钮图片显示的宽度(这个可以不填,但是由于按钮图片没有做好,如果不填的话,图片会被拉伸有点失真)
normalimage           代表正常状态下按钮显示的图片路径
hotimage                代表鼠标移上去时,按钮显示的图片路径     
pushedimage          代表鼠标点击按钮时,按钮显示的图片路径     
下一节将会介绍HorizontalLayout、VerticalLayout。

这篇关于2013 duilib入门简明教程 -- 完整的自绘标题栏(8)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/242417

相关文章

Ubuntu中远程连接Mysql数据库的详细图文教程

《Ubuntu中远程连接Mysql数据库的详细图文教程》Ubuntu是一个以桌面应用为主的Linux发行版操作系统,这篇文章主要为大家详细介绍了Ubuntu中远程连接Mysql数据库的详细图文教程,有... 目录1、版本2、检查有没有mysql2.1 查询是否安装了Mysql包2.2 查看Mysql版本2.

在React中引入Tailwind CSS的完整指南

《在React中引入TailwindCSS的完整指南》在现代前端开发中,使用UI库可以显著提高开发效率,TailwindCSS是一个功能类优先的CSS框架,本文将详细介绍如何在Reac... 目录前言一、Tailwind css 简介二、创建 React 项目使用 Create React App 创建项目

Elasticsearch 在 Java 中的使用教程

《Elasticsearch在Java中的使用教程》Elasticsearch是一个分布式搜索和分析引擎,基于ApacheLucene构建,能够实现实时数据的存储、搜索、和分析,它广泛应用于全文... 目录1. Elasticsearch 简介2. 环境准备2.1 安装 Elasticsearch2.2 J

Linux系统中卸载与安装JDK的详细教程

《Linux系统中卸载与安装JDK的详细教程》本文详细介绍了如何在Linux系统中通过Xshell和Xftp工具连接与传输文件,然后进行JDK的安装与卸载,安装步骤包括连接Linux、传输JDK安装包... 目录1、卸载1.1 linux删除自带的JDK1.2 Linux上卸载自己安装的JDK2、安装2.1

Spring Boot + MyBatis Plus 高效开发实战从入门到进阶优化(推荐)

《SpringBoot+MyBatisPlus高效开发实战从入门到进阶优化(推荐)》本文将详细介绍SpringBoot+MyBatisPlus的完整开发流程,并深入剖析分页查询、批量操作、动... 目录Spring Boot + MyBATis Plus 高效开发实战:从入门到进阶优化1. MyBatis

Linux卸载自带jdk并安装新jdk版本的图文教程

《Linux卸载自带jdk并安装新jdk版本的图文教程》在Linux系统中,有时需要卸载预装的OpenJDK并安装特定版本的JDK,例如JDK1.8,所以本文给大家详细介绍了Linux卸载自带jdk并... 目录Ⅰ、卸载自带jdkⅡ、安装新版jdkⅠ、卸载自带jdk1、输入命令查看旧jdkrpm -qa

Java使用Curator进行ZooKeeper操作的详细教程

《Java使用Curator进行ZooKeeper操作的详细教程》ApacheCurator是一个基于ZooKeeper的Java客户端库,它极大地简化了使用ZooKeeper的开发工作,在分布式系统... 目录1、简述2、核心功能2.1 CuratorFramework2.2 Recipes3、示例实践3

springboot简单集成Security配置的教程

《springboot简单集成Security配置的教程》:本文主要介绍springboot简单集成Security配置的教程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,... 目录集成Security安全框架引入依赖编写配置类WebSecurityConfig(自定义资源权限规则

MySQL Workbench 安装教程(保姆级)

《MySQLWorkbench安装教程(保姆级)》MySQLWorkbench是一款强大的数据库设计和管理工具,本文主要介绍了MySQLWorkbench安装教程,文中通过图文介绍的非常详细,对大... 目录前言:详细步骤:一、检查安装的数据库版本二、在官网下载对应的mysql Workbench版本,要是

通过Docker Compose部署MySQL的详细教程

《通过DockerCompose部署MySQL的详细教程》DockerCompose作为Docker官方的容器编排工具,为MySQL数据库部署带来了显著优势,下面小编就来为大家详细介绍一... 目录一、docker Compose 部署 mysql 的优势二、环境准备与基础配置2.1 项目目录结构2.2 基