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

最新推荐文章于 2023-05-09 17:37:51 发布
最新推荐文章于 2023-05-09 17:37:51 发布
阅读量8.5k 收藏 3
点赞数
分类专栏： duilib
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/damingg/article/details/41149037
版权
首先看一段xml代码 
 <?xml version="1.0" encoding="utf-8"?>
<Window size="300,200" caption="0,0,300,20">
	<HorizontalLayout name="aaaa" bkcolor="#FFEEEEEE" >

		<VerticalLayout name="xxxxxx" float="true" pos="50,20,250,195" hscrollbar="true" vscrollbar="true" sepheight="4" >
		
			<Label name="child1" text="text1" float="false" pos="0,0,300,200" bordercolor="#FFEE00EE" bkcolor="#FF0000EE" textcolor="#FF010101"/>
			<Label name="child2" text="text2" float="false" pos="0,0,200,200" bordercolor="#FFEE00EE" bkcolor="#FF0000EE" textcolor="#FF01FF01"/>

		</VerticalLayout>

	</HorizontalLayout>
</Window>

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

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

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

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

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

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

	void CVerticalLayoutUI::SetPos(RECT rc)
	{
		...省略若干代码

		// Process the scrollbar
		ProcessScrollBar(rc, 0, cyNeeded);
	}

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

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

int cyNeeded = 0;
		int cyExpand = 0;
		if( nAdjustables > 0 ) cyExpand = MAX(0, (szAvailable.cy - cyFixed) / nAdjustables);
		// Position the elements
		SIZE szRemaining = szAvailable;
		int iPosY = rc.top;
		if( m_pVerticalScrollBar && m_pVerticalScrollBar->IsVisible() ) {
			iPosY -= m_pVerticalScrollBar->GetScrollPos();
		}
		int iPosX = rc.left;
		if( m_pHorizontalScrollBar && m_pHorizontalScrollBar->IsVisible() ) {
			iPosX -= m_pHorizontalScrollBar->GetScrollPos();
		}
		int iAdjustable = 0;
		int cyFixedRemaining = cyFixed;
		for( int it2 = 0; it2 < m_items.GetSize(); it2++ ) {
			CControlUI* pControl = static_cast<CControlUI*>(m_items[it2]);
			if( !pControl->IsVisible() ) continue;
			if( pControl->IsFloat() ) {
				SetFloatPos(it2);
				continue;
			}

			RECT rcPadding = pControl->GetPadding();
			szRemaining.cy -= rcPadding.top;
			SIZE sz = pControl->EstimateSize(szRemaining);
			if( sz.cy == 0 ) {
				iAdjustable++;
				sz.cy = cyExpand;
				// Distribute remaining to last element (usually round-off left-overs)
				if( iAdjustable == nAdjustables ) {
					sz.cy = MAX(0, szRemaining.cy - rcPadding.bottom - cyFixedRemaining);
				} 
				if( sz.cy < pControl->GetMinHeight() ) sz.cy = pControl->GetMinHeight();
				if( sz.cy > pControl->GetMaxHeight() ) sz.cy = pControl->GetMaxHeight();
			}
			else {
				if( sz.cy < pControl->GetMinHeight() ) sz.cy = pControl->GetMinHeight();
				if( sz.cy > pControl->GetMaxHeight() ) sz.cy = pControl->GetMaxHeight();
				cyFixedRemaining -= sz.cy;
			}

			sz.cx = pControl->GetFixedWidth();
			if( sz.cx == 0 ) sz.cx = szAvailable.cx - rcPadding.left - rcPadding.right;
			if( sz.cx < 0 ) sz.cx = 0;
			if( sz.cx < pControl->GetMinWidth() ) sz.cx = pControl->GetMinWidth();
			if( sz.cx > pControl->GetMaxWidth() ) sz.cx = pControl->GetMaxWidth();

			RECT rcCtrl = { iPosX + rcPadding.left, iPosY + rcPadding.top, iPosX + rcPadding.left + sz.cx, iPosY + sz.cy + rcPadding.top + rcPadding.bottom };
			pControl->SetPos(rcCtrl);

			iPosY += sz.cy + m_iChildPadding + rcPadding.top + rcPadding.bottom;
			cyNeeded += sz.cy + rcPadding.top + rcPadding.bottom;
			szRemaining.cy -= sz.cy + m_iChildPadding + rcPadding.bottom;
		}
		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的代码，如下

	void CContainerUI::ProcessScrollBar(RECT rc, int cxRequired, int cyRequired)
	{
		if( m_pHorizontalScrollBar != NULL && m_pHorizontalScrollBar->IsVisible() ) {
			RECT rcScrollBarPos = { rc.left, rc.bottom, rc.right, rc.bottom + m_pHorizontalScrollBar->GetFixedHeight()};
			m_pHorizontalScrollBar->SetPos(rcScrollBarPos);
		}

		if( m_pVerticalScrollBar == NULL ) return;

		if( cyRequired > rc.bottom - rc.top && !m_pVerticalScrollBar->IsVisible() ) {
			m_pVerticalScrollBar->SetVisible(true);
			m_pVerticalScrollBar->SetScrollRange(cyRequired - (rc.bottom - rc.top));
			m_pVerticalScrollBar->SetScrollPos(0);
			m_bScrollProcess = true;
			SetPos(m_rcItem);
			m_bScrollProcess = false;
			return;
		}
		// No scrollbar required
		if( !m_pVerticalScrollBar->IsVisible() ) return;

		// Scroll not needed anymore?
		int cyScroll = cyRequired - (rc.bottom - rc.top);
		if( cyScroll <= 0 && !m_bScrollProcess) {
			m_pVerticalScrollBar->SetVisible(false);
			m_pVerticalScrollBar->SetScrollPos(0);
			m_pVerticalScrollBar->SetScrollRange(0);
			SetPos(m_rcItem);
		}
		else
		{
			RECT rcScrollBarPos = { rc.right, rc.top, rc.right + m_pVerticalScrollBar->GetFixedWidth(), rc.bottom };
			m_pVerticalScrollBar->SetPos(rcScrollBarPos);

			if( m_pVerticalScrollBar->GetScrollRange() != cyScroll ) {
				int iScrollPos = m_pVerticalScrollBar->GetScrollPos();
				m_pVerticalScrollBar->SetScrollRange(::abs(cyScroll));
				if( m_pVerticalScrollBar->GetScrollRange() == 0 ) {
					m_pVerticalScrollBar->SetVisible(false);
					m_pVerticalScrollBar->SetScrollPos(0);
				}
				if( iScrollPos > m_pVerticalScrollBar->GetScrollPos() ) {
					SetPos(m_rcItem);
				}
			}
		}
	}
