在JavaFX中实现标签栏

演示答案:( 5月29日凌晨3点10分)

** 10/7/2016 **你可以在GitHub找到代码

实际问题回答：(5月22日19时53分问)

标题可能不是太好,但是我想做的是JavaFX中的这样的东西：

Examples

YouTube的：

StackOverFlow(具有和自动完成)：

题：
我不需要给我写代码.相反,我想知道如何使用JavaFX和一些想法实现.

解决方法

对于标签,您可以使用包含文本(标签名称)节点和自定义样式的HBox(按钮(X)).通过玩弄背景和边框,您可以实现标签的所需外观.

该按钮的onAction处理程序应该从它的父代删除标记…

对于整个标签栏,您可以使用另一个HBox.使用适当的边框进行正确的外观.除了标签之外,添加一个没有背景的TextField作为最后一个元素,并将该TextField的Hgrow属性设置为Priotity.ALWAYS以覆盖剩余的可用空间.

此TextField的onAction处理函数添加新标记并清除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,5));
            getChildren().addAll(text,removeButton);
        }
    }

}

style.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();
}

在JavaFX中实现标签栏

解决方法

猜你在找的Java相关文章