天天看点

Qt 圆角按钮,面版自动布局

一、前言

  在部分界面开发中,有时需要动态添加控件或按钮到面板中,在不需要时又需要删除该控件,故模仿视频开发中的设置屏蔽词,通过自己绘制的按钮与排布面板控件实现。

  实现效果如下:

  

  说明:

  1、输入框可设置背景色、圆角角度、颜色高亮等

  2、采用圆角输入框输入字符,回车或点击“添加”可触发信号,获取输入字符串

  3、字符以圆角按钮控件显示,点击“X”可删除该按钮

  4、面版自动排布,删除中间的圆角按钮,后续的会往前移

  5、添加的屏蔽词都放在后面,已有屏蔽词会提示已存在,删除屏蔽词后可再次添加

二、实现过程

  1、运行环境Qt5.5 VS2013

  2、制作圆角按钮

  1)继承QWidget,封装KeyButton控件

Qt 圆角按钮,面版自动布局
Qt 圆角按钮,面版自动布局

圆角按钮

  2)重写paintEvent事件,绘制按钮圆角按钮,包括字符

Qt 圆角按钮,面版自动布局
Qt 圆角按钮,面版自动布局

绘制事件

  3)继承resizeEvent事件,计算“X”的绘制位置

Qt 圆角按钮,面版自动布局
Qt 圆角按钮,面版自动布局

绘制位置

  4)继承mouseReleaseEvent事件,用户点击“X”后触发删除信号

Qt 圆角按钮,面版自动布局
Qt 圆角按钮,面版自动布局

信号触发

  3、面板自动布局

  1)继承QWidget,自定义PanelWidget控件

Qt 圆角按钮,面版自动布局
Qt 圆角按钮,面版自动布局

面版类

  2)考虑增加的控件可能比较多,采用QScrollArea控件(存储不下时可左右拉动显示)

Qt 圆角按钮,面版自动布局
Qt 圆角按钮,面版自动布局

创建面板

  3)通过setWidget和setWidgets,更新面板内的控件

Qt 圆角按钮,面版自动布局
Qt 圆角按钮,面版自动布局

面板更新

  4)更新面版内容后,通过QGridLayout更新控件的布局

Qt 圆角按钮,面版自动布局
Qt 圆角按钮,面版自动布局

面板布局

继续阅读