首页 > 解决方案 > 以两行显示 ComboBox 项目,而不是在一行中显示

问题描述

我目前正在使用 JavaFx ComboBox,并从 XML 文件加载选项。我遇到的问题是有些物品太长而且不合身: 在此处输入图像描述

我尝试过使用 CSS 宽度:

   .combo-box {
        -fx-pref-width: 300;
    }
    .combo-box-popup > .list-view {
        -fx-pref-width: 300;
    }

在此处输入图像描述

是否可以ComboBox在两行中显示项目而不是在一行中显示?

标签: javafxcombobox

解决方案


您需要CellFactory为您的ComboBox. 在ListCell我们构建的新版本中,我们可以使用一个简单Label的为我们包装文本。

这是一个完整的示例来演示:

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.ComboBox;
import javafx.scene.control.Label;
import javafx.scene.control.ListCell;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class ComboBoxTextWrap extends Application {

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

    @Override
    public void start(Stage primaryStage) {

        // Simple Interface
        VBox root = new VBox(10);
        root.setAlignment(Pos.CENTER);
        root.setPadding(new Insets(10));

        // The ComboBox
        ComboBox<String> comboBox = new ComboBox<>();

        // Sample data
        comboBox.getItems().addAll(
                "Shorty",
                "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
                "Shorty Jr.",
                "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
        );

        // Create our custom cells for the ComboBox
        comboBox.setCellFactory(param -> new ListCell<String>() {

            // Create a Label to store our text. We'll set it to wrap text and it's preferred width
            final Label label = new Label() {{
                setWrapText(true);
                setPrefWidth(200);
            }};

            @Override
            protected void updateItem(String item, boolean empty) {
                super.updateItem(item, empty);

                if (item == null || empty) {
                    setGraphic(null);
                } else {
                    // Add our text to the Label
                    label.setText(item);
                    setGraphic(label);
                }
            }
        });

        // Add the combobox to the layout
        root.getChildren().add(comboBox);

        // Show the stage
        primaryStage.setScene(new Scene(root));
        primaryStage.setTitle("Sample");
        primaryStage.show();
    }

}

结果:

截屏


推荐阅读