DuiLib了解xml的使用和布局

news2024/11/25 3:34:35

文章目录

  • 1、了解 XML 使用和布局
  • 2、VerticalLayout和HorizontalLayout
  • 3、TabLayout
  • 4、TileLayout
  • 5、Container
  • 6、ChildLayout

1、了解 XML 使用和布局

本节主要介绍 DuiLib 中 XML 关键字的使用和一些特性，通过构建一个简单的带标题栏和简单结构的窗口，目的为了了解 XML 的布局系统、基本控件和一些全局属性。在介绍之前我们先改造一下程序，让程序在 Debug 模式下使用本地的 XML 文件，只有在发布为 Release 版本时才使用打包到程序中的 ZIP 资源文件。修改 GetSkinFolder 和 GetResourceType 两个方法，如下所示。

DuiLib::CDuiString MainWndFrame::GetSkinFolder()
{
	#if _DEBUG
		return _T("theme");
	#else
		return m_PaintManager.GetInstancePath();
	#endif
}
.....
.....
DuiLib::UILIB_RESOURCETYPE MainWndFrame::GetResourceType() const
{
	#if _DEBUG
		return UILIB_FILE;
	#else
		return UILIB_ZIPRESOURCE;
	#endif
}

这样我们程序在 Debug 模式下使用的就是本地的 theme 文件夹内的资源了，主要是方便我们进行更新即时查看。接下来我们先从主要的几个布局开始，DuiLib 中重要的几个布局分别如下：

  • VerticalLayout。
  • HorizontalLayout。
  • TabLayout。
  • Container。
  • ChildLayout。

使用频率由上到下，下面我们分别介绍几种布局的特点。

2、VerticalLayout和HorizontalLayout

DuiLib 的布局系统类似于 Qt 的布局系统， HorizontalLayout 和 VerticalLayout（垂直布局）来给界面划分整体区域。 HorizontalLayout 顾名思义，就是让其包含的控件以水平位置排布。而 VerticalLayout 则是让起包含的控件以垂直方向进行排布。两种布局在界面中最终体现为什么样子？我们可以做一个实现来验证一下效果。但无论我们使用什么布局，最少要有一个最外部的布局。如下所示：

<?xml version="1.0" encoding="UTF-8"?>
<Window size="640,480" caption="0,0,0,35">
  <VerticalLayOut>
    <!--窗口内容-->
  </VerticalLayOut>
</Window>

第一行是 xml 描述，这个必须要有的，不了解的同学可以搜索一些 XML 相关的介绍教程，十几分钟就看的差不多了。Window 标签也是必须要有的外部标签，size 属性决定了这个窗口的大小，caption 属性决定了这个窗口的标题栏有效范围是多大的，我们设置了 35 像素，也就是整个窗口最上方的 35 像素是可以用鼠标点击拖动的，更多的属性我们后面再来看 属性列表xml，这里先不多介绍。

DuiLib 通过这个Window 标签来识别窗口。Window 里面的 VerticalLayout是一个最外部的布局，我们要写窗体的内部构成，都是基于这个最基本的窗体布局系统来完成的。当然你并不一定必须用 VerticalLayout来做最外部的布局，这要看你窗口的实际布局效果。如果窗体是从左到右的水平布局模式，那你应该用 HorizontalLayout 。

首先我们在这个上下布局基本的布局系统中添加三个左右布局的子布局 HorizontalLayout并设置成三种不同的颜色（通过 bkcolor 属性）来看一下效果是什么样子的。

<?xml version="1.0" encoding="UTF-8"?>
<Window size="640,480" caption="0,0,0,35">
  <VerticalLayOut>
    <!--窗口内容-->
      <HorizontalLayout bkcolor="#FFD81E06" />
      <HorizontalLayout bkcolor="#FF1AFA29" />
      <HorizontalLayout bkcolor="#FF1296DB" />
  </VerticalLayOut>
</Window>

以上效果在程序运行后显示如下效果。
在这里插入图片描述
可以看出，三个 HorizontalLayout被父控件规定为以垂直方式布局，从上到下依次排列，垂直布局不关心控件宽度，如果我们把外部的 VerticalLayout 修改为 HorizontalLayout。那么下面的三个控件应该是水平的从做到右以此排列。如下所示：

<?xml version="1.0" encoding="UTF-8"?>
<Window size="640,480" caption="0,0,0,35">
  <HorizontalLayout>
    <!--窗口内容-->
      <HorizontalLayout bkcolor="#FFD81E06" />
      <HorizontalLayout bkcolor="#FF1AFA29" />
      <HorizontalLayout bkcolor="#FF1296DB" />
  </HorizontalLayout>
