You are on page 1of 4

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().addLis
tener( 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"

You might also like