(翻译)第十七回 JavaFX2.0 滚动窗Scroll Pane

简介: 原文地址http://download.oracle.com/javafx/2.0/ui_controls/scrollpane.htm     滚动窗为UI元素提供了一个可以滚动查看的视图。

原文地址http://download.oracle.com/javafx/2.0/ui_controls/scrollpane.htm

 

 

滚动窗为UI元素提供了一个可以滚动查看的视图。该控件让用户可以通过移动视口或者滚动条来查看。Figure 11-1 是一个添加了图片的默认设置的滚动窗。

创建Scroll Pane

Example 11-1 演示了如何在应用中创建滚动窗。

Example 11-1 Using a Scroll Pane to View an Image

Image roses = new Image(getClass().getResourceAsStream("roses.jpg"));
ScrollPane sp = new ScrollPane();
sp.setNode(new ImageView(roses));

setNode 方法定义了滚动窗的结点是什么内容,可以只指定一个结点。要创建具有多个组件的滚动窗,得用布局容器或者Group类。可以为 setPannable 方法设置true值,这样当点击和移动鼠标时能预览图像,滚动条的位置也会相应改变。

为Scroll Pane设置滚动条策略

ScrollPane类提供了一种策略来决定何时显示滚动条:总是、从不、需要时( always, never,needed)。分别使用 setHbarPolicysetVbarPolicy 方法为水平滚动条和垂直滚动条指定策略。这样,Example 11-2 中的垂直滚动条会一直显示,而水平的不会显示。

 

Example 11-2 Setting the Horizontal and Vertical Scroll Bar Policies

sp.setHbarPolicy(ScrollBarPolicy.NEVER);
sp.setVbarPolicy(ScrollBarPolicy.ALWAYS);

 

结果是只能垂直地滚动图片,见 Figure 11-2 .

Figure 11-2 Disabling the Horizontal Scroll Bar

Description of Figure 11-2 follows
Description of "Figure 11-2 Disabling the Horizontal Scroll Bar "

改变Scroll Pane中组件的大小

设计UI接口时可能需要能够改变组件的大小已让它们适合滚动窗的宽和高。为 setFitToWidthsetFitToHeight 方法设置true 值来匹配特定的方向。

Figure 11-3 中的滚动窗包含单选按钮、文本框和密码框。这些内容的大小超过了滚动窗预先定义的尺寸,所以垂直滚动条显示了出来。然而,由于setFitToWidth 方法被设为true,视窗宽度会伸缩使水平方向无滚动条。

 

Figure 11-3 Fitting the Width of the Scroll Pane

The content of the scroll pane fits its width.
Description of "Figure 11-3 Fitting the Width of the Scroll Pane"

 

默认FIT_TO_WIDTHFIT_TO_HEIGHT 属性都是false,可改变大小的内容也保持原始大小。从上面代码移除 setFitToWidth 方法后,显示如Figure 11-4 .

Figure 11-4 Default Properties for Fitting the Content

Description of Figure 11-4 follows
Description of "Figure 11-4 Default Properties for Fitting the Content"

ScrollPane 类可以取回和设置内容在水平和垂直方向的当前、最小、最大值。学习怎么使用吧

使用Scroll Pane的样例程序

Example 11-3 使用滚动窗显示一个带有图片的垂直盒子。ScrollPane 类的VVALUE属性帮助辨识当然显示的图片并显示它的名称。

 

Example 11-3 Using a Scroll Pane to View Images

package scrollpanesample;
 
import javafx.application.Application;
import javafx.beans.value.ChangeListener;
import javafx.beans.value.ObservableValue;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.control.ScrollPane;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.Priority;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
 
public class Main extends Application {
 
    final ScrollPane sp = new ScrollPane();
    final Image[] images = new Image[5];
    final ImageView[] pics = new ImageView[5];
    final VBox vb = new VBox();
    final Label fileName = new Label();
    final String [] imageNames = new String [] {"fw1.jpg", "fw2.jpg",
        "fw3.jpg", "fw4.jpg", "fw5.jpg"};
 
