VS code 框架UI仿制

    技术2022-07-10  119

    介绍:

    1.模仿了VS code的配色,控件布局,风格

    2.右侧状态栏按钮可以切换子页面

    3.上方标题栏采用自定义的方法,实现了点击状态栏拖拽,还有最小化,中等显示,最大化显示,关闭的功能.

    4.可以拖动右下角从而改变整个窗口的大小和内部控件的大小和位置

    效果预览:

    VScode:成果的总窗口: 功能:

    难点:

    1.左侧状态栏的持续性改变pressed状态.这个在之前的文章说过.

    2.上方自定义标题栏

    3.整个页面布局(怎么让窗口内的控件按照这种方式排列)

    实现方法,细节概述:

    问题主要是布局的问题,不管是你的控件是layout还是frame还是toolbar还是statusbar还是自定义控件,目标就是让它紧靠在窗口上方,再让状态栏靠在它的下面,这就是主要问题.整个过程中,我试过以下几种方法:**

    1.纯代码方式(不用ui),用两个toolbar实现; 2.纯代码方式(不用ui),用layout实现; 3.纯文本方式(不用代码和ui界面),直接去修改ui界面那个xml文件,修改元素的属性和包含关系 这三种方式都失败了,它们需要你对相关控件的布局安排方式熟练掌握(sizePolicy,layout,strech),这块很乱,还是ui设计好用,要考虑的东西少,学习成本少,下面说一下解决ui途径的关键问题:

    ui问题1.往主页面拖标题栏的时候,没法紧紧挨在一起: 解决这个问题有两个关键点: 1.设置centralWidget的布局为verticallayout, 2.将centralWidget的margins和spaceing的相关属性都设置为0 详细讲解: 这是没有设置centralWidget的时候右侧对象树的显示: 这种情况是肯定没办法的,你可以随便先拖进去一个控件,然后在右侧的对象树点击选中centralWidget,然后再点击右键设置布局; 之后你就可在下方的属性栏设置layout的属性了 ui问题2:使用布局QHBoxLayout和QVBoxLayout无法设置最大宽度,按照合理大小布局很麻烦: 这里想说的是善用QFrame,我发现QFrame是个在ui中非常好用的控件,好处如下: 1.有Maxi/Mini mumSize的属性,控制大小很方便 2.QFrame可以用QSS设置样式,比layout也好很多; 综上:在ui设计的时候把QFrame当父窗口使用,解和layout,非常好用.

    至于如何拖动标题栏,如何实现最大化按钮,这网上有很多文章了,这里其实主要讲ui设计的技巧和方法.

    赞过5个代码和图标资源

    Processed: 0.009, SQL: 9