</Window>

在这里插入图片描述
如果我们在子布局中再添加一些其他的控件，我们就能看出， HorizontalLayout下面的控件也是遵循它父级的规定来水平布局的。如下所示：

<?xml version="1.0" encoding="UTF-8"?>
<Window size="640,480" caption="0,0,0,35">
  <HorizontalLayout>
    <!--窗口内容-->
      <HorizontalLayout bkcolor="#FFD81E06" >
        <Button text="1" height="30" bkcolor="#FFD81E06" />
        <Button text="2" height="30" bkcolor="#FF1AFA29" />
        <Button text="3" height="30" bkcolor="#FF1296DB" />
      </HorizontalLayout>
        
      <HorizontalLayout bkcolor="#FF1AFA29" />
      <HorizontalLayout bkcolor="#FF1296DB" />
  </HorizontalLayout>
</Window>

控件的排布效果如下：
在这里插入图片描述
这就是基本的水平和垂直布局系统的简单介绍，这两种布局是使用频率最高的了，基本上界面的布局需求都可以通过这两种布局来实现了。但是总会有个别的布局场景是需要个性化一点的，就像下面的TabLayout。

3、TabLayout

TabLayout 实现了一个 Tab 标签页方式的布局系统，其下包含的内容只能显示一个。如下所示，默认显示第一个红色的布局。

<?xml version="1.0" encoding="UTF-8"?>
<Window size="640,480" caption="0,0,0,35">
  <TabLayout>
    <!--窗口内容-->
      <HorizontalLayout bkcolor="#FFD81E06" >
        <Button text="1" height="30" bkcolor="#FFD81E06" />
        <Button text="2" height="30" bkcolor="#FF1AFA29" />
        <Button text="3" height="30" bkcolor="#FF1296DB" />
      </HorizontalLayout>
        
      <HorizontalLayout bkcolor="#FF1AFA29" />
      <HorizontalLayout bkcolor="#FF1296DB" />
  </TabLayout>
</Window>

在这里插入图片描述
而想显示另外的两个布局，我们需要通过代码来控制。这里大家只需要有一个概念，后面我们模仿其他 Demo 的时候会用到这个布局。

4、TileLayout

TileLayout 是一个块级的布局，它下面的控件都会以块为单位，像麻将一样一排一排的组合，测试代码：

<Window size="640,480" caption="0,0,0,35">
  <HorizontalLayout>
    <TileLayout>
      <Button text="1" height="30" bkcolor="#FFD81E06" />
      <Button text="2" height="30" bkcolor="#FF1AFA29" />
      <Button text="3" height="30" bkcolor="#FF1296DB" />
      <Button text="1" height="30" bkcolor="#FFD81E06" />
      <Button text="2" height="30" bkcolor="#FF1AFA29" />
      <Button text="3" height="30" bkcolor="#FF1296DB" />
      <Button text="1" height="30" bkcolor="#FFD81E06" />
      <Button text="2" height="30" bkcolor="#FF1AFA29" />
      <Button text="3" height="30" bkcolor="#FF1296DB" />
      <Button text="1" height="30" bkcolor="#FFD81E06" />
      <Button text="2" height="30" bkcolor="#FF1AFA29" />
      <Button text="3" height="30" bkcolor="#FF1296DB" />
    </TileLayout>
    <!--窗口内容-->
      <HorizontalLayout bkcolor="#FFD81E06" >
        <Button text="1" height="30" bkcolor="#FFD81E06" />
        <Button text="2" height="30" bkcolor="#FF1AFA29" />
        <Button text="3" height="30" bkcolor="#FF1296DB" />
      </HorizontalLayout>
        
      <HorizontalLayout bkcolor="#FF1AFA29" />
      <HorizontalLayout bkcolor="#FF1296DB" />
  </HorizontalLayout>
</Window>

在这里插入图片描述
TileLayout 有两个比较关键的属性，itemsize 和 columns，两者不能同时使用。前者决定 TileLayout 包含的子控件以多大尺寸来排列，后者决定了TileLayout 有几列数据，我们先将 itemsize 指定为 “50,50”，就是告诉 TileLayout 让子控件以宽度和高度分别 50 的大小来进行排列。效果如下:

