duilib中的V和H布局中滚动条问题

转自博客：http://blog.csdn.net/damingg/article/details/41149037

首先看一段xml代码

[html] view
plaincopy

1. <?xml version="1.0" encoding="utf-8"?>
2. <Window size="300,200" caption="0,0,300,20">
3. <HorizontalLayout name="aaaa" bkcolor="#FFEEEEEE" >
4. <VerticalLayout name="xxxxxx" float="true" pos="50,20,250,195" hscrollbar="true" vscrollbar="true" sepheight="4" >
5. <Label name="child1" text="text1" float="false" pos="0,0,300,200" bordercolor="#FFEE00EE" bkcolor="#FF0000EE" textcolor="#FF010101"/>
6. <Label name="child2" text="text2" float="false" pos="0,0,200,200" bordercolor="#FFEE00EE" bkcolor="#FF0000EE" textcolor="#FF01FF01"/>
7. </VerticalLayout>
8. </HorizontalLayout>
9. </Window>

这是一个窗口，它包含一个竖的布局，显示出来初始状态是这样的：

在布局中，2个子控件所需要的长和宽，比布局本身的大小要大，所以需要2个滚动条来拉动显示。

我们可以看到横竖两个滚动条。

不过，我们拉动滚动条，却不能完全展示子控件。如下图：

虽然横向滚动条拉到了最右边，但Label控件child1的右边没有展示出来。

检查代码，发现CVerticalLayoutUI的SetPos方法如下：

[cpp] view
plaincopy

1. void CVerticalLayoutUI::SetPos(RECT rc)
2. {
3. ...省略若干代码
4. // Process the scrollbar
5. ProcessScrollBar(rc, 0, cyNeeded);
6. }

在最后面，调用了基类CContainerUI的ProcessScrollBar方法，来设置滚动条信息，ProcessScrollBar函数的第二个参数是设置横向滚动条信息，第三个参数是竖向滚动条。此时设置横向的参数为0，竖向的是cyNeeded。显然，这里忽略了横向的，所以在竖向布局VerticalLayout中，横向滚动条不能正常显示。

在CVerticalLayoutUI::SetPos中，所有涉及到cyNeeded的代码如下：

[cpp] view
plaincopy

1. int cyNeeded = 0;
2. int cyExpand = 0;
3. if( nAdjustables > 0 ) cyExpand = MAX(0, (szAvailable.cy - cyFixed) / nAdjustables);
4. // Position the elements
5. SIZE szRemaining = szAvailable;
6. int iPosY = rc.top;
7. if( m_pVerticalScrollBar && m_pVerticalScrollBar->IsVisible() ) {
8. iPosY -= m_pVerticalScrollBar->GetScrollPos();
9. }
10. int iPosX = rc.left;
11. if( m_pHorizontalScrollBar && m_pHorizontalScrollBar->IsVisible() ) {
12. iPosX -= m_pHorizontalScrollBar->GetScrollPos();
13. }
14. int iAdjustable = 0;
15. int cyFixedRemaining = cyFixed;
16. for( int it2 = 0; it2 < m_items.GetSize(); it2++ ) {
17. CControlUI* pControl = static_cast<CControlUI*>(m_items[it2]);
18. if( !pControl->IsVisible() ) continue;
19. if( pControl->IsFloat() ) {
20. SetFloatPos(it2);
21. continue;
22. }
23. RECT rcPadding = pControl->GetPadding();
24. szRemaining.cy -= rcPadding.top;
25. SIZE sz = pControl->EstimateSize(szRemaining);
26. if( sz.cy == 0 ) {
27. iAdjustable++;
28. sz.cy = cyExpand;
29. // Distribute remaining to last element (usually round-off left-overs)
30. if( iAdjustable == nAdjustables ) {
31. sz.cy = MAX(0, szRemaining.cy - rcPadding.bottom - cyFixedRemaining);
32. }
33. if( sz.cy < pControl->GetMinHeight() ) sz.cy = pControl->GetMinHeight();
34. if( sz.cy > pControl->GetMaxHeight() ) sz.cy = pControl->GetMaxHeight();
35. }
36. else {
37. if( sz.cy < pControl->GetMinHeight() ) sz.cy = pControl->GetMinHeight();
38. if( sz.cy > pControl->GetMaxHeight() ) sz.cy = pControl->GetMaxHeight();
39. cyFixedRemaining -= sz.cy;
40. }
41. sz.cx = pControl->GetFixedWidth();
42. if( sz.cx == 0 ) sz.cx = szAvailable.cx - rcPadding.left - rcPadding.right;
43. if( sz.cx < 0 ) sz.cx = 0;
44. if( sz.cx < pControl->GetMinWidth() ) sz.cx = pControl->GetMinWidth();
45. if( sz.cx > pControl->GetMaxWidth() ) sz.cx = pControl->GetMaxWidth();
46. RECT rcCtrl = { iPosX + rcPadding.left, iPosY + rcPadding.top, iPosX + rcPadding.left + sz.cx, iPosY + sz.cy + rcPadding.top + rcPadding.bottom };
47. pControl->SetPos(rcCtrl);
48. iPosY += sz.cy + m_iChildPadding + rcPadding.top + rcPadding.bottom;
49. cyNeeded += sz.cy + rcPadding.top + rcPadding.bottom;
50. szRemaining.cy -= sz.cy + m_iChildPadding + rcPadding.bottom;
51. }
52. cyNeeded += (nEstimateNum - 1) * m_iChildPadding;

