Use cases for Qtreeview and qtreewidget style sheets

For the first time, the QT style sheet is exposed to the project. The main problem is to modify the interface of Qtreewidget (or Qtreeview). Official help documents actually play a big role, the information on the Internet is relatively miscellaneous, and the general description is not clear. It took some time today to solve some of the problems encountered in the project, although not very serious problems, but for the new contact with Qt, should also be a bit of trouble.

Blogger's project Environment: Ubuntu 14.04 64bit Qt 4.8.6

Peel off a simple example from the project and summarize the problem solved today: Read format of the QSS file Qtreewidget background settings for the project

Initially, the implementation of the written QSS files always do not reach the effect of the display, after the search, there are netizens said to be QSS file format problems, using UTF-8 or ASCII, etc., I use ASCII. Use the eNCA command to view its file format, it should not be the problem, such as suspect may be reading the file error, use the following way to read the file when the detection.

QFile file (":/stylesheet/stylesheet.qss");
    if (File.Open (qfile::readonly))
    {
        qapp->setstylesheet (File.readall ());
        File.close ();
        Qdebug () << "Open File successfully!!!";
    }
    else
        qmessagebox::about (NULL, "Test", "Open File Failed");

The next step is to set up the stylesheet, explaining only a few of the more subtle issues. QSS draws on CSS in many places, but it's easier to implement. QSS's comments Support "/* */", do not support "//", if the use of "//" to comment, it may cause the style sheet settings after the symbol is all invalidated.

qtreewidget{
    background-color: #5B677A;

    /* Set the font properties*/
    font-size:17px;
    Color:white;
}

The font size of the font-size set above, color is the font color.

When setting the Qtreewidget style sheet, sometimes it will be found that it will automatically indent, that is, when the mouse hover to an item, item will automatically "go a little forward", the way to solve this problem is to set the background of the item

qtreewidget::item{
    margin:13px;
    Background: #5B677A;
    Background-clip:margin;
}

The effect of the margin setting above is to increase the interval between the contents of each item, because Qtreewidget is built on the box model, and this content, the Help document is introduced, and the reason for using Background-clip , the value can also be set to border, padding, content, the general boundary of these three is coincident. This setting is purely for the purpose of achieving the visual effects in my project, and the specific selection will vary from person to person.

The next problem to solve is the orange-red part of the picture, because this part of the display is not in harmony with the overall color match. By the way, the "+"-"-" and the icon of the note are all located in the branch, which I added later in the content, but did not design to remove the orange part of the content. In fact, as long as the understanding of what is branch, the problem is very simple, just modify the branch background color can be

qtreewidget::branch{
    background: #5B677A;
    }

In fact, we do not set the background color of the qtreewidget::branch and the Qtreewidget::item background color (of course, there is no setting qtreewidget::item:hover or Qtreewidget in the back: Selected under the premise) each time the selection, the whole column is orange, as follows

The purpose of setting Qtreewidget::item and Qtreewidget::branch is only to cover the background. At this point, this small problem all solved.

Here is the sample code, the file path in the code using the new resource file in Qt, this is relatively simple, do not repeat.

Main.cpp

#include <QtGui/QApplication> #include <QTreeWidget> #include <QFile> #include <QMainWindow> # 

    Include <QDebug> #include <QMessageBox> int main (int argc, char * argv[]) {qapplication app (argc, argv);
    QFile file (":/stylesheet/stylesheet.qss");
        if (File.Open (qfile::readonly)) {Qapp->setstylesheet (File.readall ());
        File.close ();
    Qdebug () << "Open File successfully!!!";


    } else Qmessagebox::about (NULL, "Test", "Open File Failed");
     Qtreewidget *treewidget = new Qtreewidget;
     Treewidget->setcolumncount (1);
     Qlist<qtreewidgetitem *> items; for (int i = 0; i < 2; ++i) {Items.append (New Qtreewidgetitem ((qtreewidget*) 0, Qstringlist (QString ("Item
         :%1 "). Arg (i))); for (int j=0; J <3; J + +) items.at (i)->addchild (New Qtreewidgetitem (items.at (i), Qstringlist (QString ("Chi
     LD:%1 "). Arg (i))); } treewidget->inserttoplevelItems (0, items);
     Treewidget->setheaderhidden (TRUE);
     Treewidget->resize (270, 390);

    Treewidget->show ();
return App.exec ();
 }

Style sheet Stylesheet.qss

qtreewidget{Background-color: #5B677A;
    /* Set the font properties*/font-size:17px;
Color:white;
    } qtreewidget::item{margin:13px;
    Background: #5B677A;
Background-clip:margin;
    } qtreewidget::branch{background: #5B677A;

} qtreeview::item:hover {Background:rgb (69, 187, 217);;}

qtreeview::item:selected:active{Background:rgb (63, 147, 168);}


qtreeview::item:selected:!active {Background:rgb (63, 147, 168);}
    Qtreewidget::branch:closed:has-children:!has-siblings, Qtreewidget::branch:closed:has-children:has-siblings {
    Border-image:none;
Image:url (:/image/plus.png); } qtreewidget::branch:open:has-children:!has-siblings, qtreewidget::branch:open:has-children:has-siblings {border
    -image:none;
Image:url (:/image/minus.png);
    } qtreewidget::branch:!has-children:has-siblings:adjoins-item{Border-image:none;
    Image:url (:/image/test.png); } qtreewidget::branch:!has-children:!has-siblings:adjoins-item{
    Border-image:none;
    Image:url (:/image/test.png); }

The difference between an image and a border-image in a style sheet: The image is populated with content, and the latter is filled with border, which is also the contents of the box model