<?xml version="1.0" encoding="UTF-8"?>
<Window size="640,480" caption="0,0,0,35">
  <HorizontalLayout>
    <TileLayout itemsize="50,50">
      <Button text="1" height="30" bkcolor="#FFD81E06" />
      <Button text="2" height="30" bkcolor="#FF1AFA29" />
      <Button text="3" height="30" bkcolor="#FF1296DB" />
      <Button text="1" height="30" bkcolor="#FFD81E06" />
      <Button text="2" height="30" bkcolor="#FF1AFA29" />
      <Button text="3" height="30" bkcolor="#FF1296DB" />
      <Button text="1" height="30" bkcolor="#FFD81E06" />
      <Button text="2" height="30" bkcolor="#FF1AFA29" />
      <Button text="3" height="30" bkcolor="#FF1296DB" />
      <Button text="1" height="30" bkcolor="#FFD81E06" />
      <Button text="2" height="30" bkcolor="#FF1AFA29" />
      <Button text="3" height="30" bkcolor="#FF1296DB" />
    </TileLayout>
    <!--窗口内容-->
      <HorizontalLayout bkcolor="#FFD81E06" >
        <Button text="1" height="30" bkcolor="#FFD81E06" />
        <Button text="2" height="30" bkcolor="#FF1AFA29" />
        <Button text="3" height="30" bkcolor="#FF1296DB" />
      </HorizontalLayout>
        
      <HorizontalLayout bkcolor="#FF1AFA29" />
      <HorizontalLayout bkcolor="#FF1296DB" />
  </HorizontalLayout>
</Window>

在这里插入图片描述

如果我们指定了 columns 为 3，那么行只有 3 列数据。

<?xml version="1.0" encoding="UTF-8"?>
<Window size="640,480" caption="0,0,0,35">
  <HorizontalLayout>
    <TileLayout  columns="3" >
      <Button text="1" height="30" bkcolor="#FFD81E06" />
      <Button text="2" height="30" bkcolor="#FF1AFA29" />
      <Button text="3" height="30" bkcolor="#FF1296DB" />
      <Button text="1" height="30" bkcolor="#FFD81E06" />
      <Button text="2" height="30" bkcolor="#FF1AFA29" />
      <Button text="3" height="30" bkcolor="#FF1296DB" />
      <Button text="1" height="30" bkcolor="#FFD81E06" />
      <Button text="2" height="30" bkcolor="#FF1AFA29" />
      <Button text="3" height="30" bkcolor="#FF1296DB" />
      <Button text="1" height="30" bkcolor="#FFD81E06" />
      <Button text="2" height="30" bkcolor="#FF1AFA29" />
      <Button text="3" height="30" bkcolor="#FF1296DB" />
    </TileLayout>
    <!--窗口内容-->
      <!--<HorizontalLayout bkcolor="#FFD81E06" >
        <Button text="1" height="30" bkcolor="#FFD81E06" />
        <Button text="2" height="30" bkcolor="#FF1AFA29" />
        <Button text="3" height="30" bkcolor="#FF1296DB" />
      </HorizontalLayout>
        
      <HorizontalLayout bkcolor="#FF1AFA29" />
      <HorizontalLayout bkcolor="#FF1296DB" />-->
  </HorizontalLayout>
</Window>

在这里插入图片描述

5、Container

Container 本来是所有 Layout 的基类，之所以没提前介绍它主要是它使用的场景比较少，它下面的子空间都是默认扩充整个容器的，这也就会导致所有子控件重叠在一起，除非你想实现这种效果，否则可能真的用不到它。

6、ChildLayout

ChildLayout 我基本没有用过，看过官方的一些例子和 Redrain 介绍，它的功能类似于 include 一个 XML。主要功能就是有些 XML 文件因为规划不合理代码写的又臭又长，使用这个布局可以将外部的 XML 引入到本 XML 文件中，指定它的 xmlfile 属性就可以了。

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

GCC编译四步和LDS脚本

GCC编译四步和LDS脚本

GCC编译四步 1、预处理&#xff1a;宏定义替换之类的工作 2、编译非汇编&#xff1a;将源代码经过词法分析、语法分析、语义分析转为汇编代码的过程 3、汇编&#xff1a;将汇编代码转为具体二进制机器码的过程&#xff08;此时由于还没有进行链接&#xff0c;所以虽然是二进…
阅读更多...
Context Prior for Scene Segmentation--CVPR, 2020

Context Prior for Scene Segmentation--CVPR, 2020

