第54章  SCROLLBAR-滚动条控件

本期教程讲解STemWin支持的滚动条控件。

54. 1滚动条控件介绍

54. 2 官方DIALOG_Scrollbar实例

54. 3 使用官方GUIBulder建立单选按钮控件

54. 4 总结

54.1  滚动条控件介绍

滚动条用于滚动列表框或任何其他类型的窗口。它们可以水平 （如下所示）或垂直创建。

通常，滚动条将附加到现有窗口，例如下图所示的列表框：

设置皮肤后显示效果如下：

54.1.1 滚动条支持的通知代码

以下事件是滚动条作为WM_NOTIFY_PARENT消息的一部分发送给其父窗口的：

消息	描述
WM_NOTIFICATION_CLICKED	已单击滚动条。。
WM_NOTIFICATION_RELEASED	已释放滚动条。
WM_NOTIFICATION_SCROLLBAR_ADDED	滚动条刚刚被添加 （附加）至现有窗口。需要通知窗口，以便使其能初始化滚动条。
WM_NOTIFICATION_VALUE_CHANGED	滚动条的值可以通过移动缩略图或按下箭头按钮进行更改

54.1.2 滚动条支持的键盘反应

如果控件具有输入焦点，则它将对下列各键做出反

按键	反应
GUI_KEY_RIGHT	将滚动条的当前值增加1。
GUI_KEY_DOWN	将滚动条的当前值增加1。
GUI_KEY_PGDOWN	将滚动条的当前值增加1页。
GUI_KEY_LEFT	将滚动条的当前值减小1。
GUI_KEY_UP	将滚动条的当前值减小1。
GUI_KEY_PGUP	将滚动条的当前值减小1页。

54.2  官方WIDGET_Scrollbar实例

官方的这个实例很好的演示了scrollbar的使用，这个例子在模拟器中的位置：

源码如下（程序中进行了详细的注释）：

#include "GUI.h"

#include "SCROLLBAR.h"

#include "EDIT.h"

#include 

 

 

 

 

#define EDIT_MAX_X 10

#define EDIT_MAX_Y 3

 

 

static EDIT_Handle _aahEdit[EDIT_MAX_Y][EDIT_MAX_X];

static int _x,_y;  

 

 

static void _cbWindow(WM_MESSAGE *pMsg) {

  

  WM_SCROLL_STATE ScrollState;

 

  switch (pMsg->MsgId) {

  case WM_NOTIFY_PARENT:

      

  if (pMsg->Data.v == WM_NOTIFICATION_VALUE_CHANGED) {

  

      if (WM_GetId(pMsg->hWinSrc) == GUI_ID_HSCROLL) {

        WM_GetScrollState(pMsg->hWinSrc, &ScrollState);

        

if (_x != ScrollState.v) {

          int x, y;

          for (y = 0; y < EDIT_MAX_Y; y++) {

            for (x = 0; x < EDIT_MAX_X; x++) {

              WM_MoveWindow(_aahEdit[y][x], _x - ScrollState.v, 0);

            }

          }

          _x = ScrollState.v;

        }

      }

    }

    break;

  case WM_PAINT:

    GUI_SetBkColor(GUI_RED);

    GUI_Clear();

    break;

  default:

    WM_DefaultProc(pMsg);

  }

}

 

 

static void _DemoScrollbarMove(void) {

  int x, y;

  WM_HWIN hWindow;

  SCROLLBAR_Handle hScroll;

  

  GUI_SetBkColor(GUI_BLUE);

  GUI_Clear();

  GUI_SetColor(GUI_WHITE);

  GUI_SetFont(&GUI_Font24_ASCII);

  GUI_SetTextAlign(GUI_TA_HCENTER);

  GUI_DispStringAt("SCROLLBAR_Move - Sample", 160, 5);

  GUI_SetTextAlign(GUI_TA_LEFT);

  GUI_SetColor(0xFFFFFF);

  GUI_SetFont(&GUI_Font8x16);

 

  

  hWindow = WM_CreateWindow(50, 90, 220, 79, WM_CF_SHOW, &_cbWindow, 0);

 

  

  hScroll = SCROLLBAR_CreateAttached(hWindow, 0);

 

  

  SCROLLBAR_SetNumItems(hScroll, 48 * EDIT_MAX_X);

 

  

  SCROLLBAR_SetPageSize(hScroll, 220);

 

  

  for (y = 0; y < EDIT_MAX_Y; y++) {

    for (x = 0; x < EDIT_MAX_X; x++) {

 

      _aahEdit[y][x] = EDIT_CreateAsChild(x * 48, y * 22, 48, 22, 

                                        hWindow, 13, WM_CF_SHOW, 5);

      

      EDIT_SetTextAlign(_aahEdit[y][x], GUI_TA_RIGHT | GUI_TA_VCENTER);

      EDIT_SetFont(_aahEdit[y][x], &GUI_Font8x16);

 

  

      EDIT_SetDecMode(_aahEdit[y][x], ((y * EDIT_MAX_X) + x) * 100, -99999, +99999, 2, 0);

  }

  }

 

  while (1) {

    GUI_Exec();

    GUI_Delay(20);

  }

 

  

  WM_DeleteWindow(hWindow);

  GUI_Clear();

}

 

 

 

void MainTask(void) {

  GUI_Init();

  while(1) {

    _DemoScrollbarMove();

  }

}

实际显示效果如下：

54.3  使用官方GUIBulder建立单选按钮控件

这里用GUIBulder5.22建立一个如下的界面（分辨率480*272）：

框架窗口最右侧和最下面依附的两个滚动条是通过在框架窗口上面右击鼠标进行添加：

其它的两个水平和垂直滚动条直接添加即可，添加的时候默认是水平的滚动条，垂直的滚动条需要通过将水平滚动条按照如下方法进行设置（鼠标左键点击滚动条选中后，右击鼠标进行选择）：

将生成的代码直接复制到模拟器或者开发板上面运行，实际显示效果如下（生成的代码在本期教程配套的例子中）：

54.4  总结

本期教程主要是跟大家讲解了滚动条控件的基础知识。希望大家可以把本期教程中讲的这两个例子跑跑，然后自己设计一个相关的例子进行试验学习。教程中只是使用了部分的滚动条控件API，其它的API大家都可以试试。