滚动视图控件 (SScrollView)¶
滚动视图是一个基础的容器控件,它提供了内容滚动的功能。当内容超出视图区域时,会自动显示滚动条,使用户可以通过滚动来查看所有内容。它是很多其他控件的基类,如列表框、树形视图等。
基本信息¶
- 类名:
SScrollView
- 控件标签:
scrollview
- 基类:
SPanel
- 功能:提供可滚动的内容容器
属性说明¶
基本属性¶
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
viewSize | string | - | 视图大小 |
scrollBarSize | int | - | 滚动条尺寸 |
滚动条属性¶
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
verticalScrollBar | bool | - | 是否显示垂直滚动条(0-不显示,1-显示) |
horizontalScrollBar | bool | - | 是否显示水平滚动条(0-不显示,1-显示) |
autoHide | bool | - | 滚动条是否自动隐藏(0-不自动隐藏,1-自动隐藏) |
sbSkin | string | - | 滚动条皮肤 |
使用示例¶
基本滚动视图¶
<scrollview name="svBasic"
pos="10,10,310,210"
viewSize="-1,-1"
verticalScrollBar="1"
horizontalScrollBar="0">
<window pos="0,0,-0,-0"
layout="vbox"
padding="10,10,10,10">
<text text="滚动内容1"/>
<text text="滚动内容2"/>
<!-- 更多内容 -->
</window>
</scrollview>
自定义样式滚动视图¶
<scrollview name="svCustom"
pos="10,220,310,420"
viewSize="-1,-1"
scrollBarSize="16"
verticalScrollBar="1"
horizontalScrollBar="1"
autoHide="1"
sbSkin="skin_scrollbar">
<window pos="0,0,800,600">
<!-- 大尺寸内容 -->
<text pos="10,10,790,590" text="大尺寸内容区域"/>
</window>
</scrollview>
带水平滚动的滚动视图¶
<scrollview name="svHorizontal"
pos="320,10,620,210"
viewSize="-1,-1"
verticalScrollBar="0"
horizontalScrollBar="1">
<window pos="0,0,1000,190">
<!-- 宽内容 -->
<text pos="10,10,990,180" text="宽内容区域"/>
</window>
</scrollview>
不自动隐藏滚动条的滚动视图¶
<scrollview name="svNoAutoHide"
pos="320,220,620,420"
viewSize="-1,-1"
verticalScrollBar="1"
horizontalScrollBar="0"
autoHide="0">
<window pos="0,0,-0,-0" layout="vbox">
<text text="内容1"/>
<text text="内容2"/>
<!-- 更多内容 -->
</window>
</scrollview>
事件处理¶
滚动视图控件支持以下事件:
事件名 | EventID | 说明 |
---|---|---|
EVT_SCROLL | EventScroll::EventID | 滚动事件 |
EVT_MOUSE_WHEEL | EventMouse::EventID | 鼠标滚轮事件 |
// 事件处理示例
EVENT_MAP_BEGIN()
EVENT_NAME_HANDLER(L"svBasic", EventScroll::EventID, OnScroll)
EVENT_MAP_END()
void OnScroll(IEvtArgs *pEvt)
{
EventScroll *pRealEvt = sobj_cast<EventScroll>(pEvt);
int nScrollCode = pRealEvt->nSbCode;
int nPos = pRealEvt->nPos;
// 处理滚动事件
}
代码操作¶
// 查找滚动视图控件
SScrollView *pScrollView = FindChildByName2<SScrollView>(L"svBasic");
// 滚动到指定位置
pScrollView->ScrollTo(CPoint(0, 100));
// 获取视图大小
CSize viewSize = pScrollView->GetViewSize();
// 获取滚动范围
CRect rcScrollRange = pScrollView->GetScrollRange();
// 设置视图大小
pScrollView->SetAttribute(L"viewSize", L"800,600");
// 显示/隐藏滚动条
pScrollView->SetAttribute(L"verticalScrollBar", L"1");
pScrollView->SetAttribute(L"horizontalScrollBar", L"0");
样式定制¶
基本样式¶
<style>
<class name="scrollStyle"
scrollBarSize="12"
autoHide="1"
sbSkin="scrollbar_style"/>
</style>
<scrollview class="scrollStyle"/>
自定义滚动条¶
<scrollview name="svCustomScroll"
sbSkin="custom_sb"
sbArrowSkin="custom_arrow"
sbRailSkin="custom_rail"
sbThumbSkin="custom_thumb"/>
最佳实践¶
- 滚动条控制:根据内容特点选择合适的 verticalScrollBar 和 horizontalScrollBar 设置
- 自动隐藏:通过 autoHide 属性优化界面空间利用
- 尺寸设置:合理设置 scrollBarSize 和 viewSize 以适应内容
- 皮肤定制:使用 sbSkin 属性定制滚动条外观
常见问题¶
Q: 滚动条不显示怎么办?¶
A: 检查 verticalScrollBar 或 horizontalScrollBar 是否设置为 1,并确认内容超出视图范围。
Q: 滚动条一直显示怎么办?¶
A: 设置 autoHide 为 1 以启用自动隐藏功能。
Q: 内容显示不完整怎么办?¶
A: 检查 viewSize 是否正确设置,确保内容区域足够大。
相关控件¶
- 滚动条(SScrollBar) - 滚动条控件
- 列表框(SListBox) - 基于滚动视图的列表控件
- 树控件(STreeCtrl) - 基于滚动视图的树形控件