Context Prior for Scene Segmentation–CVPR, 2020 文章目录 Context Prior for Scene Segmentation--CVPR, 2020一、背景介绍二、方法介绍1.A的生成2.Affinity Loss3.如何从 X X X获取P4.Y操作 一、背景介绍 问题&#xff1a;现阶段&#xff0c;不少语义分割方法所限于卷积结…
阅读更多...
快速部署合同管理模板：低代码实现高效率

快速部署合同管理模板：低代码实现高效率

在现代商业环境中&#xff0c;合同管理是企业日常运营中至关重要的一环。合同是企业与外部实体之间约定的法律文件&#xff0c;合够帮助企业有效管理合同的全生命周期&#xff0c;包括合同创建、审批、签署、执行和归档&#xff0c;以提高合同管理的效率和准确性。 随着企业数…
阅读更多...
软件测试面试题（大全）

软件测试面试题（大全）

1.B/S架构和C/S架构区别 B/S 只需要有操作系统和浏览器就行&#xff0c;可以实现跨平台&#xff0c;客户端零维护&#xff0c;维护成本低&#xff0c;但是个性化能力低&#xff0c;响应速度较慢 C/S响应速度快&#xff0c;安全性强&#xff0c;一般应用于局域网中&#xff0c;因…
阅读更多...
【操作系统】操作系统最全的总结，5万字干货

【操作系统】操作系统最全的总结，5万字干货

文章目录 前言搞清楚几个问题 一、认识操作系统二、计算机硬件三、进程和线程1、进程2、进程模型3、进程的创建4、进程的终止5、进程的层次结构6、UNIX 进程体系7、Windows 进程体系8、进程状态9、进程的实现10、线程11、线程的使用12、经典的线程模型13、线程系统调用14、POSI…
阅读更多...
Revit轴网问题：创建标高看不到原来的轴网和轴网转化

Revit轴网问题：创建标高看不到原来的轴网和轴网转化

一、Revit中创建的标高看不见原先的轴网怎么解决 (1)在Revit中绘制的轴网会默认超过最高标高一定距离&#xff0c;若新绘制的标高会在这距离之上&#xff0c;进入新绘制的“标高3”平面会发现看不到(1至6号轴网)。 (2)进入东立面&#xff0c;拖动轴网往上移动即可。 进入南、北…
阅读更多...
MySQL 读写分离代理（Mycat2）

MySQL 读写分离代理（Mycat2）

作者&#xff1a;田逸 作者亲自尝试过的开源MySQL读写分离工具有Amoeba、MySQL Proxy、Mycat等&#xff0c;经过仔细测试对比&#xff0c;在某个实际项目中选用Mycat作为MySQL数据库读写分离的代理工具。Mycat当前的最新版本为Mycat2&#xff0c;可从http://dl.mycat.org.cn/2…
阅读更多...
60、基于51单片机无线蓝牙温度上下限控制加热系统设计(程序+原理图+PCB源文件+Proteus仿真+参考论文+开题报告+任务书+元器件清单等)

60、基于51单片机无线蓝牙温度上下限控制加热系统设计(程序+原理图+PCB源文件+Proteus仿真+参考论文+开题报告+任务书+元器件清单等)

摘 要 随着人们生活水平的提高&#xff0c;对生活环境的要求也越来越高&#xff0c;家用电器越来越趋向于自动控制控制乃至于智能控制&#xff0c;针对目前家庭的实际需要&#xff0c;自动控制水温报警系统比较方便实用&#xff0c;本文就通过51系列单片机来实现一种家用自动控…
阅读更多...
VS2013 如何创建动态库和使用

VS2013 如何创建动态库和使用

创建动态库具体的步骤是&#xff1a;&#xff08;以DLL为例&#xff09; 1、创建一个win32项目 2、选择应用程序类型&#xff1a;DLL&#xff1b; 附加选项&#xff1a;导出符号&#xff0c;勾上&#xff1b; 3、点击完成&#xff0c;就会生成动态库 4、 由于是导出库&#xf…
阅读更多...
[细读经典]Megatron论文和代码详细分析(1)

[细读经典]Megatron论文和代码详细分析(1)

[细读经典]Megatron论文和代码详细分析(1) 导航&#xff1a; 迷途小书僮&#xff1a;[细读经典]Megatron论文和代码详细分析(2)102 赞同 41 评论文章正在上传…重新上传取消 前言 作为一款支持multi-node&#xff0c;multi-GPU的可以直接用来训练GPT3等世界上超大规模的自然…
阅读更多...
【C++学习】VScode配置C/C++开发环境

【C++学习】VScode配置C/C++开发环境