在for循环里，会统计所有非float子控件的高度

在  cyNeeded += sz.cy + rcPadding.top + rcPadding.bottom;  里，sz.cy是1个子控件的高度，而rcPadding = pControl->GetPadding(); 是控件的padding属性，也就是外边距。

最后yNeeded += (nEstimateNum - 1) * m_iChildPadding;  m_iChildPadding是布局的childpadding属性，也就是子控件之间的额外距离。

我们可以仿照cyNeeded的计算方式，来算出cxNeeded。因为是竖向布局，所以 cyNeeded += sz.cy 这里是累加，但是横向值，应该取最宽的控件的值，

所以for循环中的代码应该是这样：

int tmp = sz.cx + rcPadding.left + rcPadding.right;

cxNeeded = (tmp > cxNeeded) ? tmp: cxNeeded;

最后cxNeeded += (nEstimateNum - 1) * m_iChildPadding;

此时通过对代码的了解，可以得知：布局在计算容量面积时，只计算非float类型的子控件，忽略了float类型的子控件。

算出了布局的宽度后，就应用起来

修改原来的代码为：ProcessScrollBar(rc, cxNeeded, cyNeeded);

改完后，发现问题依然。于是，检查了下ProcessScrollBar的代码，如下

[cpp] view
plaincopy

1. void CContainerUI::ProcessScrollBar(RECT rc, int cxRequired, int cyRequired)
2. {
3. if( m_pHorizontalScrollBar != NULL && m_pHorizontalScrollBar->IsVisible() ) {
4. RECT rcScrollBarPos = { rc.left, rc.bottom, rc.right, rc.bottom + m_pHorizontalScrollBar->GetFixedHeight()};
5. m_pHorizontalScrollBar->SetPos(rcScrollBarPos);
6. }
7. if( m_pVerticalScrollBar == NULL ) return;
8. if( cyRequired > rc.bottom - rc.top && !m_pVerticalScrollBar->IsVisible() ) {
9. m_pVerticalScrollBar->SetVisible(true);
10. m_pVerticalScrollBar->SetScrollRange(cyRequired - (rc.bottom - rc.top));
11. m_pVerticalScrollBar->SetScrollPos(0);
12. m_bScrollProcess = true;
13. SetPos(m_rcItem);
14. m_bScrollProcess = false;
15. return;
16. }
17. // No scrollbar required
18. if( !m_pVerticalScrollBar->IsVisible() ) return;
19. // Scroll not needed anymore?
20. int cyScroll = cyRequired - (rc.bottom - rc.top);
21. if( cyScroll <= 0 && !m_bScrollProcess) {
22. m_pVerticalScrollBar->SetVisible(false);
23. m_pVerticalScrollBar->SetScrollPos(0);
24. m_pVerticalScrollBar->SetScrollRange(0);
25. SetPos(m_rcItem);
26. }
27. else
28. {
29. RECT rcScrollBarPos = { rc.right, rc.top, rc.right + m_pVerticalScrollBar->GetFixedWidth(), rc.bottom };
30. m_pVerticalScrollBar->SetPos(rcScrollBarPos);
31. if( m_pVerticalScrollBar->GetScrollRange() != cyScroll ) {
32. int iScrollPos = m_pVerticalScrollBar->GetScrollPos();
33. m_pVerticalScrollBar->SetScrollRange(::abs(cyScroll));
34. if( m_pVerticalScrollBar->GetScrollRange() == 0 ) {
35. m_pVerticalScrollBar->SetVisible(false);
36. m_pVerticalScrollBar->SetScrollPos(0);
37. }
38. if( iScrollPos > m_pVerticalScrollBar->GetScrollPos() ) {
39. SetPos(m_rcItem);
40. }
41. }
42. }
43. }

很明显，cxRequired根本没有用到。

对于横向滚动条，只使用了这3行代码：

