JavaFX实现ArrayList数据的上一页/下一页按钮切换展示

你的思路有点绕啦——用for循环遍历所有城市并重复创建UI组件是行不通的，这会导致最后只有最后一个城市的UI被显示，而且按钮事件里的循环变量i还会因为lambda的闭包特性引发索引越界问题。咱们换个思路：维护一个当前索引，通过按钮切换索引，然后根据索引更新UI显示就可以了。

核心问题分析 #

1. 循环创建重复UI：你的for循环里每次都新建GridPane、BorderPane、Scene和Stage，最后primaryStage只会绑定最后一次循环的场景，前面的都被覆盖了。
2. Lambda闭包的陷阱：next.setOnAction里引用的i是循环变量，lambda会捕获变量的引用，而不是当时的值，当循环结束后i等于cities.size()，点击按钮时就会抛出IndexOutOfBoundsException。
3. 分页逻辑缺失：没有维护当前显示的城市索引，自然没法切换前后页。

解决方案代码 #

咱们把UI组件只创建一次，用一个currentIndex变量跟踪当前显示的城市，再写一个专门的方法来更新UI内容：

// 初始化城市列表（你的这部分代码没问题）
City c1 = new City("Miami", "Florida", 33175, -80.4068, 25.7341);
City c2 = new City("Seattle", "Washington", 98109, -122.3476, 47.6339);
City c3 = new City("Levittown", "Pennsylvania", 19058, -75.1028, 40.3286);
City c4 = new City("Tampa", "Florida", 33625, -82.559, 28.0726);
City c5 = new City("Topeka", "Kansas", 66617, -95.6384, 39.1271);
ArrayList<City> cities = new ArrayList<>();
cities.add(c1);
cities.add(c2);
cities.add(c3);
cities.add(c4);
cities.add(c5);

// 维护当前显示的城市索引
int[] currentIndex = {0}; // 用数组是因为lambda里不能修改基本类型变量，或者用AtomicInteger也行

// 创建一次UI组件，不要在循环里重复创建
GridPane pane = new GridPane();
pane.setHgap(5);
pane.setVgap(5);
pane.setPadding(new Insets(25,25,25,25));

// 创建标签和文本框（只创建一次，后续更新内容即可）
Label cityLabel = new Label("City:");
TextField cityField = new TextField();
pane.add(cityLabel, 0, 1);
pane.add(cityField, 1, 1);

Label stateLabel = new Label("State:");
TextField stateField = new TextField();
pane.add(stateLabel, 0, 2);
pane.add(stateField, 1, 2);

Label zipLabel = new Label("Zip Code:");
TextField zipField = new TextField();
pane.add(zipLabel, 0, 3);
pane.add(zipField, 1, 3);

Label lonLabel = new Label("Longitude:");
TextField lonField = new TextField();
pane.add(lonLabel, 0, 4);
pane.add(lonField, 1, 4);

// 注意：你之前的label5写错成Longitude了，应该是Latitude
Label latLabel = new Label("Latitude:");
TextField latField = new TextField();
pane.add(latLabel, 0, 5);
pane.add(latField, 1, 5);

// 上一页按钮
Button prevBtn = new Button("Previous");
pane.add(prevBtn, 0, 20);

// 下一页按钮
Button nextBtn = new Button("Next");
pane.add(nextBtn, 2, 20);

// 定义更新UI的方法
Runnable updateDisplay = () -> {
    City currentCity = cities.get(currentIndex[0]);
    cityField.setText(currentCity.getCity());
    stateField.setText(currentCity.getState());
    zipField.setText(String.valueOf(currentCity.getpostalCode()));
    lonField.setText(String.valueOf(currentCity.getLongitude()));
    latField.setText(String.valueOf(currentCity.getLatitude()));
};

// 初始化显示第一个城市
updateDisplay.run();

// 下一页按钮事件
nextBtn.setOnAction(e -> {
    if (currentIndex[0] < cities.size() - 1) {
        currentIndex[0]++;
        updateDisplay.run();
    }
    // 可以在这里添加提示，比如已经到最后一页时禁用按钮或者弹出提示
});

// 上一页按钮事件
prevBtn.setOnAction(e -> {
    if (currentIndex[0] > 0) {
        currentIndex[0]--;
        updateDisplay.run();
    }
    // 同理，到第一页时可以禁用按钮
});

// 组装界面并显示
BorderPane borderPane = new BorderPane();
borderPane.setCenter(pane);
Scene scene = new Scene(borderPane, 500, 500);
primaryStage.setTitle("Cities");
primaryStage.setScene(scene);
primaryStage.show();

关键细节说明 #

1. 当前索引的维护：用int[] currentIndex是因为lambda表达式只能访问final或effectively final的变量，数组是引用类型，修改数组里的元素不会改变引用本身，所以可以在lambda里修改。你也可以用AtomicInteger来替代数组，效果一样。
2. 复用UI组件：所有的标签和文本框只创建一次，每次切换页面时只更新它们的内容，避免重复创建组件带来的性能问题和逻辑混乱。
3. 边界处理：在按钮事件里判断当前索引是否在合法范围内，防止越界访问列表。你还可以进一步优化，比如当到第一页时禁用上一页按钮，到最后一页时禁用下一页按钮，提升用户体验。
4. 修正了Label错误：你之前把Latitude的标签写成了Longitude，已经在代码里修正了。

内容的提问来源于stack exchange，提问作者Yves