[Qt] 界面美化 [2013-06-17更新]

- 经验总结

1. 可用对话框（QDialog）模拟类似Android中toast的效果。

- 设置程序界面风格

在main函数中

QApplication::setStyle("windows");

QApplication::setStyle("windowsxp");

QApplication::setStyle("motif");

QApplication::setStyle("cde");

QApplication::setStyle("macintosh");

QApplication::setStyle("plastique");

风格可以是 "windows", "motif", "cde", "plastique", "windowsxp", "macintosh"

- 设置窗口样式

setWindowFlags(flags)

flags:

Qt::WindowContextHelpButtonHint

Qt::FramelessWindowHint // 去掉标题栏

Qt::CustomizeWindowHint

Qt::WindowTitleHint // 只有标题栏，没有窗口控制按钮

Qt::WindowSystemMenuHint

Qt::WindowCloseButtonHint

Qt::WindowMaximizeButtonHint

Qt::WindowMinimizeButtonHint

Qt::SubWindow

Qt::Desktop

Qt::SplashScreen

Qt::ToolTip

Qt::Tool

// 没有标题栏图标、没有任何按钮，只有标题

Qt::CustomizeWindowHint | Qt::WindowTitleHint

用法一：

clientMainWindow::clientMainWindow(QWidget *parent) :

QMainWindow(parent, Qt::WindowCloseButtonHint)

{

...

}

用法二：

clientMainWindow::clientMainWindow(QWidget *parent) :

QMainWindow(parent )

{

...

this->setWindowFlags(Qt::WindowCloseButtonHint);

...

}

- 窗口在屏幕居中显示

#include <QDesktopWidget>

方法一：

w.move((QApplication::desktop()->width() - w.width()) / 2,

(QApplication::desktop()->height() - w.height()) / 2);

方法二：

QDesktopWidget *desktop = QApplication::desktop(); // = qApp->desktop() 也可以

w.move((desktop->width() - this->width()) / 2, (desktop->height() - this->height()) / 2);

注：w 为Qt窗口对象（如QMainWindow、QDialog等）

- 修改UI程序在桌面的起始位置

在程序中加入如下代码即可：

w.move(x, y); // 屏幕左上角为(0, 0)，x、y为相对于(0, 0)的偏移值

// w为Qt窗口对象（可以是QMainWindow、QDialog等）

- 去掉标题栏左侧的图标

1. 创建透明图标

使用PhotoShop创建一个透明的图标

参考设置：
大小：1 X 1 px

名称：logo.png

2. 添加图标到工程

1) 在工程目录下创建“res”目录，将logo.png拷贝到此目录

2) 在工程中添加一个资源文件，命名为“icon.qrc”

3) 在icon.qrc中添加一个前缀（此处为“res”），在该前缀下添加一个文件，把logo.png添加进来

4) 为logo.png设置别名（此处把别名设为与文件名相同，即“logo.png”）

注意：在工程中调用时使用的是别名。

3. 设置窗口图标

QWidget.setWindowIcon(QIcon(":res/logo.png"));

注意：“res”为资源文件（.qrc）中的前缀，“logo.png”为logo.png的别名，不要遗漏了前面的“:”

4. 测试

完成上述操作后，重新构建工程并执行即可看到效果

- 鼠标指针

1. 隐藏指针

#include <QWSServer>

...

QWSServer::setCursorVisible(FALSE); // 添加在MainWindow的构造函数中

2. 设置指针样式

QApplication::setOverrideCursor(Qt::WaitCursor); // 设置指针为等待状态（漏斗状）

QApplication::restoreOverrideCursor(); // 还原鼠标指针为默认

- 修改控件样式



1. QLabel
ui->label->setText("<b><font color=blue size=30>test!</font></b>"); // 修改QLabel文字样式
ui->label->setPixmap(QPixmap(":res/logo_png")); // 显示图片
ui->label->setScaledContents(true); // 图片适应label大小（在显示图片前调用）
ui->label->setWordWrap(true); // 自动换行（生效前提：内容包含中文或间隔符，如空格）

2. QLineEdit

// 无边框，背景透明

ui->lineEdit->setStyleSheet("QLineEdit{background-color: rgba(0,0,0,0);border-width:0;border-style:outset}");

3. QPushButton
ui->pb->setStyleSheet("background:red"); // 改变QPushButton颜色

* 其他可用的颜色还有 yellow、blue、green、black、white等。

4. QDockWidget

QWidget* titleWidget = new QWidget(this);

ui->dockWidget->setTitleBarWidget(titleWidget); // 隐藏标题栏

! 清除所有样式

ui->pb->setStyleSheet("");
or
ui->pb->styleSheet().clear();

! 去掉控件焦点
widget->setFocusPolicy(Qt::NoFocus);

- 半透明窗体

1. ***一张半透明背景图片（PNG格式，调节适当的透明度）

2. 加入如下代码：

this->move(0, 0); // 定位窗体显示位置

this->setWindowFlags(Qt::FramelessWindowHint); // 必须设置为这种窗体风格

this->setAttribute(Qt::WA_TranslucentBackground); // 设置“透明背景”属性

注意：若使用上述方法不能将窗体设置为Qt::FramelessWindowHint风格，则可尝试下述方式：

BNumPad::BNumPad(QWidget *parent) :

QDialog(parent, Qt::FramelessWindowHint),

ui(new Ui::BNumPad)

{

...

}

- 在文本框中显示图标

1. 用一个 QFrame/QLabel 显示图标，将其置于QLineEdit上方。

2. 设置QLineEdit属性。

ui->lineEdit->setTextMargins(21, 0, 0, 0); // 将图标置于QLineEdit左侧的设置方法

- 启动界面示例

#include <QtGui/QApplication>

#include <QSplashScreen>

#include <QTimer>

#include "mainwindow.h"

int main(int argc, char *argv[])

{

QApplication a(argc, argv);

MainWindow w;



QPixmap pixmap(":res/bg");

QSplashScreen splash(pixmap);

splash.show();

QTimer::singleShot(1500, &splash, SLOT(hide()));

QTimer::singleShot(2000, &w, SLOT(show()));

return a.exec();

}