VSCode是一个高级编辑器&#xff0c;只能用来写C/C/Python/Java等代码&#xff0c;不能直接编译这些代码。所以&#xff0c;我们需要搭建编译和调试环境&#xff0c;本文以C/C为例&#xff0c;使用MinGW-w64&#xff0c;将其移植到Windows平台的一个gcc编译器。下面具体介绍如何…
阅读更多...
基于Java蜀都天香酒楼网站系统设计实现(源码+lw+部署文档+讲解等)

基于Java蜀都天香酒楼网站系统设计实现(源码+lw+部署文档+讲解等)

博主介绍&#xff1a; ✌全网粉丝30W,csdn特邀作者、博客专家、CSDN新星计划导师、java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战 ✌ &#x1f345; 文末获取源码联系 &#x1f345; &#x1f447;&#x1f3fb; 精…
阅读更多...
第二章_基于redis实现分布式锁

第二章_基于redis实现分布式锁

基本实现 借助于redis中的命令setnx(key, value)&#xff0c;key不存在就新增&#xff0c;存在就什么都不做。同时有多个客户端发送setnx命令&#xff0c;只有一个客户端可以成功&#xff0c;返回1&#xff08;true&#xff09;&#xff1b;其他的客户端返回0&#xff08;false…
阅读更多...
微信小程序WE分析----事件分析

微信小程序WE分析----事件分析

目录 web分析-小程序 事件分析概述 1.新增事件管理 事件参数说明 (1) 填写事件配置 (2)小程序添加上报代码&#xff1a;将上报代码添加到小程序中 (3)测试事件数据上报&#xff1a;测试事件上报的数据是否正确。 属性管理 字典管理 新增事件分析 创建事件分析 添加事件指…
阅读更多...
Java+Swing+mysql员工工资管理系统2.0

Java+Swing+mysql员工工资管理系统2.0

JavaSwingmysql员工工资管理系统2.0 一、系统介绍二、功能展示1.用户登陆2.主页3.员工工资查询4.员工工资添加5.员工工资修改6.员工工资删除 三、系统实现1.salary.java 四、其它系统五、获取源码 一、系统介绍 该系统实现了简单的增删查改、用户登陆、员工工资查询、员工工资…
阅读更多...
美联储缩表意味着什么？

美联储缩表意味着什么？

What does the Feds balance sheet reduction mean? 这里的表是资产负债表&#xff0c;Balance sheet. 美联储&#xff08;Federal Reserve&#xff09;作为全球影响力最大的央行&#xff0c;其在货币政策上做出的一些调整&#xff0c;可能就会引起全球经济和金融市场动荡&am…
阅读更多...
项目测试排期的正确方法是什么？

项目测试排期的正确方法是什么？

测试排期是项目排期里面的一部分&#xff0c;所以了解项目排期对整体产品的全貌会有一个宏观的认知&#xff0c;甘特图能很好的体现项目排期&#xff0c;里面包含了参与角色和每个角色对应的排期。项目参与者和项目责任人都可以清晰的看到项目当前进展和项目耗时等。 甘特图可…
阅读更多...
智能监控系统：在线培训考试系统的保障

智能监控系统：在线培训考试系统的保障

随着互联网技术的不断发展&#xff0c;越来越多的培训机构和教育机构采用在线学习和考试的方式进行教学。然而&#xff0c;考试中的作弊问题也随之产生&#xff0c;给教育质量和学术诚信带来了挑战。为了解决这一问题&#xff0c;许多在线培训考试系统引入了智能监控系统。 智…
阅读更多...
邓铎：探索书法艺术的新境界

邓铎：探索书法艺术的新境界

中国书画院院士邓铎&#xff0c;是一位在书法艺术领域拥有深刻理解和丰富实践经验的老者。他的作品随心所欲&#xff0c;个性鲜明&#xff0c;具备独特的审美品味和艺术手法&#xff0c;更有重要的理论创新&#xff0c;让书法艺术大放光彩。 邓铎的书法作品在形式上追求“形似象…
阅读更多...
【无标题】面试常考算法（3）：二叉树遍历（创建、遍历、销毁）

【无标题】面试常考算法（3）：二叉树遍历（创建、遍历、销毁）

这部分不够熟悉的话&#xff0c;面试直接递归就行。不过实际中虽然递归在某些情况下可以提供简洁和优雅的解决方案&#xff0c;但可能占用大量的内存空间和导致额外时间开销&#xff0c;所以还是尽量使用非递归。因为每次递归调用时&#xff0c;函数的局部变量和参数都需要在栈…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023