很明显，cxRequired根本没有用到。

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

		if( m_pHorizontalScrollBar != NULL && m_pHorizontalScrollBar->IsVisible() ) {
			RECT rcScrollBarPos = { rc.left, rc.bottom, rc.right, rc.bottom + m_pHorizontalScrollBar->GetFixedHeight()};
			m_pHorizontalScrollBar->SetPos(rcScrollBarPos);
		}
于是，我们需要仿照设置竖向滚动条的方式，来设置横向滚动条： 

void CContainerUI::ProcessScrollBar(RECT rc, int cxRequired, int cyRequired)
{
	while(m_pHorizontalScrollBar)
	{
		if (cxRequired > rc.right - rc.left && !m_pHorizontalScrollBar->IsVisible())
		{
			m_pHorizontalScrollBar->SetVisible(true);
			m_pHorizontalScrollBar->SetScrollRange(cxRequired - (rc.right - rc.left));
			m_pHorizontalScrollBar->SetScrollPos(0);
			m_bScrollProcess = true;
			SetPos(m_rcItem);
			m_bScrollProcess = false;
			break;
		}

		if( !m_pHorizontalScrollBar->IsVisible() ) break;

		int cxScroll = cxRequired - (rc.right - rc.left);
		if (cxScroll <= 0 && !m_bScrollProcess)
		{
			m_pHorizontalScrollBar->SetVisible(false);
			m_pHorizontalScrollBar->SetScrollPos(0);
			m_pHorizontalScrollBar->SetScrollRange(0);
			SetPos(m_rcItem);
		}
		else
		{
			RECT rcScrollBarPos = { rc.left, rc.bottom, rc.right, rc.bottom + m_pHorizontalScrollBar->GetFixedHeight() };
			m_pHorizontalScrollBar->SetPos(rcScrollBarPos);

			if( m_pHorizontalScrollBar->GetScrollRange() != cxScroll ) {
				int iScrollPos = m_pHorizontalScrollBar->GetScrollPos();
				m_pHorizontalScrollBar->SetScrollRange(::abs(cxScroll));
				if( m_pHorizontalScrollBar->GetScrollRange() == 0 ) {
					m_pHorizontalScrollBar->SetVisible(false);
					m_pHorizontalScrollBar->SetScrollPos(0);
				}
				if( iScrollPos > m_pHorizontalScrollBar->GetScrollPos() ) {
					SetPos(m_rcItem);
				}
			}
		}
		break;
	}

	while(m_pVerticalScrollBar)
	{
		if( cyRequired > rc.bottom - rc.top && !m_pVerticalScrollBar->IsVisible() ) {
			m_pVerticalScrollBar->SetVisible(true);
			m_pVerticalScrollBar->SetScrollRange(cyRequired - (rc.bottom - rc.top));
			m_pVerticalScrollBar->SetScrollPos(0);
			m_bScrollProcess = true;
			SetPos(m_rcItem);
			m_bScrollProcess = false;
			break;
		}
		// No scrollbar required
		if( !m_pVerticalScrollBar->IsVisible() ) break;

		// Scroll not needed anymore?
		int cyScroll = cyRequired - (rc.bottom - rc.top);
		if( cyScroll <= 0 && !m_bScrollProcess) {
			m_pVerticalScrollBar->SetVisible(false);
			m_pVerticalScrollBar->SetScrollPos(0);
			m_pVerticalScrollBar->SetScrollRange(0);
			SetPos(m_rcItem);
		}
		else
		{
			RECT rcScrollBarPos = { rc.right, rc.top, rc.right + m_pVerticalScrollBar->GetFixedWidth(), rc.bottom };
			m_pVerticalScrollBar->SetPos(rcScrollBarPos);

			if( m_pVerticalScrollBar->GetScrollRange() != cyScroll ) {
				int iScrollPos = m_pVerticalScrollBar->GetScrollPos();
				m_pVerticalScrollBar->SetScrollRange(::abs(cyScroll));
				if( m_pVerticalScrollBar->GetScrollRange() == 0 ) {
					m_pVerticalScrollBar->SetVisible(false);
					m_pVerticalScrollBar->SetScrollPos(0);
				}
				if( iScrollPos > m_pVerticalScrollBar->GetScrollPos() ) {
					SetPos(m_rcItem);
				}
			}
		}
		break;
	}
}

