Simulation QQ System Setup Panel implementation function

Business requirements:

Based on the implementation of the network disk client, the Setup Panel of the original network disk can not meet our normal demand either from the interface display or from the business requirement. The current requirement is that the panel that simulates the QQ system Setup realizes the basic configuration function of the current network disk. In completing this article, the basic performance has been completed, although not integrated into the network disk client, but the fundamental technology Preview has been implemented.

QQ System Setup Panel analysis:

QQ System Setup Panel:

QQ System Setup Panel function Description:

Because there are more configurations, if each module's configuration items are designed into a form, there are a lot of forms that don't fit the user experience, and the program is cumbersome to write. The implementation of the QQ System Setup Panel is that all the configuration items are listed in the right area, and when the scroll bar is moved to the right, the corresponding caption in the left navigation will also show the effect of clicking. At the same time, click on the left side of the navigation separately, the right area also shows the corresponding navigation configuration items.

Implementation ideas:

Left:

The implementation of the left-hand navigation is very simple, the use of qlistwidget can fully meet our needs, as far as the left side of the right to display the corresponding module configuration items will require us to add processing code completion.

Right:

Because the navigation bar exists on the right side, the area on the right needs to use the Qscrollarea control, where it is important to note that two points:1> the configuration of each module in the Qscrollarea control needs to be placed in a separate qwidget, only So we can only recognize when we move the scroll bar through a block of configuration items. 2> in the implementation of the scroll bar effect, see there are many articles on the web that the scroll bar effect can not be realized, in fact, my practice is very simple, in the UI form, drag Qscrollarea into the form, and then set the properties of the form: Widgetresizable is not selected, that is, false status. If your qscrollarea is new in the code, its default widgetresizable is true, and it must be set to False in the code.

To visually illustrate the first point of attention, multiple qwidget (one qwidget per module configuration) are prevented in the Qscrollarea area of the UI form that I tested, with the following map:

The problem we are facing here is:

1. How do I decide to pass a qwidget when I drag the scrollbar to show the corresponding item on the left?

First, the ValueChanged event of the vertical scrollbar needs to be bound so that we can monitor its movement changes at any time, and secondly, using Qwidget's Visibleregion () method, the official interpretation of this function is " When the Paint event appears, return to its clear range, and to the visible widget, it is an approximate range that is not covered by other widgets; Returns an empty range "by calling Qwidget's Visibleregion (). IsEmpty () You can identify the area that is currently sliding.

2. When you click on the left navigation, how do the right areas navigate to the corresponding configuration module?

First, you need to bind the Qlistwidget itemclicked event so that we can monitor the click event and then use the Qscrollbar setsliderposition () method to set the scroll to the specific module location.

3. Because the ValueChanged event of the ScrollBar is bound and the scrollbar is set in the Itemclicked event, does the ValueChanged event also be triggered while setting the position?

A variable is required to mark this valuechanged event due to the Setsliderposition method.

Key Code Snippet:

1. Binding Qscrollarea valuechanged Events and Qlistwidget itemclicked events

[CPP]View PlainCopy 

2. void Lhtsettingsboard::setupui ()
4. {
6. M_scroll = Qfindchild<qscrollarea *> (m_wgtmain, "Scrollarea");
10. M_widget_login = Qfindchild<qwidget *> (m_wgtmain, "Widget_login");
12. M_widget_register = Qfindchild<qwidget *> (m_wgtmain, "Widget_register");
14. M_widget_network = Qfindchild<qwidget *> (m_wgtmain, "widget_network");
16. M_widget_password = Qfindchild<qwidget *> (m_wgtmain, "Widget_password");
20. M_listwidget = Qfindchild<qlistwidget *> (m_wgtmain, "left_navigation");
24. Connect ((const qobject*) M_scroll->verticalscrollbar (), SIGNAL (valuechanged (int)), this , SLOT (  valuechanged (int)));
26. Connect (M_listwidget, SIGNAL (itemclicked (qlistwidgetitem*)), this , SLOT (itemclicked (qlistwidgetitem*)));
30. Qlistwidgetitem *loginitem = m_listwidget->item (0);
32. Loginitem->setselected (true);
36. M_wgtmain->show ();
38. }

2. In response to the slot of the ValueChanged event, when the scroll bar is complete, the selected event of item in the left Qlistwidget is triggered when a panel appears

[CPP]View PlainCopy 

2. void lhtsettingsboard::valuechanged (int value)
4. {
6. Qlistwidgetitem *loginitem = m_listwidget->item (0);
8. Qlistwidgetitem *registeritem = M_listwidget->item (1);
10. Qlistwidgetitem *networkitem = M_listwidget->item (2);
12. Qlistwidgetitem *passworditem = M_listwidget->item (3);
16. if (!m_sign)
18. {
20. if (!m_widget_login->visibleregion (). IsEmpty ())
22. {
24. Loginitem->setselected (true);
26. return;
28. }
30. Else
32. {
34. Loginitem->setselected (false);
36. }
40. if (!m_widget_register->visibleregion (). IsEmpty ())
42. {
44. Registeritem->setselected (true);
46. return;
48. }
50. Else
52. {
54. Registeritem->setselected (false);
56. }
60. if (!m_widget_network->visibleregion (). IsEmpty ())
62. {
64. Networkitem->setselected (true);
66. return;
68. }
70. Else
72. {
74. Networkitem->setselected (false);
76. }
80. if (!m_widget_password->visibleregion (). IsEmpty ())
82. {
84. Passworditem->setselected (true);
86. return;
88. }
90. Else
92. {
94. Passworditem->setselected (false);
96. }
98. }
102. M_sign = false;
104. }

3. In response to the slot of the itemclicked event, when you finish clicking Item in Qlistwidget, the scroll bar in Qscrollarea moves to the location of the corresponding configuration item

[CPP]View PlainCopy 

2. void lhtsettingsboard::itemclicked (Qlistwidgetitem *item)
4. {
6. QString Itemtext = Item->text ();
8. Qdebug () << itemtext;
12. Qpoint POS;
16. M_sign = true;
20. if (Itemtext.compare ("Login") = = 0)
22. {
24. pos = M_widget_login->pos ();
26. M_scroll->verticalscrollbar ()->setsliderposition (Pos.y ());
28. }
30. Else if (Itemtext.compare ("Register") = = 0)
32. {
34. pos = M_widget_register->pos ();
36. M_scroll->verticalscrollbar ()->setsliderposition (Pos.y ());
38. }
40. Else if (Itemtext.compare ("Network") = = 0)
42. {
44. pos = M_widget_network->pos ();
46. M_scroll->verticalscrollbar ()->setsliderposition (Pos.y ());
48. }
50. Else if (Itemtext.compare ("ChangePassword") = = 0)
52. {
54. pos = M_widget_password->pos ();
56. M_scroll->verticalscrollbar ()->setsliderposition (Pos.y ());
58. }
62. }

Summarize:

Through the above can be implemented similar to the QQ System Setup Panel function, beginning I to this piece how to achieve, use what control completely do not know, spend less than a day of the event search data, test to find the appropriate method. In the process of deep experience to solve the problem is the most critical place is the idea, if there is a train of thought, even if others tell you should go in which direction, the back of the work is actually very simple. Enjoy the process slowly, a problem by completely do not know how to solve, to have ideas, to really solve.

http://blog.csdn.net/houqd2012/article/details/26501791

Simulation QQ System Setup Panel implementation function