Skip to content

滚动视图控件 (SScrollView)

Warning

The current page still doesn't have a translation for this language.

You can read it through google translate.

滚动视图是一个基础的容器控件，它提供了内容滚动的功能。当内容超出视图区域时，会自动显示滚动条，使用户可以通过滚动来查看所有内容。它是很多其他控件的基类，如列表框、树形视图等。

基本信息

  • 类名：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"/>

最佳实践

  1. 滚动条控制：根据内容特点选择合适的 verticalScrollBar 和 horizontalScrollBar 设置
  2. 自动隐藏：通过 autoHide 属性优化界面空间利用
  3. 尺寸设置：合理设置 scrollBarSize 和 viewSize 以适应内容
  4. 皮肤定制：使用 sbSkin 属性定制滚动条外观

常见问题

Q: 滚动条不显示怎么办？

A: 检查 verticalScrollBar 或 horizontalScrollBar 是否设置为 1，并确认内容超出视图范围。

Q: 滚动条一直显示怎么办？

A: 设置 autoHide 为 1 以启用自动隐藏功能。

Q: 内容显示不完整怎么办？

A: 检查 viewSize 是否正确设置，确保内容区域足够大。

相关控件