代码之家 › 专栏 › 技术社区 › ricardo.scholz

去掉javafx上的重复边框。场景控制文本字段

textfield border javafx-8 css java

ricardo.scholz · 技术社区 · 8 年前

我正在做一个 TextField

FXML摘录:

<HBox fx:id="sliderControlPane" styleClass="parameterSliderControlPane"
                    alignment="CENTER" visible="false">
    <Slider fx:id="parameterSliderControl" styleClass="parameterSliderControl"
                        prefWidth="195" />
    <Pane prefWidth="14"/>
    <TextField fx:id="parameterSliderControlValue" styleClass="parameterSliderControlValue" 
                        prefWidth="70"/>
</HBox>

CSS摘录:

.parameterSliderControlPane {
    -fx-padding: 0.0 5.0 0.0 5.0;
}

.parameterSliderControlValue {
    -fx-border-color: #f00;
    -fx-border-radius: 8.0;
    -fx-font-size: 20.0;
    -fx-padding: 0.0 4.0 0.0 4.0;
    -fx-alignment: center-right;
}

.parameterSliderControl .track {
    -fx-padding: 4.0;
}

.parameterSliderControl .thumb {
    -fx-border-color: #aaa;
    -fx-border-radius: 12.0;
    -fx-background-color: #fff;
    -fx-focus-color: transparent;
    -fx-faint-focus-color: transparent;
    -fx-padding: 14.0;
}

我认为这并不相关,但为了获取信息,我会跟踪滑块和文本字段之间的一致性,在文本字段中添加一个侦听器,以根据文本字段中的输入更新滑块值或回滚文本字段值:

@Override
public void initialize(URL location, ResourceBundle resources) {
    (...)
    this.parameterSliderControlValue.focusedProperty().addListener((obs, wasFocused, isNowFocused) -> {
        if (!isNowFocused) {
            (...)
            //check wether input is valid
            //if yes, update slider value with text field value
            //if no, update text field value with slider value
        }
    }
}

我在官方JavaFX CSS参考页面上找不到任何可疑参数( https://docs.oracle.com/javafx/2/api/javafx/scene/doc-files/cssref.html )

1 回复 | 直到 8 年前

ricardo.scholz 8 年前

至于@fabian的评论,结果是由于默认主题(modena.css),我在下面的链接中找到了它:

gist.github.com/maxd/63691840fc372f22f470

第1266行定义 .text-input 入口,负责复制边界。它不直接定义边界参数,而是通过背景相关参数间接生成额外边界:

.text-input {
    -fx-text-fill: -fx-text-inner-color;
    -fx-highlight-fill: derive(-fx-control-inner-background,-20%);
    -fx-highlight-text-fill: -fx-text-inner-color;
    -fx-prompt-text-fill: derive(-fx-control-inner-background,-30%);
    -fx-background-color: linear-gradient(to bottom, derive(-fx-text-box-border, -10%), -fx-text-box-border),
        linear-gradient(from 0px 0px to 0px 5px, derive(-fx-control-inner-background, -9%), -fx-control-inner-background);
    -fx-background-insets: 0, 1;
    -fx-background-radius: 3, 2;
    -fx-cursor: text;
    -fx-padding: 0.333333em 0.583em 0.333333em 0.583em; /* 4 7 4 7 */
}

我的特殊情况的解决方案是覆盖 -fx-background-color

.parameterSliderControlValue {
    -fx-border-color: #f00;
    -fx-border-radius: 8.0;
    -fx-font-size: 20.0;
    -fx-padding: 0.0 4.0 0.0 4.0;
    -fx-alignment: center-right;
    -fx-background-color: transparent; //this line has been added to solve the problem
}