如何制作可滚动的面板列表？

Question

JavaFX 新手，我正在使用 SceneBuilder 制作一个带有 VBox 的滚动框架，其中有无限的 VBox（用户可以创建它们）。 问题是我的设置不起作用。我使用内部带有 ScrollingPane 的 AnchorPane。其余的用这个代码：

public class ManagerSceneController {

    @FXML
    private ScrollPane ScrollingContainer;
    
   public void initialize() {
       FillScrollPane();
   }
    
    public void FillScrollPane() {
        System.out.println("Führe aus");
        VBox cardContainer = new VBox(10);
        cardContainer.setPadding(new Insets(10));
        
        for (int i = 1; i <= 50; i++) { // TO DO: Replace with actual loading
            VBox card = CardComponent.createCard("Webseite"+i, "Username"+i, "Password"+i);
            cardContainer.getChildren().add(card);
            
            System.out.println(card);
            System.out.println("Number of children in cardContainer: " + cardContainer.getChildren().size());
            ScrollingContainer.setFitToWidth(true);
            ScrollingContainer.setFitToHeight(true);
            System.out.println("Erfolgreich ausgeführt");
        }
    }

}

打印所有打印内容，看起来很正常，但滚动窗格只是空的。

卡牌类：

public class CardComponent {
public static VBox createCard(String website, String username, String password) {
    Label websiteLabel = new Label("Website: ");
    Label usernameLabel = new Label("Username: ");
    Label passwordLabel = new Label("Password: ");
    
    VBox card = new VBox(10);
    card.getChildren().addAll(websiteLabel, usernameLabel, passwordLabel);
    card.setPadding(new Insets(10));
    card.setStyle("-fx-border-color: black; -fx-border-width: 1px;");
    
    
    
    return card;
}
}

我期望滚动窗格中充满卡片，每个卡片有 3 个标签，中间有一些填充。 我注意到的一件事是空的滚动窗格没有任何滚动条，不确定这是否正常。

Answer 1

我认为这是一个很好的使用案例

ListView

。创建一个视图。在这种情况下，那就是

CardView

。为视图创建模型。在这种情况下，那就是

CardModel

。

主要

import javafx.application.Application;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.print.PageLayout;
import javafx.print.PageOrientation;
import javafx.print.Paper;
import javafx.print.Printer;
import javafx.print.PrinterJob;
import javafx.scene.Scene;
import javafx.scene.control.Tab;
import javafx.scene.control.ListCell;
import javafx.scene.control.ListView;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;

public class App extends Application {

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

    @Override
    public void start(Stage primaryStage) {    
        ObservableList<CardModel> modelList = FXCollections.observableArrayList();
        for(int i = 1; i <= 50; i++)
        {
            modelList.add(new CardModel(Integer.toString(i), Integer.toString(i), Integer.toString(i)));
        }
        
        ListView<CardModel> listView = new ListView();
        listView.setItems(modelList);
        listView.setCellFactory((ListView<CardModel> param) -> {
            ListCell<CardModel> cell = new ListCell<CardModel>() {
                CardView cardView = new CardView();
                
                @Override
                protected void updateItem(CardModel item, boolean empty) {
                    super.updateItem(item, empty);
                    if (item != null) {
                       
                        cardView.setWebsiteText(item.getWebsite());
                        cardView.setUsernameText(item.getUsername());
                        cardView.setPasswordText(item.getPassword());
                        setGraphic(cardView);
                    } else {
                        setText("");
                        setGraphic(null);
                    }
                }
            };
            return cell;
        });
        
        StackPane root = new StackPane(listView);
        Scene scene = new Scene(root, 500, 500);
        primaryStage.setScene(scene);
        primaryStage.setTitle("JavaFX App");
        primaryStage.show();
    }   
}

卡片视图

import java.util.Objects;
import java.util.concurrent.atomic.AtomicLong;
import javafx.beans.property.LongProperty;
import javafx.beans.property.SimpleLongProperty;
import javafx.scene.control.Label;
import javafx.scene.layout.VBox;

/**
 *
 * @author blj0011
 */
