如何从 javafx 控制器向按钮添加悬停 属性 而不是 CSS
How to add a hover property to button from the javafx controller instead of CSS
假设我在 JavaFX CSS 中有一个这样定义的切换按钮。
.btn:hover{
-fx-background-color: #ffffff;
}
我在 FlowPane 中有几个切换按钮,但它们都需要具有在控制器中确定的不同颜色。我怎样才能从控制器更改此悬停颜色?
在 CSS 文件中定义查找颜色:
.root {
button-hover-color: #ffffff ;
}
.button:hover {
-fx-background-color: button-hover-color ;
}
请注意,默认值 CSS 实际上设置了 -fx-color
属性,从中导出背景。因此,如果您想对其进行设置,使其以默认方式运行而无需进一步修改,请尝试
.root {
button-hover-color: -fx-hover-base ;
}
.button:hover {
-fx-color: button-hover-color ;
}
然后在您的控制器中 class 您只需更改按钮上查找的颜色(或任何容器上的颜色以将其应用于容器中的所有按钮):
public class MyController {
@FXML
private Button button ;
public void initialize() {
button.setStyle("button-hover-color: red ;");
}
}
这是一个完整的示例,使用上面的第二个 CSS 文件作为 style.css
。
Main.fxml:
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.layout.VBox?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.Button?>
<?import javafx.geometry.Insets?>
<VBox alignment="CENTER" spacing="20.0" xmlns="http://javafx.com/javafx/8.0.171" xmlns:fx="http://javafx.com/fxml/1" fx:controller="org.jamesd.examples.hover.Controller">
<Button fx:id="firstButton" text="First"/>
<Button fx:id="secondButton" text="Second"/>
<Button fx:id="thirdButton" text="Third"/>
</VBox>
Controller.java:
import javafx.fxml.FXML;
import javafx.scene.control.Button;
public class Controller {
@FXML
private Button firstButton ;
@FXML
private Button secondButton ;
@FXML
private Button thirdButton ;
public void initialize() {
firstButton.setStyle("button-hover-color: #7fc97f;");
secondButton.setStyle("button-hover-color: #beaed4;");
thirdButton.setStyle("button-hover-color: #fdc086;");
}
}
和App.java:
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;
import java.io.IOException;
public class App extends Application {
@Override
public void start(Stage stage) throws IOException {
Scene scene = new Scene(FXMLLoader.load(getClass().getResource("Main.fxml")), 640, 480);
scene.getStylesheets().add(getClass().getResource("style.css").toExternalForm());
stage.setScene(scene);
stage.show();
}
public static void main(String[] args) {
launch();
}
}
请注意,您也可以直接在 FXML 中配置按钮:
<Button fx:id="firstButton" text="First" style="button-hover-color: #7fc97f;"/>
等等
假设我在 JavaFX CSS 中有一个这样定义的切换按钮。
.btn:hover{
-fx-background-color: #ffffff;
}
我在 FlowPane 中有几个切换按钮,但它们都需要具有在控制器中确定的不同颜色。我怎样才能从控制器更改此悬停颜色?
在 CSS 文件中定义查找颜色:
.root {
button-hover-color: #ffffff ;
}
.button:hover {
-fx-background-color: button-hover-color ;
}
请注意,默认值 CSS 实际上设置了 -fx-color
属性,从中导出背景。因此,如果您想对其进行设置,使其以默认方式运行而无需进一步修改,请尝试
.root {
button-hover-color: -fx-hover-base ;
}
.button:hover {
-fx-color: button-hover-color ;
}
然后在您的控制器中 class 您只需更改按钮上查找的颜色(或任何容器上的颜色以将其应用于容器中的所有按钮):
public class MyController {
@FXML
private Button button ;
public void initialize() {
button.setStyle("button-hover-color: red ;");
}
}
这是一个完整的示例,使用上面的第二个 CSS 文件作为 style.css
。
Main.fxml:
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.layout.VBox?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.Button?>
<?import javafx.geometry.Insets?>
<VBox alignment="CENTER" spacing="20.0" xmlns="http://javafx.com/javafx/8.0.171" xmlns:fx="http://javafx.com/fxml/1" fx:controller="org.jamesd.examples.hover.Controller">
<Button fx:id="firstButton" text="First"/>
<Button fx:id="secondButton" text="Second"/>
<Button fx:id="thirdButton" text="Third"/>
</VBox>
Controller.java:
import javafx.fxml.FXML;
import javafx.scene.control.Button;
public class Controller {
@FXML
private Button firstButton ;
@FXML
private Button secondButton ;
@FXML
private Button thirdButton ;
public void initialize() {
firstButton.setStyle("button-hover-color: #7fc97f;");
secondButton.setStyle("button-hover-color: #beaed4;");
thirdButton.setStyle("button-hover-color: #fdc086;");
}
}
和App.java:
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;
import java.io.IOException;
public class App extends Application {
@Override
public void start(Stage stage) throws IOException {
Scene scene = new Scene(FXMLLoader.load(getClass().getResource("Main.fxml")), 640, 480);
scene.getStylesheets().add(getClass().getResource("style.css").toExternalForm());
stage.setScene(scene);
stage.show();
}
public static void main(String[] args) {
launch();
}
}
请注意,您也可以直接在 FXML 中配置按钮:
<Button fx:id="firstButton" text="First" style="button-hover-color: #7fc97f;"/>
等等