3、DuiLib了解xml的使用和布局

news2024/9/20 19:45:02

文章目录

  • 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/660081.html

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

相关文章

模型分享---登陆注册界面

模型分享---登陆注册界面

目录 模型---登陆注册界面 验证码的生成&#xff1a; CheckCodeUtil.java&#xff1a; Servlet: 普通用户登陆&#xff1a; css: jsp: 运行结果&#xff1a; 管理员登陆&#xff1a; 运行结果&#xff1a; 注册&#xff1a; 普通用户&#xff1a; css: jsp: 运行…
阅读更多...
FreeRTOS实时操作系统（三）任务挂起与恢复

FreeRTOS实时操作系统（三）任务挂起与恢复

系列文章目录 FreeRTOS实时操作系统&#xff08;一&#xff09;RTOS的基本概念 FreeRTOS实时操作系统&#xff08;二&#xff09;任务创建与任务删除&#xff08;HAL库&#xff09; 文章目录 系列文章目录前言任务挂起与恢复普通挂起恢复实例中断恢复实例 前言 继续跟着正点…
阅读更多...
记录--封装一个通过js调用的全局vue组件

记录--封装一个通过js调用的全局vue组件

这里给大家分享我在网上总结出来的一些知识&#xff0c;希望对大家有所帮助 前言 在使用vue项目编写的时候&#xff0c;不可避免的会碰到需要时js api来调用组件进行显示的情况 例如饿了么element ui 的 Notification 通知、Message 消息提示等组件 虽然已经提供了&#xff0c;…
阅读更多...
postman和jmete接口测试的用法与区别

postman和jmete接口测试的用法与区别

目录 前言 接口测试的目的 接口测试怎么测&#xff1a; 1.创建接口用例集&#xff08;没区别&#xff09; 2.步骤的实现&#xff08;有区别&#xff09; 3数据用例的实现 4断言的实现 5执行 6其他 总结&#xff1a; 前言 前阶段做了一个小调查&#xff0c;发现软件测…
阅读更多...
DETR 系列有了新发现？DETRs with Hybrid Matching 论文阅读笔记

DETR 系列有了新发现？DETRs with Hybrid Matching 论文阅读笔记

DETR 系列有了新发现&#xff1f;DETRs with Hybrid Matching 论文阅读笔记 一、Abstract二、引言三、相关工作目标检测中的 DETR其它视觉任务中的 DETR标签赋值 四、方法4.1 基础知识通用的 DETR 框架通用的可变形 Deformable-DETR 框架 4.2 混合匹配4.2.1 混合分支计划一对一…
阅读更多...
client-go的Indexer三部曲之三：源码阅读

client-go的Indexer三部曲之三：源码阅读

欢迎访问我的GitHub 这里分类和汇总了欣宸的全部原创(含配套源码)&#xff1a;https://github.com/zq2599/blog_demos 《client-go的Indexer三部曲》全部链接 基本功能性能测试源码阅读 本篇概览 本文是《client-go的Indexer三部曲》系列的终篇&#xff0c;主要任务是阅读和…
阅读更多...
Vue全家桶（四）：Vue Router 路由

Vue全家桶（四）：Vue Router 路由

目录 Vue Router1. 相关理解1.1 Vue Router的理解1.2 对SPA应用的理解1.3 路由的理解 2. 基本路由2.1 vue-router使用步骤2.2 几个注意点2.3 触发路由2.4 嵌套路由2.5 路由传递参数方式2.5.1 params 方式2.5.2 Query的方式 2.6 命名路由2.7 路由的props配置2.8 路由跳转的repla…
阅读更多...
H3C-HCL模拟器-VLAN划分实验

H3C-HCL模拟器-VLAN划分实验

一、实验拓扑结构图&#xff1a; 二、实验需求&#xff1a; 1. 按图示为PC配置IP地址 2. SW1和SW2上分别创建vlan10和vlan20&#xff0c;要求PC3和PC5属于vlan10&#xff0c;PC4和PV6属于vlan20 3. SW1和SW2相连的接口配置为trunk类型&#xff0c;允许vlan10和vlan20通过 4…
阅读更多...
AI工程化的“基座能力”？—— 聊聊GPT Function Calling

AI工程化的“基座能力”？—— 聊聊GPT Function Calling

点击↑上方↑蓝色“编了个程”关注我~ 这是Yasin的第 94 篇原创文章 最近AI大模型火出了圈&#xff0c;很多人惊叹它的智能程度。但大多数人都以为它的能力主要在“聊天”、“写文案”这方面。然而实际它能做的远远更多。 Chat GPT是当今世界上最智能的模型&#xff0c;它前段时…
阅读更多...
【Linux】—— 详解进程PCB和进程状态

【Linux】—— 详解进程PCB和进程状态

前言&#xff1a; 在上篇我们已经对有关体系结构的基本知识进行了详细的介绍&#xff0c;接下来我们将进入网络编程的第一个大块—— 有关进程相关的知识&#xff01;&#xff01;&#xff01; 目录 前言 &#xff08;一&#xff09; 基本概念 1、描述进程-PCB 2、查看进程…
阅读更多...
【人工智能】— 逻辑回归分类、对数几率、决策边界、似然估计、梯度下降

【人工智能】— 逻辑回归分类、对数几率、决策边界、似然估计、梯度下降

【人工智能】— 逻辑回归分类、对数几率、决策边界、似然估计、梯度下降 逻辑回归分类Logistic Regression ClassificationLogistic Regression: Log OddsLogistic Regression: Decision BoundaryLikelihood under the Logistic ModelTraining the Logistic ModelGradient Desc…
阅读更多...
使用vue脚手架搭建前端工程（附：搭配ElementUI来快速开发）

使用vue脚手架搭建前端工程（附：搭配ElementUI来快速开发）

目录 一、搭建过程 1. 全局安装webpack&#xff08;打包工具&#xff09; 2. 全局安装vue脚手架 3. 初始化vue项目 4. vue项目目录的简单介绍 二、执行流程分析 三、自己造一个组件案例 四、ElementUI的使用 1. 环境的引入 2. 一个简单使用 3. 使用它来快速搭建后台管…
阅读更多...
AI绘画Stable diffusion保姆级教程，看这一篇就够了「安装-配置-画图」

AI绘画Stable diffusion保姆级教程，看这一篇就够了「安装-配置-画图」

随着chat gpt爆火之后&#xff0c;越来越多的人开始关注人工智能&#xff0c;人工智能相关的其他应用如AI绘画&#xff0c;也再次得到人们的关注。AI绘画的确很上头&#xff0c;最近几天小编也研究一下&#xff0c;这里把研究的过程以及中间遇到的问题整理一下&#xff0c;我这…
阅读更多...
吴恩达471机器学习入门课程3第1周——异常检测

吴恩达471机器学习入门课程3第1周——异常检测

异常检测 1 导包2 - 异常检测2.1 问题陈述2.2 数据集可视化您的数据 2.3 高斯分布2.2.1 估计高斯分布的参数2.2.2 选择阈值 ϵ \epsilon ϵ2.4 高维数据集异常检测 实现异常情况检测算法&#xff0c;并应用它来检测网络上的故障服务器。 1 导包 import numpy as np import ma…
阅读更多...
管理类联考——英语二——知识篇——写作题目说明——B节

管理类联考——英语二——知识篇——写作题目说明——B节

MBA&#xff0c;MPA&#xff0c;MPAcc管理类联考英语写作部分由A&#xff0c;B两节组成&#xff0c;主要考查考生的书面表达能力。共2题&#xff0c;25分。A节要求考生根据所给情景写出约100词(标点符号不计算在内)的应用文&#xff0c;包括私人和公务信函、通知、备忘录等。共…
阅读更多...
【ESP8266 （12F）】硬件参数 以及 固件烧录

【ESP8266 （12F）】硬件参数 以及 固件烧录

本文资料及工具地址&#xff1a;https://github.com/CQUPTLei/ESP8266 一、基本关系1.1 ESP8266 芯片 和 ESP 12F 模组1.2 乐鑫科技和安信可 二、ESP 8266开发板2.1 ESP 12F 产品规格2.2 ESP8266 开发板 三、固件与固件下载3.1 什么是固件3.2 固件和用户程序3.2 如何下载固件3.…
阅读更多...
Linux下配置lunavim

Linux下配置lunavim

前言 在lunavim官网中提供了安装脚本&#xff0c;一件安装即可&#xff0c;但是经常因为网络不稳定而导致安装失败。这里提供在Linux下进行git加速的几种方法&#xff0c;可以尝试下。如果问题没有解决&#xff0c;也不要担心&#xff0c;我们还提供了两种平替方法进行luanvim的…
阅读更多...
linux实验五sed和awk

linux实验五sed和awk

按要求写出正则表达式 显示/etc/passwd中以bash结尾的行;显示/var/log/secure文件中包含“Failed”或“FAILED”的行查找/etc/man_db.conf中含有“以m开头&#xff0c;并以n结尾的单词”模式的行&#xff1b;显示/etc/man_db.conf中&#xff0c;包含Linux绝对路径的行&#xff…
阅读更多...
基础巩固（六）自定义View

基础巩固（六）自定义View

文章目录 View绘制流程MeasureLayoutDraw 自定义View的实现的步骤步骤1&#xff1a;实现Measure、Layout、Draw流程自定义 MeasureViewGroup.LayoutParamsMeasureSpec 自定义Layout 自定义属性 绘制工具类Paint具体使用 PathCanvas View绘制流程 在绘制前&#xff0c;系统会有一…
阅读更多...
Python恶搞代码

Python恶搞代码

文章目录 前言Tkinter界面设计Threading多线程恶搞代码 尾声 前言 快来领取python无限弹窗恶搞代码吧&#xff01;每天写一些有趣的小程序&#xff0c;带你成为一个浪漫的程序员&#xff01; Tkinter界面设计 1. 创建一个简单的界面 Tkinter 是 Python 标准库中的一个 GUI&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023