    @Override
    public void start(Stage stage) {
        VBox box = new VBox();
        Scene scene = new Scene(box, 180, 180);
        stage.setScene(scene);
        stage.setTitle("Scroll Pane");
        box.getChildren().addAll(sp, fileName);
        VBox.setVgrow(sp, Priority.ALWAYS);
 
        fileName.setLayoutX(30);
        fileName.setLayoutY(160);
 
        for (int i = 0; i < 5; i++) {
            images[i] = new Image(getClass().getResourceAsStream(imageNames[i]));
            pics[i] = new ImageView(images[i]);
            pics[i].setFitWidth(100);
            pics[i].setPreserveRatio(true);
            vb.getChildren().add(pics[i]);
        }
 
        sp.setVmax(440);
        sp.setPrefSize(115, 150);
        sp.setContent(vb);
        sp.vvalueProperty().addListener(new ChangeListener<Number>() {
            public void changed(ObservableValue<? extends Number> ov,
                Number old_val, Number new_val) {
                    fileName.setText(imageNames[(new_val.intValue() - 1)/100]);
            }
        });
        stage.show();
    }
 
    public static void main(String[] args) {
        launch(args);
    }
}

 

 Figure 11-5 是编译并运行的效果。

Figure 11-5 Scrolling Images

A scroll pane with the images
Description of "Figure 11-5 Scrolling Images"

垂直滚动条的最大值等于垂直盒子的高度。 Example 11-4 中的代码块显示了当前显示图片的名称。

 

Example 11-4 Tracking the Change of the Scroll Pane's Vertical Value

sp.vvalueProperty().addListener(new ChangeListener<Number>() {
    public void changed(ObservableValue<? extends Number> ov,
        Number old_val, Number new_val) {
            fileName.setText(imageNames[(new_val.intValue() - 1)/100]);
        }
});

ImageView对象限制了图片高度是100点。所以, new_val.intValue() - 1 除以100的结果给出了当前图片的索引。

可以在应用中改变水平滚动条的最小值和最大值来动态更新用户接口。

目录
相关文章
|
2月前
element-plus:el-Dialog对话框组件垂直居中、禁止屏幕滚动、使用内滚动
element-plus:el-Dialog对话框组件垂直居中、禁止屏幕滚动、使用内滚动
|
4月前
|
JavaScript
【经典】原生JS实现“用鼠标拖拽(drag)内容DIV”,滚动条对应同步滚动
【经典】原生JS实现“用鼠标拖拽(drag)内容DIV”,滚动条对应同步滚动
|
前端开发
使用scroll-view实现一个滑动列表
使用scroll-view实现一个滑动列表
148 1
使用scroll-view实现一个滑动列表
|
Dart 开发者
【Flutter】底部导航栏页面框架 ( BottomNavigationBar 底部导航栏 | PageView 滑动页面 | 底部导航与滑动页面关联操作 )(二)
【Flutter】底部导航栏页面框架 ( BottomNavigationBar 底部导航栏 | PageView 滑动页面 | 底部导航与滑动页面关联操作 )(二)
132 0
【Flutter】底部导航栏页面框架 ( BottomNavigationBar 底部导航栏 | PageView 滑动页面 | 底部导航与滑动页面关联操作 )(二)
如何在 Flutter 中使 Expanded 中的文本可滚动
如何在 Flutter 中使 Expanded 中的文本可滚动
100 0
2-VIII--ViewPager滑动监听与自定义滑动特效
零、前言 [1]. 使用上文项目:1-VIII--ViewPager的基本使用 [2].对ViewPager的addOnPageChangeListener三个回调方法分析 [3].
1229 0
tablayout支持改变选中文字大小,支持左右滑动,支持viewpager,支持三角可移动指示器
TabLayout [简书地址] (https://www.jianshu.com/p/2c3f868266e8) 基于大神的FlycoTabLayout 传送地址和基本用法 用法和属性和这个库一样 效果图如下 Gif_20180828_142709.
2454 0
|
前端开发 安全
DevExpress Carousel 设置水平滑动列表
DevExpress中Carousel控件的应用 Carousel,直译为旋转木马,即旋转视图,可以做为数据的展示或者菜单项。   要实现触摸左右滑动的效果,其实是比较容易的,直接在CarouselPanel上实现MouseDown/MouseUp事件,在后台添加逻辑,判断是否产生了位置移动,从而控制面板向左或者向右移动子项。
1247 0
|
Android开发 开发者
Android自底部平滑向上滑出面板的AndroidSlidingUpPanel
 Android自底部平滑向上滑出面板的AndroidSlidingUpPanel AndroidSlidingUpPanel是github上的一个第三方开源项目,项目主页:https://github.com/umano/AndroidSlidingUpPanel  ,AndroidSlidingUpPanel实现了一个功能:当用户手指往上滑的时候,底部平滑的滑出一个面板,这个面板可以由开发者作为一个普通布局使用。
1426 0