Question

我有一个带有此代码的简单场景：

scene.getStylesheets().add("packagename/testcss.css");

我的testcss.css是：

.button { 
    -fx-background-color: #DDFFA4;
}

.button:hover {
    -fx-background-color: #9ACD32;
}

我所获得的是在网络应用程序中徘徊的好效果。

enter image description here ...

问题
如何通过我的Button的setStyle方法实现相同的效果但没有单独的css文件？
问题是setStyle只接受样式定义并省略了选择器。

button.setStyle("-fx-background-color: #DDFFA4;");

我的悬停案例中的选择器是伪类：

.button:hover

但我应该在哪里设置它？

此外，javadoc在从setStyle方法参数中排除选择器时是明确的：

请注意，与HTML样式属性一样，此变量包含样式属性和值，而不是样式规则的选择器部分。

Answer 1

正如您在问题中所述，从JavaFX 2.2开始，css伪类不会作为公共API的一部分公开，您可以将其用于Java代码中的样式操作。

如果要在不使用样式表的情况下从Java代码更改样式属性，则需要根据事件或changelisteners设置样式。下面的示例中有几个选项。

import javafx.application.Application;
import javafx.beans.binding.*;
import javafx.beans.property.SimpleStringProperty;
import javafx.event.EventHandler;
import javafx.geometry.Pos;
import javafx.scene.*;
import javafx.scene.control.Button;
import javafx.scene.input.MouseEvent;
import javafx.scene.layout.*;
import javafx.stage.Stage;

/** Changing button styles on hover without a css stylesheet. */
public class ButtonBackgroundChanger extends Application {
  private static final String STANDARD_BUTTON_STYLE = "-fx-background-color: #DDFFA4;";
  private static final String HOVERED_BUTTON_STYLE  = "-fx-background-color: #9ACD32;";

  public static void main(String[] args) throws Exception { launch(args); }
  @Override public void start(final Stage stage) throws Exception {
    Button configure = new Button("Configure");
    changeBackgroundOnHoverUsingBinding(configure);
    Button update = new Button("Update");
    changeBackgroundOnHoverUsingEvents(update);

    VBox layout = new VBox(10);
    layout.setAlignment(Pos.CENTER);
    layout.setStyle("-fx-padding: 10;");
    layout.getChildren().addAll(configure, update);
    stage.setScene(new Scene(layout));
    stage.show();
  }

  private void changeBackgroundOnHoverUsingBinding(Node node) {
    node.styleProperty().bind(
      Bindings
        .when(node.hoverProperty())
          .then(
            new SimpleStringProperty(HOVERED_BUTTON_STYLE)
          )
          .otherwise(
            new SimpleStringProperty(STANDARD_BUTTON_STYLE)
          )
    );
  }

  public void changeBackgroundOnHoverUsingEvents(final Node node) {
    node.setStyle(STANDARD_BUTTON_STYLE);
    node.setOnMouseEntered(new EventHandler<MouseEvent>() {
      @Override public void handle(MouseEvent mouseEvent) {
        node.setStyle(HOVERED_BUTTON_STYLE);
      }
    });
    node.setOnMouseExited(new EventHandler<MouseEvent>() {
      @Override public void handle(MouseEvent mouseEvent) {
        node.setStyle(STANDARD_BUTTON_STYLE);
      }
    });
  }    
}

我只是在代码而不是样式表中真正做到这一点，如果颜色需要真正动态地使用具有预定义颜色和样式的样式表有问题，或者如果有其他厌恶使用css样式表。

在JavaFX 8中，有一个公共API允许您（如果您愿意）manipulate Region background colors without use of CSS。

示例程序输出（悬停更新按钮）：

sample program output

Answer 2

您可以选择将它们的css设置为在触发不同事件时通过编程方式进行更改/更新。我在签入按钮的fxml文件事件中添加了以下函数。

 @FXML
    private void onHover(MouseEvent event)
    {
        if(btnCheckin.getText().contentEquals("Check Out"))
        {
            btnCheckin.setStyle("-fx-font-size: 20; -fx-font-weight: bold; -fx-padding: -5 -5 -5 -5;   \n" +
                            "    -fx-border-color: #e2e2e2;\n" +
                            "    -fx-border-width: 2;\n" +
                            "    -fx-border-radius: 5;\n" +
                            "    -fx-background-radius: 5;\n" +
                            "    -fx-background-color: #3a3a3a;\n" +
                            "    -fx-font-family: \"Lato Bold\", Helvetica, Arial, sans-serif;\n" +
                            "    -fx-text-fill: white;\n" +
                            "    -fx-background-insets: 0 0 0 0, 0, 1, 2;");
        }
    }

    @FXML
    private void onExit(MouseEvent event)
    {
        if(btnCheckin.getText().contentEquals("Check Out"))
        {
            btnCheckin.setStyle("-fx-font-size: 20; -fx-font-weight: bold; -fx-padding: -5 -5 -5 -5;   \n" +
                            "    -fx-border-width: 2;\n" +
                            "    -fx-border-radius: 5;\n" +
                            "    -fx-background-radius: 5;\n" +
                            "    -fx-font-family: \"Lato Bold\", Helvetica, Arial, sans-serif;\n" +
                            "    -fx-text-fill: white;\n" +
                            "    -fx-background-insets: 0 0 0 0, 0, 1, 2;\n" +
                            "    -fx-background-color: #EE6559;\n" +
                            "    -fx-border-color: #EE6559;");
        }
    }

    @FXML
    private void onPress(MouseEvent event)
    {
        if(btnCheckin.getText().contentEquals("Check Out"))
        {
            btnCheckin.setStyle("-fx-font-size: 20; -fx-font-weight: bold; -fx-padding: -5 -5 -5 -5;   \n" +
                            "    -fx-border-color: #e2e2e2;\n" +
                            "    -fx-border-width: 2;\n" +
                            "    -fx-border-radius: 5;\n" +
                            "    -fx-background-radius: 5;\n" +
                            "    -fx-background-color: white;\n" +
                            "    -fx-font-family: \"Lato Bold\", Helvetica, Arial, sans-serif;\n" +
                            "    -fx-text-fill: #1d1d1d;\n" +
                            "    -fx-background-insets: 0 0 0 0, 0, 1, 2;");
        }
    }

    @FXML
    private void onRelease(MouseEvent event)
    {
        if(btnCheckin.getText().contentEquals("Check Out"))
        {
            onHover(event);
        }
    }

javafx 2和css伪类：在setStyle方法中设置悬停属性

2 个答案: