QT控件设计

原创已于 2024-09-27 16:15:23 修改

· 853 阅读

13 ·

版权

文章标签：

#qt #开发语言

于 2024-09-26 10:59:42 首次发布

一、认识基础控件

①Push Button（按钮）

从左边工具栏长按所需的控件拖入右边widget窗口

②Label（标签）

可以在label中输入文字，添加图片等

二、控件的外观设计

右键单击控件，点击改变样式表

1、给控件添加背景图片

①background-image：添加的图片不能自适应控件大小（若图片过大，则显示部分；若图片太小，则显示多张图片）

②boder-image：添加的图片能自适应控件大小

③image：图片在控件中心（qpushbutton不显示，qlabel显示）

2、给控件背景色实现渐变

①color：文字颜色

②background-color：控件背景颜色

③alternate-background-color：交替背景色，用于QAbstractItemView的子类（QColumnView、QHeaderView、QListView、QTableView、QTreeView）

要用到这个功能，需先启用交替背景色属性，否则设置无效

④border-color：控件边缘颜色

border-top-color：控件顶部颜色

border-right-color：控件右侧颜色

border-bottom-color：控件底部颜色

border-left-color：控件左侧颜色

ui->tableWidget->setAlternatingRowColors(true);

⑤gridline-color：表格内框颜色

⑥selection-color：选中表格文字颜色

⑦selection-background-color：选中表格背景色

3、给控件背景添加颜色

①color：文字颜色

②background-color：控件背景颜色

③alternate-background-color：交替背景色，用于QAbstractItemView的子类（QColumnView、QHeaderView、QListView、QTableView、QTreeView）

要用到这个功能，需先启用交替背景色属性，否则设置无效

④border-color：控件边缘颜色

border-top-color：控件顶部颜色

border-right-color：控件右侧颜色

border-bottom-color：控件底部颜色

border-left-color：控件左侧颜色

ui->tableWidget->setAlternatingRowColors(true);

⑤gridline-color：表格内框颜色

⑥selection-color：选中表格文字颜色

⑦selection-background-color：选中表格背景色

4、给控件中文字设计字体

5、控件特殊设计

eg：QPushButton{

                border：solid（实线）
                border-color:(边框颜色)
                border-width:(边框宽度)
                border-radius:(边框圆滑程度)

                background-color：（控件背景颜色）；
                background-image:(添加背景图片)
                background-origin:border(图片从外边缘开始定位)
                                  padding(图片从内边缘定位)
                                  content(图片从内容开始定位)
                background-repeat:repeat(图片x轴，y轴都铺满)
                                  repeat-x(图片x轴铺满)
                                  repeat-y(图片y轴铺满)
                                  no-repeat(图片正常大小)
                background-position:top(图片出现在顶部)
                padding-top:(图片离顶部的距离)

                color：(控件中文字的颜色)；
                font：(文字字体)
                text-align:bottom(文字的位置)

QPushButton:pressed{控件按下后的设计}
QPushButton:checked{控件选择后的设计}
QPushButton:disabled{控件失效后的设计}

}

三、控件的功能设计

1、改变控件名称（有一些控件双击也可改变控件名）

2、控件变型（在布局确定后，修改控件功能比较方便，但只能变型为同一类的控件）

3、提升为

提升的基类名称                      提升类的名称（自己写的文件名）

4、转到槽（转到槽函数）

每个控件的槽函数不一样

四、控件设置

1、控件的形状

①控件的坐标和大小

②控件的 X 坐标

③控件的 Y 坐标

④控件的宽度

⑤控件的高度

2、控件的尺寸策略

选择多种策略

①Preferred:随机大小

②Fixed:固定

③Minimum:最小

④Maximum:最大

⑤MinimumExpanding:最小但自适应大小

⑥Expanding:自适应大小

⑦Ignored:没有空间时首先忽视大小

五、各种控件和布局

1、布局

①Vertical Layout：垂直布局

②Horizontal Layout：水平布局

③Grid Layout：栅格布局

④Form Layout：表格布局

2、按钮

Tool Button：工具按钮，相当于工具栏的按钮，可以实现子菜单的形式

可设置工具按钮的箭头方向

Radio Button：单选按钮（可使用setchecked(true)实现默认选择）

CheckBox：多选按钮

Command Link Button：创建命令，类似于超链接按钮

Dialog Button Box：选择按钮

3、输入框

Combo Box：下拉框

QComboBox:hover{鼠标悬浮状态}
QComboBox:down-arrow{下拉按钮设计}
QComboBox QAbstractltemView{outline:宽度 颜色；（表格线）
                            min-height:最小宽度；
                            selection-background-color：(选中后的颜色)


}

Font Combo Box：字体下拉框（选择字体）