javafx - 在两行中显示 ComboBox 项目而不是在一行中显示

Question

我目前正在使用 JavaFx ComboBox我从 XML 文件加载选项。
我遇到的问题是有些项目太长而且不太合身:


我曾尝试使用 CSS 宽度:

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

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

Answer 1

您需要设置一个自定义 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();
    }

}

The Result: