QT Programming QT-based Dictionary development series < three >--interface beautification design

This article discusses the interface design, the work to face the user, the interface design directly affects the user experience. Now the window design is basically flat, and you can clearly feel it from Windows XP and Window 8. Of course, in addition to the window itself, the effects of the various controls in the window are particularly important. Here are some of my dictionary software design: Speaking of the design of the interface beautification, have to mention art, a good art is to be the important! After all, the software without the icon, and do not know the art of me, you can only use other people's icons on the Internet.

How do I get an online icon? direct Baidu can, of course, there is another way: is to extract these icon files from other people's files. In general, icon files are not stored in the software catalog in a picture format, and are generally stored in the. rdb suffix and. ui files. The specific steps are as follows:
1. Find the installation directory to extract the software2. Search: Search for. jpg,. png and other picture format files (you can find the best), and then search for. Rdb or. ui Files3, download the RDB Package unpacking tool, unpack, you can get the picture resources
Seamless connection between controls:The so-called seamless connection is that there is no gap between the accusation and the control, using QT Creator to open the interface file, such as I open the Dictionary project, open the Searchwindow.ui file, the effect of whether the control has voids is as follows:
the size of the void between controls can be controlled by the layout property of the parent control where the child controls are located1. When the Layout property is set as follows: (in case of voids)
There is a gap between the controls, which shows the following effects:
2 When the Layout property is set as follows: (without voids)
There is no space between the controls and the results are as follows:


the beautification of the button Now the button is flattened, for example, all the buttons are flat, and the difference is as follows:

Obviously the first kind is the general button, if we put Toolbutton in the Autorise property book, there will be a second case, the reason why Qpushbutton is not used because it does not have a autoraise attribute.
When the Autorasie property is selected, the effect is as follows when the mouse is placed on the button:

Dynamic Rendering EffectsWe found that many of the software has dynamic effects, such as the mouse on the button, will change, click and change, how do these do? QT Beautification interface best Use QML, but because just come out soon, on-line material is not many, I also not very understand, do not introduce. Have learned the Web page production know, the page renders the effect uses the CSS, similarly, QT uses the QSS to beautify the interface. Here is an easy-to-use method for rendering operations:
Right-click the control in the interface, select Change Style Sheet ..., and then set the rendering effect in the pop-up window, as illustrated by the click of the button below:First, right-click the Close button and select "Change style sheet ...":
then write the following code in the "Edit style sheet" button that pops up:

Qtoolbutton{border-image:url (:/searchwindow/searchwindow/close_normal.png);} The above statement is to add the close_normal.png icon to the "Close" button, note that you need to write the path of your own picture Qtoolbutton:hover{border-image:url (:/searchwindow/ Searchwindow/close_hover.png);} The function of this statement is that when the mouse is placed on the "close" button, the icon becomes the icon of Close_hover.png, note that here you need to write the path of your own picture

These two statements achieve the following effects:
in general, the Close button appears as follows:
when the mouse is on top, the effect is as follows:
I in the dictionary all buttons almost all adopt this effect, if want to use more effect, can Baidu Qt Setstylesheet, can see more rendering effect. In the software interface, the style sheet I use in the Listwidget control is as follows:

Qlistwidget::item{width:40px;height:40px;font:bold 20px;} Qlistwidget {    Background-color:rgb (255, 255, 255);} qlistwidget::item:selected:!active {    Background-color:rgb (98, 93, 255);} qlistwidget::item:selected:active {    Background-color:rgb (98, 93, 255);} Qlistwidget::item:hover {Background-color:rgba (50, 23, 255, 100);}

the specific meaning can be seen according to the effect, the following demo effect:
the current selection uses a dark blue representation, while the mouse docking selection is indicated by a light blue.

The following is all the interface of my software project, the icon is used on the network icon (if there is infringement, please inform):



QT-based dictionary development series

1. dictionary frame design and finished product display
2. design of the local dictionary
3. Start menu design
4. No border window zoom and drag
   
5. Span style= "font-family:kaiti_gb2312; font-size:18px "> Drag without border window
   
6. UI landscaping design

Works: http://download.csdn.net/detail/tengweitw/8548767

Original: http://blog.csdn.net/tengweitw/article/details/45223931
Nineheadedbird

QT Programming QT-based Dictionary development series < three >--interface beautification design