Question

我无法理解为什么我不能用这种方法改变图片（场景背景和imageview图像）：

private void loginCheck(String loginText){
    String login = loginText.trim();
    if(login == null || login.equals("")) {
        loginField.setStyle("-fx-background-image:url('images/registration_login_wrong.png');");
        logoTick.setStyle("-fx-image:url('images/registration_wrong.png');");
        logoTick.setVisible(true);
    }else{
        loginField.setStyle("-fx-background-image:url('images/registration_login_right.png');");
        logoTick.setVisible(false);
    }
}

logoTick的CSS代码是：

.login_tick{
-fx-image:url("images/registration_tick.png");
visibility:false;}

除-fx-image和-fx-background-image之外的所有内容似乎都能正常工作。我还在另一个类（标签）中更改了背景图像，并没有遇到任何问题。这就是为什么我无法理解可能出错的原因。我检查了图像位置和名称一切似乎都正确。如果我手动替换CSS中的图像路径它正在工作，但从代码图像中消失。

Answer 1

CSS url(...)函数中的路径被视为相对路径;它们相对的位置在样式表和内联样式中是不同的。来自CSS documentation：

如果样式显示在样式表中，则路径相对于基础样式表的URI。如果样式以内联样式显示，则 path是相对于类路径的根。

在不知道你的项目布局的情况下，不可能为你提供正确的图像路径，但这应该足以解决它。

替代解决方案

另一种解决方案是在CSS中定义所有样式，并在Java代码中操作样式类以选择适当的样式。我喜欢使用JavaFX 8 CSS PseudoClasses来执行此操作：

.login-field:login-incorrect {
    -fx-background-image: url('images/registration_login_wrong.png');
}
.login-field:login-correct {
    -fx-image:url('images/registration_login_right.png');
}
.login_tick {
    -fx-image:url("images/registration_tick.png");
    visibility:false;
}
.login_tick:login-incorrect {
    -fx-image:url('images/registration_wrong.png');
    visibility: true ;
}

然后Java代码看起来像：

private void loginCheck(String loginText){
    String login = loginText.trim();
    boolean loginIncorrect = (login == null || login.equals("") ;

    PseudoClass loginIncorrectPsuedoClass = PseudoClass.getPseudoClass("login-incorrect");
    PseudoClass loginCorrectPsuedoClass = PseudoClass.getPseudoClass("login-correct");
    loginField.psuedoClassStateChanged(loginIncorrectPseudoClass, loginIncorrect);
    loginField.pseudoClassStateChanged(loginCorrectPseudoClass, !loginIncorrect);
    logoTick.psuedoClassStateChanged(loginIncorrectPseudoClass, loginIncorret);
}

这种方法的优点是所有样式信息都存储在CSS文件中; Java代码只是更改了用于UI元素的选择器。

为什么setStyle for -fx-background-image和-fx-image不起作用？

1 个答案: