zoukankan      html  css  js  c++  java
  • 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='SysBtnMinNormal.bmp' " hotimage=" file='SysBtnMinFocus.bmp' " pushedimage=" file='SysBtnMinFocus.bmp' "/>
                    <Button name="maxbtn"   tooltip="最大化" float="true" pos="22,5,44,24" width="23" normalimage=" file='SysBtnMaxNormal.bmp' " hotimage=" file='SysBtnMaxFocus.bmp' " pushedimage=" file='SysBtnMaxFocus.bmp' " />
                    <Button name="restorebtn" visible="false" tooltip="还原" float="true" pos="22,5,44,24" width="23" normalimage=" file='SysBtnStoreNormal.bmp' " hotimage=" file='SysBtnStoreFocus.bmp' " pushedimage=" file='SysBtnStoreFocus.bmp' " />
                    <Button name="closebtn" tooltip="关闭"   float="true" pos="44,5,74,24" width="28" normalimage=" file='SysBtnCloseNormal.bmp' " hotimage=" file='SysBtnCloseFocus.bmp' " pushedimage=" file='SysBtnCloseFocus.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='SysBtnCloseNormal.bmp' " hotimage=" file='SysBtnCloseFocus.bmp' " pushedimage=" file='SysBtnCloseFocus.bmp' "/>

    其中:

    name="closebtn"    唯一标识按钮,其他按钮的name不能与其重复
    tooltip="关闭"         就是那个提示条的文字
    float="true"            代表按钮的位置是绝对定位,其位置由pos属性指定
    pos="44,5,74,24"    代表按钮的位置矩阵,分别为矩阵左、上、右、下四个点
    width="28"             代表按钮图片显示的宽度(这个可以不填,但是由于按钮图片没有做好,如果不填的话,图片会被拉伸有点失真)
    normalimage           代表正常状态下按钮显示的图片路径
    hotimage                代表鼠标移上去时,按钮显示的图片路径     
    pushedimage          代表鼠标点击按钮时,按钮显示的图片路径     
            
    下一节将会介绍HorizontalLayout、VerticalLayout。
  • 相关阅读:
    django实战-XX学院选课系统
    django学习记录
    WEB前端--CSS样式优先级
    python中__str__和__repr__的区别
    转载--SqlAlchemy ORM 学习
    转载---Python模块学习optparse 处理命令行参数
    转载--Python之路,进程、线程、协程篇(原文地址:http://www.cnblogs.com/alex3714/articles/5230609.html)
    python学习---模拟人生
    python学习---购物商场与ATM
    解决"回调地狱"的发展过程
  • 原文地址:https://www.cnblogs.com/hpze2000/p/3372427.html
Copyright © 2011-2022 走看看