（翻译）第十八回 JavaFX2.0 列表框ListView

原文地址http://download.oracle.com/javafx/2.0/ui_controls/list-view.htm

 

 

ListView类呈现一个可滚动的项目列表。

 Figure 12-1 展示了一个住宿类型列表。

 

Figure 12-1 Simple List View



Description of "Figure 12-1 Simple List View" 

 

可以通过

setItems

 方法定义项目来产生列表。也可以使用

setCellFactory

 方法为列表中项目创建一个视图。

创建List View

Example 12-1中的代码块实现了Figure 12-1 中带有

String

 类项目的列表。

Example 12-1 Creating a List View Control

ListView<String> list = new ListView<String>();
ObservableList<String> items =FXCollections.observableArrayList (
"Single", "Double", "Suite", "Family App");
list.setItems(items);

使用setPrefHeight

 

和setPrefWidth

 方法来改变列表视图控件的大小和高度。Example 12-2限制垂直列表具有100点宽度和70点高度，效果见Figure
12-2。

Example 12-2 Setting Height and Width for a List View

list.setPrefWidth(100);
list.setPrefHeight(70);

Figure 12-2 Resized Vertical List



Description of "Figure 12-2 Resized Vertical List" 

要将

ListView对象设置为水平方向的可以通过将方向属性设为

 

Orientation.HORIZONTAL

 ，这样做即可：

list.setOrientation(Orientation.HORIZONTAL)

 。 Figure
12-1 和Figure 12-3 中的水平列表具有相同的项目。

Figure 12-3 Horizontal List View Control



Description of "Figure 12-3 Horizontal List View Control" 

可以用下面的组合方法获得每个项目当前的状态：

getSelectionModel().selectedIndexProperty()

 – 返回当前被选中项目的索引。

getSelectionModel().selectedItemProperty()

 – 返回当前被选中项目。

getFocusModel().getFocusedIndex()

 – 返回当前有焦点的项目索引。

getFocusModel().getFocusedItem()

 – 返回当前有焦点的项目。

注意，选中的和有焦点的项目都是只读的，应用启动后是不能为项目指定这些属性的。

前面的代码样例讲解了怎么创建具有文本项目的列表。然而，列表视图控件可以包含

Node对象。

用数据产生List View

研究下面的代码学习怎么用细胞工厂（cell factory）产生列表项目。Example 12-3 中的应用创建了一个颜色模式列表。

Example 12-3 Creating a Cell Factory

import javafx.application.Application;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.scene.Scene;
import javafx.scene.control.ListCell;
import javafx.scene.control.ListView;
import javafx.scene.layout.Priority;
import javafx.scene.layout.VBox;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;
import javafx.util.Callback;

public class Main extends Application {

ListView<String> list = new ListView<String>();
ObservableList<String> data = FXCollections.observableArrayList(
"chocolate", "salmon", "gold", "coral", "darkorchid",
"darkgoldenrod", "lightsalmon", "black", "rosybrown", "blue",
"blueviolet", "brown");

@Override
public void start(Stage stage) {
VBox box = new VBox();
Scene scene = new Scene(box, 200, 200);
stage.setScene(scene);
stage.setTitle("ListViewSample");
box.getChildren().addAll(list);
VBox.setVgrow(list, Priority.ALWAYS);

list.setItems(data);

list.setCellFactory(new Callback<ListView<String>, ListCell<String>>() {
@Override public ListCell<String> call(ListView<String> list) {
return new ColorRectCell();
}
});

stage.show();
}

static class ColorRectCell extends ListCell<String> {
@Override
public void updateItem(String item, boolean empty) {
super.updateItem(item, empty);
Rectangle rect = new Rectangle(100, 20);
if (item != null) {
rect.setFill(Color.web(item));
setGraphic(rect);
}
}
}

public static void main(String[] args) {
launch(args);
}
}

细胞工厂产生了 

ListCell

 对象。每个细胞都关联一个单一的数据项目并显示列表中视图的一“行”。细胞呈现的内容通过

setGraphic方法可以包含其他控件、文本、形状、图像。该应用中，列表细胞放的是矩形。

 Figure 12-4 是该应用编译运行后产生的效果。

Figure 12-4 List of Color Patterns



Description of "Figure 12-4 List of Color Patterns" 

你可以滚动列表，选择或取消选择项目，也可以扩展应用来用颜色填充文本标签。

处理选中的List Item

按照 Example 12-4 修改应用的代码，以使其能处理特定项目被选中的事件。

Example 12-4 Processing Events for a List Item

import javafx.application.Application;
import javafx.beans.value.ChangeListener;
import javafx.beans.value.ObservableValue;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.control.ListCell;
import javafx.scene.control.ListView;
import javafx.scene.layout.Priority;
import javafx.scene.layout.VBox;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import javafx.scene.text.Font;
import javafx.stage.Stage;
import javafx.util.Callback;

public class Main extends Application {

ListView<String> list = new ListView<String>();
ObservableList<String> data = FXCollections.observableArrayList(
"chocolate", "salmon", "gold", "coral", "darkorchid",
"darkgoldenrod", "lightsalmon", "black", "rosybrown", "blue",
"blueviolet", "brown");
final Label label = new Label();

@Override
public void start(Stage stage) {
VBox box = new VBox();
Scene scene = new Scene(box, 200, 200);
stage.setScene(scene);
stage.setTitle("ListViewSample");
box.getChildren().addAll(list, label);
VBox.setVgrow(list, Priority.ALWAYS);

label.setLayoutX(10);
label.setLayoutY(115);
label.setFont(Font.font("Verdana", 20));

list.setItems(data);

list.setCellFactory(new Callback<ListView<String>, ListCell<String>>() {
@Override public ListCell<String> call(ListView<String> list) {
return new ColorRectCell();
}
});

list.getSelectionModel().selectedItemProperty().addListener(

new ChangeListener<String>() {

public void changed(ObservableValue<? extends String> ov,

String old_val, String new_val) {

label.setText(new_val);

label.setTextFill(Color.web(new_val));

}

});

stage.show();
}

static class ColorRectCell extends ListCell<String> {
@Override
public void updateItem(String item, boolean empty) {
super.updateItem(item, empty);
Rectangle rect = new Rectangle(100, 20);
if (item != null) {
rect.setFill(Color.web(item));
setGraphic(rect);
}
}
}

public static void main(String[] args) {
launch(args);
}
}

addListener方法调用后为

 

selectedItemProperty

 新建了一个

ChangeListener<String>

 对象来绑定选中项目的改变。比如说，深紫色项目被选中了，标签接收到了"darkorchid"标题并用相应的颜色填充。修改后应用的效果见Figure
12-5 .

Figure 12-5 Selecting a Dark Orchid Color Pattern



Description of "Figure 12-5 Selecting a Dark Orchid Color Pattern"