如何更改自动完成TextField（ControlFX）的样式？

Question

我有来自controlsFX的Autocomplete TextField，我想更改每个项目的大小和颜色。

这是我的代码部分：

TextFields.bindAutoCompletion(txt_numberOfCard_GENERAL, cardNumber);

Answer 1

修改：

从 ControlFX 自动完成是一个包含ListView的弹出窗口，AutoComplete的默认css style为：

/**
 * Style based on Modena.css combo-box-popup style
 */

.auto-complete-popup > .list-view {
    -fx-background-color:
        linear-gradient(to bottom,
        derive(-fx-color,-17%),
        derive(-fx-color,-30%)
        ),
        -fx-control-inner;
    -fx-background-insets: -1 -2 -1 -1, 0 -1 0 0;
    -fx-effect: dropshadow( gaussian , rgba(0,0,0,0.2) , 12, 0.0 , 0 , 8 );
}
.auto-complete-popup > .list-view > .virtual-flow > .clipped-container > .sheet > .list-cell {
    -fx-padding: 4 0 4 5;
    /* No alternate highlighting */
    -fx-background: -fx-control-inner-background;
}
.auto-complete-popup > .list-view > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:selected {
    -fx-background:  -fx-selection-bar-non-focused;
    -fx-background-color:  -fx-background;
}
.auto-complete-popup  > .list-view > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:hover,
.auto-complete-popup  > .list-view > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:selected:hover {
    -fx-background: -fx-accent;
    -fx-background-color: -fx-selection-bar;
}
.auto-complete-popup > .list-view > .placeholder > .label {
    -fx-text-fill: derive(-fx-control-inner-background,-30%);
}

因此，您需要在样式表文件中覆盖此类，或者更改java代码中的样式，如下所示：

        AutoCompletePopup<String> autoCompletePopup = new AutoCompletePopup<>();
        autoCompletePopup.getSuggestions().addAll("Fruit", "Fruits", "Frites", "Cheese!");
        autoCompletePopup.setStyle("-fx-control-inner-background:WHITE;"
                + "-fx-accent: #E8EAF6;"
                + "-fx-selection-bar-non-focused:red;"
                + "-fx-font:18px 'Arial'");
            autoCompletePopup.show(textField);

Answer 2

我在使用 TextFields.bindAutoCompletion

时遇到了类似的问题

我希望自动完成与文本字段的大小相同。经过一番研究，我发现 bindAutoCompletion 方法返回一个 AutoCompletionBinding 对象。使用这个对象，我只是为了保持相同的大小：

AutoCompletionBinding<Unidade> autoComplete = TextFields.bindAutoCompletion(this.txtField,units);
            autoComplete.prefWidthProperty().bind(this.txtField.widthProperty());

如果您需要设置对象的样式，您可以获取 AutoComplete 对象，然后它们添加类甚至直接设置样式：

AutoCompletePopup<Unidade> autoCompletionPopup = autoComplete.getAutoCompletionPopup();
autoCompletionPopup.setStyle("-fx-font-weight: BOLD; -fx-font-size: 23; -fx-background-color: #EDECEC;");
// or with the following class: .itemMenu { -fx-font-weight: BOLD; }

// you can clear default styles too
//autoCompletionPopup.getStyleClass().clear();
            autoCompletionPopup.getStyleClass().add("itemMenu");