DOC-03-10 滚动条(Scroll Bar)

这一章介绍如何通过使用Scroll Bar组件来创建可以滚动的面板。

ScrollBar 类可以让你在应用程序中创建可滚动的面板和视图。图10-1显示了Scroll Bar的三个区域:滑块(Thumb),左右(或上下)按钮和滚动槽(Track)

10-1 Scroll Bar的元素

3-10-1 scrollbar

创建Scroll Bar

花时间看下代码片段例10-1

10-1 简单的Scroll Bar

其中setMinsetMax方法定义了Scroll Bar展示的最小值和最大值。当用户移动ThumbScroll Bar的值就会变化。例10-1中,值是50,所以当应用程序启动时,ThumbScroll Bar 的中间。Scroll Bar默认是水平朝向的。但是你可以通过setOrientation方法来设置其为垂直朝向。

用户点击左或者右按钮(垂直朝向时是上或者下)来滚动一个单位(Unit)UNIT_INCREMENT属性指定了当一个按钮被点击时Scroll Bar调整的量。另一种方式是点击Track来滚动一个块(block)BLOCK_INCREMENT属性定义了当Track被点击时Scroll Bar调整的量。

在你的应用程序中,你可以使用多种Scroll Bar中的一种来滚过超出可用空间边界的图像内容。

在应用程序中使用Scroll Bar

接下来我们在实际应用中来检验Scroll Bar。例10-2中展示的应用程序实现了一个可滚动的Scene来查看图像。这个应用程序的任务就是使用户可以查看比Scene还要高的VBox里的内容。

10-2 滚动多个图像

在前几行中添加了一个包含ImageVBox和一个Scroll BarScene中。

Scroll BarVALUE属性变化时,VBoxY坐标会相应的变化。因此当Thumb每次移动,或者按钮和Track被点击时,VBox都会移动,如例10-3所示。

10-3 为垂直Box实现滚动

编译和运行这个应用程序,执行结果如图10-2所示。

10-2 Scroll Bar样例

3-10-2 scroll-pics

这个应用程序展示了ScrollBar的一种典型应用。你可以定制这个类在Scene中创建一个滚动区域。Scroll Bar可以通过应用样式来改变其默认外观,每个UI组件和Node都是这样的。

相关API文档

    · ScrollBar

    · JavaFX CSS Specification

 

打赏一下
支付宝
微信
除非注明,博客文章均为原创,转载请标明文章地址
本文地址: http://www.javafxchina.net/blog/2015/04/doc03_scrollbar/
百度已收录