首页 > 代码库 > [Qt] 界面美化 [2013-06-17更新](转载)

[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{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();
}

[Qt] 界面美化 [2013-06-17更新](转载)