JavaFX UI控件教程（十）之Scroll Bar

翻译自   Scroll Bar

本章介绍如何使用滚动条控件创建可滚动窗格。

本ScrollBar类可以在应用程序中创建滚动窗格和意见。图9-1显示了滚动条的三个区域：拇指，右侧和左侧按钮（或向下和向上按钮）以及轨道。

图9-1滚动条的元素

 

创建滚动条

花点时间查看例9-1中的代码片段。

例9-1简单滚动条

ScrollBar sc = new ScrollBar（）; sc.setMin（0）; sc.setMax（100）; sc.setValue（50）;

的setMin和setMax方法定义由滚动条表示的最小值和最大值。当用户移动拇指时，滚动条的值会改变。在示例9-1中，值等于50，因此当应用程序启动时，拇指位于滚动条的中心。默认情况下，滚动条水平定向。但是，您可以使用该setOrientation方法设置垂直方向。

用户可以单击左或右按钮（垂直方向的向下或向上按钮）以单位增量滚动。该UNIT_INCREMENT属性指定单击按钮时滚动条的调整量。另一个选项是通过块增量在轨道内单击。该BLOCK_INCREMENT属性定义单击条形轨迹时滚动条的调整量。

在您的应用程序中，您可以使用多个滚动条之一滚动超出可用空间边界的图形内容。

 

在应用程序中使用滚动条

检查滚动条的运行情况。示例9-2中显示的应用程序实现了可滚动场景以查看图像。此应用程序的任务是使用户能够查看垂直框的内容，该内容比场景的高度更长。

例9-2滚动多个图像

import javafx.application.Application; import javafx.beans.value.ChangeListener; import javafx.beans.value.ObservableValue; import javafx.geometry.Orientation; import javafx.scene.Group; import javafx.scene.Scene; import javafx.scene.control.ScrollBar; import javafx.scene.effect.DropShadow; import javafx.scene.image.Image; import javafx.scene.image.ImageView; import javafx.scene.layout.VBox; import javafx.scene.paint.Color; import javafx.stage.Stage;public class Main extends Application {final ScrollBar sc = new ScrollBar();final Image[] images = new Image[5];final ImageView[] pics = new ImageView[5];final VBox vb = new VBox();DropShadow shadow = new DropShadow();@Overridepublic void start(Stage stage) {Group root = new Group();Scene scene = new Scene(root, 180, 180);scene.setFill(Color.BLACK);stage.setScene(scene);stage.setTitle("Scrollbar");root.getChildren().addAll(vb, sc);shadow.setColor(Color.GREY);shadow.setOffsetX(2);shadow.setOffsetY(2);vb.setLayoutX(5);vb.setSpacing(10);sc.setLayoutX(scene.getWidth()-sc.getWidth());sc.setMin(0);sc.setOrientation(Orientation.VERTICAL);sc.setPrefHeight(180);sc.setMax(360);for (int i = 0; i < 5; i++) {final Image image = images[i] =new Image(getClass().getResourceAsStream("fw" +(i+1)+ ".jpg"));final ImageView pic = pics[i] =new ImageView(images[i]);pic.setEffect(shadow);vb.getChildren().add(pics[i]);}sc.valueProperty().addListener(new ChangeListener<Number>() {public void changed(ObservableValue<? extends Number> ov,Number old_val, Number new_val) {vb.setLayoutY(-new_val.doubleValue());}});stage.show();}public static void main(String[] args) {launch(args);} }

代码的第一行添加了一个带有图像的垂直框和一个滚动条到场景。

Y当VALUE滚动条的属性发生变化时，垂直框的坐标会发生变化，因此每次移动滑块或单击按钮或轨道时，垂直框都会移动，如例9-3所示。

示例9-3实现垂直框的滚动

sc.valueProperty().addListener(new ChangeListener<Number>() {public void changed(ObservableValue<? extends Number> ov,Number old_val, Number new_val) {vb.setLayoutY(-new_val.doubleValue());} });

编译并运行此应用程序将生成如图9-2所示的输出。

图9-2滚动条示例

该应用程序显示了ScrollBar该类的一个典型用法。您还可以自定义此类以在场景中创建滚动区域。对于每个UI控件和每个节点，可以设置滚动条的样式以从默认实现更改其外观。

 

相关的API文档  

• ScrollBar

• JavaFX CSS规范

总结

以上是生活随笔为你收集整理的JavaFX UI控件教程（十）之Scroll Bar的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。