Qt之界面实现技巧
总结一下,在开发Qt的过程中的一些技巧!可遇而不可求。。。
一、主界面
1、无边框
setWindowFlags(Qt::FramelessWindowHint)
2、界面始终位于顶部位置
setWindowFlags(Qt::WindowStaysOnTopHint)
3、任务栏图标点击时进行显示/不显示切换
setWindowFlags(Qt::WindowMinimizeButtonHint)
4、隐藏任务栏显示
setWindowFlags(Qt::Tool | Qt::X11BypassWindowManagerHint)
5、关闭按钮实现的功能
hide(); //进行界面隐藏,但是显示托盘,可通过点击托盘实现界面的重新显示
quit(); //退出系统
6、绘制背景图片并且实现圆角效果
void LoginDialog::paintEvent(QPaintEvent *)
{
QPainter painter(this);
QBrush brush;
brush.setTextureImage(QImage(background_image)); //背景图片
painter.setBrush(brush);
painter.setPen(Qt::black); //边框色
painter.drawRoundedRect(this->rect(), 5, 5); //圆角5像素
}
7、设置应用程序的字体
QFont font("Courier", 10, QFont::Normal, false);
QApplication::setFont(font);
8、设置组件字体
字体风格,包括类型、大小、是否加粗、是否斜体等!
也可以使用:setStyleSheet("text-align:center; font-size:18px; font-weight:bold; font-style:Courier; color:white; ");
setAlignment(Qt::AlignCenter); //设置对齐方式
二、全屏显示与还原
关于这个问题,当做一个大的标题来讨论,因为比起其它小技巧要稍微复杂一些!
全屏显示:
1、遮挡任务栏:
showFullScreen()、showMaximized()这两个都可以!
2、不遮挡任务栏:
void MainWidget::showMaximize()
{
//若已经最大化
if(is_max)
{
//恢复界面位置,并设置按钮图标为最大化图标,提示“最大化”
this->setGeometry(location);
max_button->setIcon(QIcon("maxbtn"));
max_button->setToolTip(tr("max"));
}
else
{
//设定当前界面的位置,还原时使用
location = this->geometry();
//获取桌面位置,设置为最大化,并设置按钮图标为还原图标,提示“还原”
QDesktopWidget *desk = QApplication::desktop();
this->setGeometry(desk->availableGeometry());
max_button->setIcon(QIcon("restorbtn"));
max_button->setToolTip(tr("restor"));
}
is_max = !is_max;
}
注意:窗口既然可以最大化,当然还要进行还原,is_max为一个bool值变量,表示窗口是否最大化,初始值为false。location为桌面的位置,每次最大化开始先记录当前的位置,等待还原时候使用。
三、QSS样式
1、QComboBox:
combo_box->setStyleSheet("QComboBox{border:1px solid gray;}"
"QComboBox QAbstractItemView::item{height:25px;}"
"QComboBox::down-arrow{image:url(:/icon/arrowdown);}"
"QComboBox::drop-down{border:0px;}");
combo_box->setView(new QListView());
2、QSpinBox:
spin_box->setStyleSheet("QSpinBox{border:1px solid gray;}"
"QSpinBox::up-button{image:url(:/icon/arrow_up);}"
"QSpinBox::down-button{image:url(:/icon/arrow_down);}");
3、QMenu:
QMenu{
padding:5px;
background:white;
border:1px solid gray;
}
QMenu::item{
padding:0px 40px 0px 30px;
height:25px;
}
QMenu::item:selected:enabled{
background:lightgray;
color:white;
}
QMenu::item:selected:!enabled{
background:transparent;
}
QMenu::separator{
height:1px;
background:lightgray;
margin:5px 0px 5px 0px;
}
4、QSlider:
QSlider::groove:horizontal{
border:0px;
height:4px;
}
QSlider::sub-page:horizontal{
background:white;
}
QSlider::add-page:horizontal{
background:lightgray;
}
QSlider::handle:horizontal{
background:white;
width:10px;
border-radius:5px;
margin:-3px 0px -3px 0px;
}
5、QCheckBox:
QCheckBox{
spacing: 2px;
}
QCheckBox::indicator {
width: 20px;
height: 20px;
}
QCheckBox::indicator:unchecked {
image: url(:/login/checkbox);
}
QCheckBox::indicator:unchecked:hover {
image: url(:/login/checkbox_hover);
}
QCheckBox::indicator:unchecked:pressed {
image: url(:/login/checkbox_press);
}
QCheckBox::indicator:checked {
image: url(:/login/checkbox_selected);
}
QCheckBox::indicator:checked:hover {
image: url(:/login/checkbox_selected_hover);
}
QCheckBox::indicator:checked:pressed {
image: url(:/login/checkbox_selected_press);
}
6、QScrollBar:
QScrollBar{
background:transparent;
width: 10px;
}
QScrollBar::handle{
background:rgb(180, 180, 180, 150);
}
QScrollBar::handle:hover{
background:rgb(150, 150, 150, 180);
}
QScrollBar::add-page{
background:transparent;
}
QScrollBar::sub-page{
background:transparent;
}
QScrollBar::sub-line{
background:transparent;
}
QScrollBar::add-line{
background:transparent;
}
7、QStatusBar
QStatusBar::item{
border: 0px;
}
//不存在分隔线
一般也可以使用QPalette
QPalette palette;
palette.setBrush(QPalette::WindowText, QBrush(Qt::white));
check_box->setPalette(palette);
check_box->setStyleSheet("color:white");
调色板类QPalette提供了颜色角色(color roles)的概念,指当前界面中颜色的职责,通过枚举变量
QPalette::ColorRole来定义,比较常用的角色有:
QPalette::Window 通常指窗口部件背景色
QPalette::WindowText 通常指窗口部件的前景色
QPalette::Base 指文本的背景色(QTextEdit、QLineEdit等)
QPalette::Text 与QPalette::Base一块使用,指文本输入窗口部件前景色
QPalette::Button 指按钮窗口部件的背景色
QPalette::ButtonText 指按钮窗口部件的前景色
以上是遇到的常用但有资料较少的组件的样式,注重细节才能做出好的产品!
有待完善。。。