如何向组合框和列表中的选项添加标签？ [英] How do you add labels to the options in combobox and list?

问题描述

我阅读了以下文档， http://docs.oracle。 com / javafx / 2 / ui_controls / combo-box.htm ，我没有找到任何类似我的需要。我在寻找一种方法在组合框中分组我的选项。假设我的组合框是持续时间。我有以下选项： - 最近1小时，最近2小时，最近24小时，上周，过去30天，最近3个月，去年。我是在组合框中添加一个标签短期和长期。用户可以选择只有一个，但它会出现类似：

I read the following documentation, http://docs.oracle.com/javafx/2/ui_controls/combo-box.htm and I didn't find anything similar to my needs. I was looking for a way to group my options in a combobox. Suppose my combobox is duration. I have the following options : - Last 1 hour, last 2 hour, last 24 hours, last week , last 30 days, last 3 months, last year. I was to add a label "Short duration" and "long duration" in the combobox. The user can pick ONLY one but it will appear sorta like:

Short Duration
Last Hour
Last 2 hours
Last 24 Hours

Long Duration
Last Month
Last year

短持续时间和长持续时间就像标题。你不能点击他们。

Short duration and long duration is just like header. YOU CANNOT CLICK THEM.

谢谢！

注意：我不是在说 Label ab = new标签（短期）;

这是我的代码（我尝试在combobox中插入标签作为选项， ）

Here is my code (I tried inserting label as an option in combobox , but you can select it)

ComboBox combobox_print_options = new ComboBox();
combobox_print_options.setPromptText("Choose the button you wish to click");

Label table = new Label("Table");
combobox_print_options.getItems().addAll(
table, 
"a",
"b");

推荐答案

为您的组合框创建一个项目类，或者不是可选项。 （您还可以为此添加其他有用的API，例如方便的访问器，代表它的时间量。）

Create an item class for your combo box that declares whether or not it's a selectable item or not. (You could also add other useful API to this, such as a convenient accessor for the amount of time it represents.)

然后使用单元格工厂，不可选择的项目：

Then use a cell factory that disables the cells representing items that are not selectable:

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.ComboBox;
import javafx.scene.control.ListCell;
import javafx.scene.layout.BorderPane;
import javafx.stage.Stage;

public class ComboBoxWithSections extends Application {

    @Override
    public void start(Stage primaryStage) {
        ComboBox<ComboBoxItem> combo = new ComboBox<>();
        combo.getItems().addAll(
            new ComboBoxItem("Short Duration", false),
            new ComboBoxItem("Last Hour",      true),
            new ComboBoxItem("Last 2 hours",   true),
            new ComboBoxItem("Last 24 hours",  true),
            new ComboBoxItem("",               false),
            new ComboBoxItem("Long Duration",  false),
            new ComboBoxItem("Last Month",     true),
            new ComboBoxItem("Last Year",      true)            
        );

        combo.setCellFactory(listView -> new ListCell<ComboBoxItem>() {
            @Override
            public void updateItem(ComboBoxItem item, boolean empty) {
                super.updateItem(item, empty);
                if (empty) {
                    setText(null);
                    setDisable(false);
                } else {
                    setText(item.toString());
                    setDisable(! item.isSelectable());
                }
            }
        });

        BorderPane root = new BorderPane(null, combo, null, null, null);
        primaryStage.setScene(new Scene(root, 250, 400));
        primaryStage.show();
    }

    public static class ComboBoxItem {
        private final String name ;
        private final boolean selectable ;

        public ComboBoxItem(String name, boolean selectable) {
            this.name = name ;
            this.selectable = selectable ;
        }

        public String getName() {
            return name ;
        }

        public boolean isSelectable() {
            return selectable ;
        }

        @Override
        public String toString() {
            return name ;
        }
    }

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

更新回答其他地方，但我会更改标题的样式使用 CSS PseudoClass 和外部CSS文件：

Update This has been answered elsewhere but I would change the style of the headers using a CSS PseudoClass and an external CSS file:

添加

    final PseudoClass header = PseudoClass.getPseudoClass("section-header");

<方法，并更改单元格工厂的 updateItem（...）方法，如下所示：

        public void updateItem(ComboBoxItem item, boolean empty) {
            super.updateItem(item, empty);
            if (empty) {
                setText(null);
                setDisable(false);
                pseudoClassStateChanged(header, false);
            } else {
                setText(item.toString());
                setDisable(! item.isSelectable());
                pseudoClassStateChanged(header, ! item.isSelectable());
            }
        }

现在将css文件附加到 Scene ：

Now attach a css file to the Scene:

    scene.getStylesheets().add("combo-box-with-sections.css");

并且css文件可能类似于

and the css file could look like

combo-box-with-sections.css：

combo-box-with-sections.css:

.combo-box-popup .list-cell {
    -fx-padding: 4 0 4 20 ;
}

.combo-box-popup .list-cell:section-header {
    -fx-font: italic 10pt sans-serif ;
    -fx-padding: 4 0 4 5 ;
}

这篇关于如何向组合框和列表中的选项添加标签？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！