Qt Style Sheet Practice (ii): Customized combo box Qcombobox (24K Pure Source)--Very beautiful

A combo box is an important and widely used component, typically consisting of two subcomponents: a text drop-down and a button section. In many applications that require both user selection and manual input, the combo box is well-adapted to our needs. As we often use the chat software QQ Login box, is a good example of application:

Obviously, the user can either manually enter a new QQ number, or you can select a history entry record in the list box. is a good way to improve the user experience. This blog post focuses on how to customize a combo box with QSS.

Basic customization

The use of the combo box is very simple, in order to speed up the narrative, we directly in QT Designer drag a Qcombobox control into the main window. At this point, we don't have to do anything to have a simple combo box, as follows:

But obviously, we have to add a text, otherwise qcombobox will not show any content. The appearance of the combo box style is normal: a text with a button with an arrow number is finished. Since the theme is to use QSS to customize the combo box, the first thing we do is create a new. qss file and add it to the resource file to compile. The contents of the. qss file are initially written as follows:

123456

QComboBox {    border: 1pxsolidgray;    border-radius: 3px;    padding: 1px2px1px2px;  # 针对于组合框中的文本内容    min-width: 9em;   # 组合框的最小宽度}

We give the combo box a rounded corner of 3 pixels, a border of 1 pixels wide and the color set to gray. Look at the effect:

The text box part seems to be good, but the right button looks really ugly, and the overall style does not match. We continue to beautify the button. The button is a subassembly of Qcombobox, using::d rop-down. Write the following QSS code:

123456789101112131415

QComboBox::drop-down {    subcontrol-origin: padding;    subcontrol-position: topright;    width: 20px;    border-left-width: 1px;    border-left-color: darkgray;    border-left-style: solid; /* just a single line */    border-top-right-radius: 3px; /* same radius as the QComboBox */    border-bottom-right-radius: 3px;}QComboBox::down-arrow {    image: url(:/misc/down_arrow_2);}

As you can see, we set the corner of the button to the top right and the lower right corner by 3 pixels, because we set the rounded corners in front of the combo box's overall border. If you do not set a fillet for the button, the corners of the button will obscure the rounded effect of the overall border. In addition, we changed the arrow icon on the button. ::d Own-arrow is also a subcomponent, and we replaced the system default icon with the Image property. Compare:

Well, the overall style looks more coordinated. Of course, in::d rop-down subassembly Customization, we set the Subcontrol-position property to top, right. So the button is on the far right. If you want to put the button on the far left, it's obviously easy. Just set the subcontrol-position to top, left, and then change the Qcombobox padding value to achieve the goal. Let's pull out the drop-down box and see:

What's the problem? Obviously, the options in the drop-down box are too small to look very awkward. So how do you customize the drop-down box? We have a very good imitation of the object:

The drop-down box in the 360 security guard's login box looks pretty good, and the icon appears to the right of the option. Below we will enter the Advanced customization section. Let's see how we can make improvements.

Advanced customization

To achieve this, the first thing we need to do is set the Qcombobox to be editable (seteditable ()). This allows the contents of the text box to be entered manually. Also, we notice that the icon appears on the right side of the option in the dropdown box, and the icon appears in the login box of QQ. Our most intuitive idea is to use the layout manager (horizontal or vertical) to assemble all the components into a single unit and then add them to the drop-down box.

How do you do it? Fortunately, Qcombobox internal is also the Model/view framework to maintain the contents of the dropdown box. Therefore, the most straightforward approach is to define a qlistwidget, set the Qlistwidget to Qcombobox view, and set the Qlistwidget model to the Qcombobox model. Qlistwidget is just a view class, so we have to customize the item in the view class.

Well, since Qwidget derives a subclass, implements a horizontal layout, adding all the subcomponents to the inside:

+ View Code

The code is simple and defines two tag Qlabel, one display text and one display icon. Use the horizontal layout manager to add to the qwidget.

123456789101112131415161718192021

ThemeRoller::ThemeRoller(QWidget *parent)    : QMainWindow(parent){    ui.setupUi(this);    m_listWidget = newQListWidget(this);        // 设置子项目代理，否则下拉框选项周围会出现虚线框    m_listWidget->setItemDelegate(newNoFocusFrameDelegate(this));    ui.comboBox->setEditable(true);    ui.comboBox->setModel(m_listWidget->model());    ui.comboBox->setView(m_listWidget);        // 在下拉框中添加5个选项    for(inti = 0; i < 5; ++i)    {        ComboboxItem* item = newComboboxItem(this);        item->setLabelContent(QString("Account") + QString::number(i, 10));        connect(item, SIGNAL(chooseAccount(constQString&)), this, SLOT(onChooseAccount(constQString&)));        QListWidgetItem* widgetItem = newQListWidgetItem(m_listWidget);        m_listWidget->setItemWidget(widgetItem, item);    }}

We also associate the ComboBoxItem Chooseaccount () signal to the Onchooseaccount () slot. This allows the selected item to be displayed in the Qcombobox text box when the user taps an option in the option. So, how do qss write it?

+ View Code

Also very simple, just set the height of the option, and the height of the qcombobox is consistent, so it does not look awkward. The mouse hover background color is then set for the option. At this point, the entire customization process is over. See how it works:

Summary

The Qcombobox is divided into three custom parts: a text box (editable), a button (arrow marker, Border), a drop-down box (option height, subassembly layout). From the above, we can use QSS to achieve their desired effect, and the effect is not bad.

Http://www.cnblogs.com/csuftzzk/p/qss_combobox.html

Qt Style Sheet Practice (ii): Customized combo box Qcombobox (24K Pure Source)--Very beautiful