写在前面

这是PB案例学习笔记系列文章的第8篇，该系列文章适合具有一定PB基础的读者。

通过一个个由浅入深的编程实战案例学习，提高编程技巧，以保证小伙伴们能应付公司的各种开发需求。

文章中设计到的源码，小凡都上传到了gitee代码仓库https://gitee.com/xiezhr/pb-project-example.git

需要源代码的小伙伴们可以自行下载查看，后续文章涉及到的案例代码也都会提交到这个仓库【pb-project-example】

如果对小伙伴有所帮助，希望能给一个小星星⭐支持一下小凡。

一、小目标

通过本篇文章的学习，我们将掌握怎么使用PB提供的滚动条控件。

本示例中，我们通过控制滚动条来实现图框中不同颜色的显示

二、滚动条简介

当用户需要指定连续值而进行滑动控制时，就需要用到滚动条。而在PB中滚动条一共有两种，① HScrollBar ② VScrollBar。

我们只需要要指定滚动条的MinPosition、MaxPosition 和Position就可以来控制滚动条

三、创建程序的基本框架

① 创建examplework 工作区

② 创建exampleapp 应用

③ 创建w_main 窗口，Title 设置为使用滚动条

以上步骤如果忘记了的小伙伴可以翻一翻第一篇文章

④ 创建控件，进行页面布局

向窗口中添加1个GroupBox 控件、4个StaticText控件和三个HScrollBar 滚动条。

控件名依次为 gb_1、st_1、st_2、st_3、st_4、hsb_r、hsb_g和hsb_b

具体布局及属性设置如下

控件名称	属性	值
gb_1	Text	颜色控制
st_1	Text	红
st_2	Text	绿
st_3	Text	蓝
st_4	Border	True
hsb_r	MinPosition	MaxPosition
hsb_g	MinPosition	MaxPosition
hsb_b	MinPosition	MaxPosition

四、编写代码

① 设置实例变量

在下图视窗下设置实例变量

int	ii_r, ii_g, ii_b

② 在滚动条控件hsb_r 的lineleft 事件中输入如下代码

lineleft 事件是在用户点击滚动条上的左箭头按钮时触发的。用于处理用户向左滚动滚动条时的操作。

if ii_r<10 then
	ii_r = 0
else
    // 每次向左滚动滚动条时，实例变量ii_r 减10
	ii_r = ii_r - 10
end if
//设置滚动条的位置    
this.position = ii_r
//设置控件st_4 背景颜色
st_4.backcolor = RGB(ii_r,ii_g,ii_b)

③ 同理在滚动条控件hsb_r 的lineright 事件中添加如下代码

lineright 事件是在用户点击滚动条上的右箭头按钮时触发的。用于处理用户向右滚动滚动条时的操作。

if ii_r>245 then
	ii_r =255
else
	ii_r = ii_r + 10
end if 
this.position = ii_r
st_4.backcolor = RGB(ii_r,ii_g,ii_b)

④ 在滚动条控件hsb_r 的pageleft 事件中输入如下代码

pageleft 事件在左翻页的时候触发

if ii_r<50 then
	ii_r = 0
else
	ii_r = ii_r - 50
end if
this.position = ii_r
st_4.backcolor = RGB(ii_r,ii_g,ii_b)

⑤ 同上在滚动条控件hsb_r 的pageright 事件中输入如下代码

pageright 事件在右翻页的时候触发

if ii_r>205 then
	ii_r = 255
else
	ii_r = ii_r + 50
end if
this.position = ii_r
st_4.backcolor = RGB(ii_r,ii_g,ii_b)

⑥ 在滚动条控件hsb_r 的moved事件中添加如下版本

moved 事件是在滚动条移动时触发。我们在该事件中设置滚动条位置和设置控件st_4 的背景颜色

ii_r = this.position
st_4.backcolor = RGB(ii_r,ii_g,ii_b)

⑦ 我们在控件hsb_g 和hsb_b 同样的事件（lineleft,lineright,pageleft,pagerigth,moved）中，添加同样的代码

⑧ 在开发界面左边的System Tree 窗口中双击exampleapp应用，在其Open事件中添加如下代码

open(w_main)

五、运行程序

运行程序后，我们就可以通过拉动滚动条配置出不同颜色