[cpp] view
plaincopy

1. if( m_pHorizontalScrollBar != NULL && m_pHorizontalScrollBar->IsVisible() ) {
2. RECT rcScrollBarPos = { rc.left, rc.bottom, rc.right, rc.bottom + m_pHorizontalScrollBar->GetFixedHeight()};
3. m_pHorizontalScrollBar->SetPos(rcScrollBarPos);
4. }

于是，我们需要仿照设置竖向滚动条的方式，来设置横向滚动条：

[cpp] view
plaincopy

1. void CContainerUI::ProcessScrollBar(RECT rc, int cxRequired, int cyRequired)
2. {
3. while(m_pHorizontalScrollBar)
4. {
5. if (cxRequired > rc.right - rc.left && !m_pHorizontalScrollBar->IsVisible())
6. {
7. m_pHorizontalScrollBar->SetVisible(true);
8. m_pHorizontalScrollBar->SetScrollRange(cxRequired - (rc.right - rc.left));
9. m_pHorizontalScrollBar->SetScrollPos(0);
10. m_bScrollProcess = true;
11. SetPos(m_rcItem);
12. m_bScrollProcess = false;
13. break;
14. }
15. if( !m_pHorizontalScrollBar->IsVisible() ) break;
16. int cxScroll = cxRequired - (rc.right - rc.left);
17. if (cxScroll <= 0 && !m_bScrollProcess)
18. {
19. m_pHorizontalScrollBar->SetVisible(false);
20. m_pHorizontalScrollBar->SetScrollPos(0);
21. m_pHorizontalScrollBar->SetScrollRange(0);
22. SetPos(m_rcItem);
23. }
24. else
25. {
26. RECT rcScrollBarPos = { rc.left, rc.bottom, rc.right, rc.bottom + m_pHorizontalScrollBar->GetFixedHeight() };
27. m_pHorizontalScrollBar->SetPos(rcScrollBarPos);
28. if( m_pHorizontalScrollBar->GetScrollRange() != cxScroll ) {
29. int iScrollPos = m_pHorizontalScrollBar->GetScrollPos();
30. m_pHorizontalScrollBar->SetScrollRange(::abs(cxScroll));
31. if( m_pHorizontalScrollBar->GetScrollRange() == 0 ) {
32. m_pHorizontalScrollBar->SetVisible(false);
33. m_pHorizontalScrollBar->SetScrollPos(0);
34. }
35. if( iScrollPos > m_pHorizontalScrollBar->GetScrollPos() ) {
36. SetPos(m_rcItem);
37. }
38. }
39. }
40. break;
41. }
42. while(m_pVerticalScrollBar)
43. {
44. if( cyRequired > rc.bottom - rc.top && !m_pVerticalScrollBar->IsVisible() ) {
45. m_pVerticalScrollBar->SetVisible(true);
46. m_pVerticalScrollBar->SetScrollRange(cyRequired - (rc.bottom - rc.top));
47. m_pVerticalScrollBar->SetScrollPos(0);
48. m_bScrollProcess = true;
49. SetPos(m_rcItem);
50. m_bScrollProcess = false;
51. break;
52. }
53. // No scrollbar required
54. if( !m_pVerticalScrollBar->IsVisible() ) break;
55. // Scroll not needed anymore?
56. int cyScroll = cyRequired - (rc.bottom - rc.top);
57. if( cyScroll <= 0 && !m_bScrollProcess) {
58. m_pVerticalScrollBar->SetVisible(false);
59. m_pVerticalScrollBar->SetScrollPos(0);
60. m_pVerticalScrollBar->SetScrollRange(0);
61. SetPos(m_rcItem);
62. }
63. else
64. {
65. RECT rcScrollBarPos = { rc.right, rc.top, rc.right + m_pVerticalScrollBar->GetFixedWidth(), rc.bottom };
66. m_pVerticalScrollBar->SetPos(rcScrollBarPos);
67. if( m_pVerticalScrollBar->GetScrollRange() != cyScroll ) {
68. int iScrollPos = m_pVerticalScrollBar->GetScrollPos();
69. m_pVerticalScrollBar->SetScrollRange(::abs(cyScroll));
70. if( m_pVerticalScrollBar->GetScrollRange() == 0 ) {
71. m_pVerticalScrollBar->SetVisible(false);
72. m_pVerticalScrollBar->SetScrollPos(0);
73. }
74. if( iScrollPos > m_pVerticalScrollBar->GetScrollPos() ) {
75. SetPos(m_rcItem);
76. }
77. }
78. }
79. break;
80. }
81. }

看看效果

可以看到控件child1的右边框。

HorizontalLayout也有同样的问题，可类似修改。