(翻译)第十七回 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月前
|
数据安全/隐私保护 开发者
六、ArkTS 常用组件-按钮(Button)/切换按钮(Toggle)/文本输出(TextInput)
`Button` 组件是 HarmonyOS 应用开发中的基本组件之一,主要用于响应用户的点击操作。它支持两种使用方式:不包含子组件和包含子组件。不包含子组件时,`Button` 通过 `label` 属性设置按钮上的文字,同时提供 `options` 参数来配置按钮类型和点击效果;包含子组件的方式则允许更灵活的内容展示,如图片或复杂布局,此时无需设置 `label`。此外,`Button` 组件还提供了设置背景颜色、边框圆角等样式的方法,以及绑定点击事件的功能,使开发者能够轻松实现丰富的交互体验。
84 0
六、ArkTS 常用组件-按钮(Button)/切换按钮(Toggle)/文本输出(TextInput)
|
7月前
Element UI【级联选择器】el-cascader 获取选中内容的 label 数据,鼠标悬浮显示超长内容
Element UI【级联选择器】el-cascader 获取选中内容的 label 数据,鼠标悬浮显示超长内容
882 3
|
9月前
element-plus:el-Dialog对话框组件垂直居中、禁止屏幕滚动、使用内滚动
element-plus:el-Dialog对话框组件垂直居中、禁止屏幕滚动、使用内滚动
|
9月前
el-carousel和el-image组合实现swiper左右滑动图片,点击某张图片放大预览的效果
el-carousel和el-image组合实现swiper左右滑动图片,点击某张图片放大预览的效果
element-ui框架的el-dialog弹出框被遮罩层挡住了/el-drawer....会生成v-model元素的组件被遮罩层挡住
element-ui框架的el-dialog弹出框被遮罩层挡住了/el-drawer....会生成v-model元素的组件被遮罩层挡住
558 1
|
前端开发
【CSS动画04--input输入动画】
【CSS动画04--input输入动画】
element-ui框架的el-dialog弹出框被遮罩层遮挡问题
element-ui框架的el-dialog弹出框被遮罩层遮挡问题
636 0
|
Web App开发 前端开发
去掉谷歌默认的input textarea边框样式
谷歌浏览器Chrome基于WebKit开源浏览器引擎,自然能够通过相关的一切方法自定义设置浏览器的默认状态。谷歌浏览器Chrome安装之后,大家应该都留意到所有的表单都会添加黄色边框特效。在某些时候这些特效还是很不错的,但是当网站本身就已经对于表单样式有一定的设计时,这种默认表单样式就会让人觉得套样了!
186 0
|
存储 iOS开发
SwiftUI极简教程15:使用Toggle开关、Picker选择器Stepper步进器构建一个Form表单
SwiftUI极简教程15:使用Toggle开关、Picker选择器Stepper步进器构建一个Form表单
878 0
SwiftUI极简教程15:使用Toggle开关、Picker选择器Stepper步进器构建一个Form表单
SwiftUI—Button按钮控件的使用
SwiftUI—Button按钮控件的使用
536 0
SwiftUI—Button按钮控件的使用

热门文章

最新文章