在 JavaFX 中实现标签栏

答案示范：（5月29日凌晨3点10分回答）

**10/7/2016** you can find the code on GitHub https://github.com/goxr3plus/JavaFX-TagsBar

回答前的实际问题：（5月22日19:53提问）

标题可能不太好，但我想要在 JavaFX 中做这样的事情：

Examples

YouTube:

StackOverFlow（具有自动完成功能）:

问题：我不需要为此编写代码。相反，我想知道如何使用 JavaFX 和一些想法来实现这一目标。

对于标签，您可以使用自定义样式HBox含有一个Text（标签名称）节点 an aButton（删除按钮 (X)）。通过调整背景和边框，您可以获得所需的标签外观。

The onAction按钮的处理程序应该从其父级中删除标签...

对于整个标签栏，您可以使用另一个HBox。使用适当的边框以获得正确的外观。除了标签之外，还添加一个TextField没有背景作为最后一个元素并设置Hgrow那的财产TextField to Priotity.ALWAYS以覆盖剩余的可用空间。

The onAction这个的处理程序TextField添加新标签并清除内容TextField.

你可以例如使用 ControlsFX 自动完成功能TextField或者自己实现它以获得自定义外观......

public class TagBar extends HBox {

    private final ObservableList<String> tags;
    private final TextField inputTextField;

    public ObservableList<String> getTags() {
        return tags;
    }

    public TagBar() {
        getStyleClass().setAll("tag-bar");
        getStylesheets().add(getClass().getResource("style.css").toExternalForm());
        tags = FXCollections.observableArrayList();
        inputTextField = new TextField();
        inputTextField.setOnAction(evt -> {
            String text = inputTextField.getText();
            if (!text.isEmpty() && !tags.contains(text)) {
                tags.add(text);
                inputTextField.clear();
            }
        });

        inputTextField.prefHeightProperty().bind(this.heightProperty());
        HBox.setHgrow(inputTextField, Priority.ALWAYS);
        inputTextField.setBackground(null);

        tags.addListener((ListChangeListener.Change<? extends String> change) -> {
            while (change.next()) {
                if (change.wasPermutated()) {
                    ArrayList<Node> newSublist = new ArrayList<>(change.getTo() - change.getFrom());
                    for (int i = change.getFrom(), end = change.getTo(); i < end; i++) {
                        newSublist.add(null);
                    }
                    for (int i = change.getFrom(), end = change.getTo(); i < end; i++) {
                        newSublist.set(change.getPermutation(i), getChildren().get(i));
                    }
                    getChildren().subList(change.getFrom(), change.getTo()).clear();
                    getChildren().addAll(change.getFrom(), newSublist);
                } else {
                    if (change.wasRemoved()) {
                        getChildren().subList(change.getFrom(), change.getFrom() + change.getRemovedSize()).clear();
                    }
                    if (change.wasAdded()) {
                        getChildren().addAll(change.getFrom(), change.getAddedSubList().stream().map(Tag::new).collect(Collectors.toList()));
                    }
                }
            }
        });
        getChildren().add(inputTextField);
    }

    private class Tag extends HBox {

        public Tag(String tag) {
            getStyleClass().setAll("tag");
            Button removeButton = new Button("X");
            removeButton.setOnAction((evt) -> tags.remove(tag));
            Text text = new Text(tag);
            HBox.setMargin(text, new Insets(0, 0, 0, 5));
            getChildren().addAll(text, removeButton);
        }
    }

}

样式.css

.tag-bar {
    -fx-border-color: blue;
    -fx-spacing: 3;
    -fx-padding: 3;
    -fx-max-height: 30;
}

.tag-bar .tag {
    -fx-background-color: lightblue;
    -fx-alignment: center;
}

.tag-bar .tag .button {
    -fx-background-color: transparent;
}

@Override
public void start(Stage primaryStage) {
    Button btn = new Button("Sort");

    StackPane.setAlignment(btn, Pos.BOTTOM_CENTER);

    TagBar tagBar = new TagBar();

    btn.setOnAction((ActionEvent event) -> {
        FXCollections.sort(tagBar.getTags());
    });

    Button btn2 = new Button("add \"42\"");
    btn2.setOnAction(evt -> {
        if (!tagBar.getTags().contains("42")) {
            tagBar.getTags().add("42");
        }
    });

    VBox root = new VBox();
    root.getChildren().addAll(tagBar, btn, btn2);
    root.setPrefSize(300, 400);

    Scene scene = new Scene(root);

    primaryStage.setScene(scene);
    primaryStage.show();
}