Qt之界面实现技巧

  总结一下，在开发Qt的过程中的一些技巧！可遇而不可求。。。

一、主界面

1、窗口 最小化 最大化 关闭按钮、显示状态自定义

    setWindowFlags(Qt::CustomizeWindowHint);

    setWindowFlags(Qt::WindowCloseButtonHint); //只要关闭按钮

    setWindowFlags(Qt::WindowFlags type)

    Qt::FrameWindowHint:没有边框的窗口

    Qt::WindowStaysOnTopHint:  //总在最上面的窗口

    Qt::CustomizeWindowHint:  //自定义窗口标题栏,以下标志必须与这个标志一起使用才有效,否则窗口将有默认的标题栏

    Qt::WindowTitleHint  //显示窗口标题栏

    Qt::WindowSystemMenuHint  //显示系统菜单

    Qt::WindowMinimizeButtonHint  //显示最小化按钮

    Qt::WindowMaximizeButtonHint  //显示最大化按钮

    Qt::WindowMinMaxButtonsHint  //显示最小化按钮和最大化按钮

    Qt::WindowCloseButtonHint  //显示关闭按钮

2、隐藏任务栏显示

    setWindowFlags(Qt::Tool | Qt::X11BypassWindowManagerHint）

3、关闭按钮实现的功能

    hide(); //进行界面隐藏，但是显示托盘，可通过点击托盘实现界面的重新显示

    quit(); //退出系统

4、绘制背景图片并且实现圆角效果

    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像素

     }

5、设置应用程序的字体

    QFont font("Courier", 10, QFont::Normal, false);

    QApplication::setFont(font);

6、设置组件字体

    QFont font = this->font();

    font.setFamily("Courier");  //字体名称

    font.setPixelSize(16);  //字体点大小

    font.setPointSize(18);  //字体像素大小

    font.setBold(true);  //是否加粗

    font.setItalic(true);  //是否斜体

    font.setUnderline(true);  //是否下划线

    this->setFont(font);

    字体风格，包括类型、大小、是否加粗、是否斜体等！

   也可以使用：setStyleSheet("text-align:center; font-size:18px; font-weight:bold; font-style:Courier; color:white; ");

    setAlignment(Qt::AlignCenter);  //设置对齐方式

7、超链接

QLabel *url_label = new QLabel();

url_label->setOpenExternalLinks(true);//这句比较关键，也可以通过连接linkActivated信号到自定义槽函数中打开

url_label->setText(tr("Google"));

8、打开本地文件（夹）

QDesktopServices::openUrl(QUrl::fromLocalFile(local_file));

9、显示窗口并激活/提升

showNormal();

raise();

activateWindow();

10、设置滚动条值

textEdit->verticalScrollBar()->setValue(0);  //滚动到最顶层

textEdit->verticalScrollBar()->setValue(textEdit->verticalScrollBar()->maximum());  //滚动到最底层

二、全屏显示与还原

    关于这个问题，当做一个大的标题来讨论，因为比起其它小技巧要稍微复杂一些！

    全屏显示：

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;

}

 //不存在分隔线

8、QComboBox

QComboBox {

border-image: url(:/OverdraftControl/comboBox);

}

QComboBox:hover {

border-image: url(:/OverdraftControl/comboBoxHover);

}

QComboBox:pressed {

border-image: url(:/OverdraftControl/comboBoxPressed);

}

QComboBox::down-arrow {

image: none;

}

QComboBox::drop-down {

width: 15px;

border: none;

}

QComboBox QAbstractItemView {

border: 1px solid lightgray;

outline: 0px;  //去掉item虚线

}

QComboBox QAbstractItemView::item {

color: black;

height: 22px;

border: 1px solid transparent;

}

QComboBox QAbstractItemView::item:selected {

border: 1px solid rgb(170, 190, 230);

background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,stop: 0 rgb(230, 240, 250), stop: 0.5rgb(220, 235, 255), stop: 1.0 rgb(210, 230, 255));

}

一般也可以使用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  指按钮窗口部件的前景色

  以上是遇到的常用但有资料较少的组件的样式，注重细节才能做出好的产品！

  有待完善。。。

注：

    技术在于交流、沟通，转载请注明出处并保持作品的完整性。

    作者：╰☆奋斗ing?孩子`  原文：http://blog.sina.com.cn/s/blog_a6fb6cc90101dech.html。