final public class CardView extends VBox
{   
    static private final AtomicLong ID_GENERATOR = new AtomicLong(0);
    
    private final LongProperty id = new SimpleLongProperty();
    private final Label lblWebsite = new Label();
    private final Label lblUsername = new Label();
    private final Label lblPassword = new Label();
    
    public CardView()
    {
        id.setValue(ID_GENERATOR.incrementAndGet());
        
        this.getChildren().addAll(lblWebsite, lblUsername, lblPassword);
         this.setStyle("-fx-border-color: black; -fx-border-width: 1px;");
    }
    
    public CardView(String website, String username, String password)
    {
        id.setValue(ID_GENERATOR.incrementAndGet());
        
        lblWebsite.setText("Website: " + website);
        lblUsername.setText("Username: " + username);
        lblPassword.setText("Password: " + password);
        
        this.getChildren().addAll(lblWebsite, lblUsername, lblPassword);
        this.setStyle("-fx-border-color: black; -fx-border-width: 1px;");
    }
    
    public Long getCardId()
    {
        return id.getValue();
    }
    
    public String getWebsiteText()
    {
        return lblWebsite.getText();
    }
    
    public String getUsernameText()
    {
        return lblUsername.getText();
    }
    
    public String getPasswordText()
    {
        return lblPassword.getText();
    }

    public void setWebsiteText(String text)
    {
        System.out.println("WEbsite: " + text);
        this.lblWebsite.setText("Website: " + text);
    }
    
    public void setUsernameText(String text)
    {
        this.lblUsername.setText("Username: " + text);
    }
    
    public void setPasswordText(String text)
    {
        this.lblPassword.setText("Password: " + text);
    }
    
    @Override
    public boolean equals(Object obj) {
        if (this == obj) {
            return true;
        }
        if (obj == null) {
            return false;
        }
        if (getClass() != obj.getClass()) {
            return false;
        }
        final CardView other = (CardView) obj;
        if (!Objects.equals(this.id, other.id)) {
            return false;
        }
        if (!Objects.equals(this.lblWebsite, other.lblWebsite)) {
            return false;
        }
        if (!Objects.equals(this.lblUsername, other.lblUsername)) {
            return false;
        }
        return Objects.equals(this.lblPassword, other.lblPassword);
    }

    @Override
    public int hashCode() {
        int hash = 7;
        hash = 29 * hash + Objects.hashCode(this.id);
        hash = 29 * hash + Objects.hashCode(this.lblWebsite);
        hash = 29 * hash + Objects.hashCode(this.lblUsername);
        hash = 29 * hash + Objects.hashCode(this.lblPassword);
        return hash;
    }
    
    
}

卡片型号

/**
 *
 * @author blj0011
 */
public class CardModel {
    private String website;
    private String username;
    private String password;

    public CardModel(String website, String username, String password) {
        this.website = website;
        this.username = username;
        this.password = password;
    }

    public String getWebsite() {
        return website;
    }

    public String getUsername() {
        return username;
    }

    public String getPassword() {
        return password;
    }

    public void setWebsite(String website) {
        this.website = website;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public void setPassword(String password) {
        this.password = password;
    }
    
    @Override
    public String toString() {
        StringBuilder sb = new StringBuilder();
        sb.append("CardModel{");
        sb.append("website=").append(website);
        sb.append(", username=").append(username);
        sb.append(", password=").append(password);
        sb.append('}');
        return sb.toString();
    }

    @Override
    public boolean equals(Object obj) {
        if (this == obj) {
            return true;
        }
        if (obj == null) {
            return false;
        }
        if (getClass() != obj.getClass()) {
            return false;
        }
        final CardModel other = (CardModel) obj;
        if (!Objects.equals(this.website, other.website)) {
            return false;
        }
        if (!Objects.equals(this.username, other.username)) {
            return false;
        }
        return Objects.equals(this.password, other.password);
    }

    @Override
    public int hashCode() {
        int hash = 3;
        hash = 47 * hash + Objects.hashCode(this.website);
        hash = 47 * hash + Objects.hashCode(this.username);
        hash = 47 * hash + Objects.hashCode(this.password);
        return hash;
    }
}

输出