看看效果

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


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

damingg
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
duilib中滚动条的bug
Cyd520608的博客
07-06 606
1、 这是测试的xml文件。图标都是简单的，就 <?xml version="1.0" encoding="utf-8" standalone="yes" ?> <Window size="480,360" sizebox="0,0,0,0" caption="0,0,0,70" mininfo="480,360" roundcorner="15,15" > <Default name="VScrollBar" value="button1normalimage=&
duilib入门和xml培训 布局案例
10-06
这个"duilib入门和xml培训 布局案例"的压缩包文件显然是为了帮助初学者理解和掌握如何使用Duilib库，特别是通过XML来设置和管理用户界面布局。 Duilib的核心在于提供一套强大的界面元素，如按钮、文本框、列表视图...
【Duilib基础控件】滚动条CScrollBarUI设置
beibaoke910的专栏
05-09 1184
2.滚动条长度/显示区域的长度= 显示区域的长度/所有显示内容的长度。1.当要显示的内容不大于显示区域，这时候不需要显示滚动条。二、duilib中的CScrollBarUI。一、关于滚动条的一些说明。
duilib 小控件 之 滑动条
清流弯弯
05-08 1598
1 滚动条 Slider属性 <Slider parent="Progress" notifies="暂时不写" > <Attribute name="thumbnormalimage" default="" type="STRING" comment="拖动滑块普通状态图片"/> <Attribute name="thumbhotimag...
duilib问题解决：滚动条不见了
大星星的专栏
03-14 1791
如图，运行后RichEdit的滚动条显示如下： 滚动条的属性设置是在Window节点下设置的，无论在xml里怎么样设置都不行： &lt;Default name="VScrollBar" value="button1normalimage=&amp;quot;file=&amp;apos;scrollbar.bmp&amp;apos; source=&amp;apos;0,90,16,106&a...
duilib让不同的容器使用不同的滚动条样式
a539284554的博客
12-29 531
装载请说明原出处，谢谢~~：http://blog.csdn.net/zhuhongshu/article/details/42240569 以前在给一个容器设置横纵向的滚动条时，一直是通过设置xml的Default标签来完成的，但是这样做有个很大的缺点就是，这个窗体里面的所有滚动条的样式只有一种。有些情况下需要为不同容器设置不同的滚动条样式。 ...
duilib IE去边框和滚动条
10-23
我在alberl的demo中加入了IE浏览器去掉边框和滚动条的代码，只是演示，代码很不规范，我new的对象也没有去delete。明白使用方法后请自己重写代码！！切记 2014.10.23 Redrain
Duilib中 ListItem布局切换效果实现
04-09
总结来说，实现Duilib中ListItem布局切换效果需要理解ListView和ListItem的使用，熟练掌握事件处理机制，以及灵活运用样式和动画技术。通过以上步骤和技巧，你可以创建出类似QQ好友列表那样交互丰富的用户界面。在...
duilib中嵌入cef3， 并和js交互
07-28
首先，`duilib`是一个基于Windows API的UI库，提供了一套灵活且高效的控件和布局机制，用于构建美观的桌面应用程序。它的特点是轻量级、易于学习和使用，且支持自定义控件，这使得它成为许多开发者的首选。 另一...
duilib文字水平滚动控件
06-01
对duilib原生控件label进行扩展支持文字的水平滚动，可通过speed属性控制滚动速度
在RichEdit中添加文本框控件，用滚动条控制上下翻阅
06-01
在RichEdit中添加文本框控件，用滚动条控制上下翻阅
DuiLib界面库滚动条拖动注意事项
litx的博客
06-13 2152
DuiLib界面库滚动条拖动
关于duilib在布局(比如VerticalLayout)中使用滑动条时的某个坑
weixin_45574485的博客
11-27 324
当在UI中采用VerticalLayout布局，放多个控件时，让滑动条滑动到底部，某些控件可能不会显示出来。原因是给VerticalLayout布局设置了height属性，去掉该属性就好了。
Duilib 中滚动条自动滚动到底的方法
Troy的专栏
01-10 4786
Duilib 中滚动条自动滚动到底的方法在使用Duilib开客户端过程中，有些功能是需要操作滚动来配合实现的，例如向List增加一条数据并显示出这条数据、RichEdit增加文字并自动滚动到底部等：List滚动条操作的方法有：LineDown、PageDown、EndDown等，在没有新增数据的时候，以上方法都能满足需求。新增数据以后，需要立即滚动到底部，这几个方法就无能为力了。这是就需要最原始的S
Duilib中设定滚动条的宽度
linjingtu的博客
06-13 1338
Duilib中的滚动条主要在UIScrollBar.h和UIScrollBar.cpp这两个文件中，对于滚动条的宽度都是设为默认的16.如果想要直接暴力更改滚动条宽度的话，可以直接修改宏定义在构造函数里面 enum { DEFAULT_SCROLLBAR_SIZE = 10, DEFAULT_TIMERID = 10, }; 将DEFAULT_SCROLLBAR_...
duilib CListUI滚动条，随插入记录数据，自动将滚动条，滚到底部
bible521125的专栏
09-26 892
SIZE szScrollPos; szScrollPos = pList->GetScrollPos(); szScrollPos.cy = pList->GetScrollRange().cy; // 关键点 == pList->SetScrollPos(szScrollPos); 參照：https://blog.csdn.net/fl...
duilib设置滚动条自动滚动到底
Betterc5的博客
01-10 973
控件属性中添加 vscrollbar="true" autovscroll="true" 分别是弃用竖向滚动条，是否随输入竖向滚动
duilib 滚动条不能拖动 问题处理
学习并记录
05-10 2162
遇到过很多次群里朋友问：为什么滚动条不能拖动，点击两端的按钮可以滚动，通过鼠标滚轮也可以滚动，就是鼠标拖动时拖不动？ 这是个提问次数较高的问题。 下面的内容只针对可能的原因中的一个，也是最可能的原因。 因为通过鼠标拖动滚动条，实际内部用到了定时器，具体有兴趣的可以查看duilib的源码。我们的程序在处理时常常也会用到WM_TIMER消息，通过拦截WM_TIMER消息来做一些定时器处理，不能拖...
duilib中的list控件和ListContainerElement控件如何使用
最新发布
07-14
在 Duilib 中，List 控件用于显示一个垂直滚动的列表，而 ListContainerElement 控件则用于作为 List 控件中的每个元素。下面是它们的基本使用方法： 1. 创建 List 控件： ```cpp CListUI* pList = new CListUI; pList->Create(pParent, _T("list"), UI_WNDSTYLE_CHILD | UI_WNDSTYLE_VISIBLE, 0); ``` 2. 创建 ListContainerElement 元素，并添加到 List 控件中： ```cpp CListContainerElementUI* pElement = new CListContainerElementUI; pElement->SetFixedHeight(50); // 设置元素的固定高度 pElement->SetUserData(userData); // 可以使用 SetUserData 存储自定义数据 pList->Add(pElement); // 将元素添加到 List 控件中 ``` 3. 在 ListContainerElement 元素中添加子控件： ```cpp // 创建子控件 CLabelUI* pLabel = new CLabelUI; pLabel->SetText(_T("Item Text")); pLabel->SetTextColor(0xFF000000); pLabel->SetBkColor(0xFFFFFFFF); // 将子控件添加到 ListContainerElement 元素中 pElement->Add(pLabel); ``` 通过上述步骤，你可以创建一个包含多个 ListContainerElement 元素的 List 控件，并在每个元素中添加不同的子控件来展示列表内容。你可以根据需要设置每个元素的高度、样式、数据等。 注意：以上示例代码是基于 C++ 和 Duilib 框架的，具体的使用方式和代码可能会有所不同，你可以根据自己的实际情况进行调整。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值