javaFX中使用CSS的样式按钮答案

【问题标题】：Styling button in javaFX using CSSjavaFX中使用CSS的样式按钮
【发布时间】：2014-09-22 12:25:57
【问题描述】：

我在 javaFX 中使用 CSS 设置按钮样式时遇到问题。我使用 Intellij Idea IDE。我有 CSS.css 文件：

#Button {
    -fx-padding: 8 15 15 15;
    -fx-background-insets: 0,0 0 5 0, 0 0 6 0, 0 0 7 0;
    -fx-background-radius: 8;
    -fx-background-color: 
        linear-gradient(from 0% 93% to 0% 100%, #a34313 0%, #903b12 100%),
        #9d4024,
        #d86e3a,
        radial-gradient(center 50% 50%, radius 100%, #d86e3a, #c54e2c);
    -fx-effect: dropshadow( gaussian , rgba(0,0,0,0.75) , 4,0,0,1 );
    -fx-font-weight: bold;
    -fx-font-size: 1.1em;
}
#Button:hover {
    -fx-background-color: 
        linear-gradient(from 0% 93% to 0% 100%, #a34313 0%, #903b12 100%),
        #9d4024,
        #d86e3a,
        radial-gradient(center 50% 50%, radius 100%, #ea7f4b, #c54e2c);
}
#Button:pressed {
    -fx-padding: 10 15 13 15;
    -fx-background-insets: 2 0 0 0,2 0 3 0, 2 0 4 0, 2 0 5 0;
}
#Button Text {
    -fx-fill: white;
    -fx-effect: dropshadow( gaussian , #a30000 , 0,0,0,2 );
}

样本.FXML

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.*?>
<?import java.lang.*?>
<?import javafx.scene.layout.*?>

<AnchorPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="94.0" prefWidth="271.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1">
   <children>
      <Button id="Button" layoutX="74.0" layoutY="26.0" mnemonicParsing="false" stylesheets="@../../../../Desktop/CSS.css" text="MyButtonStyle" />
   </children>
</AnchorPane>

这是主要课程：包装样品；

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.scene.layout.AnchorPane;
import javafx.stage.Stage;

public class Main extends Application {

    @Override
    public void start(Stage primaryStage) throws Exception{
        AnchorPane root = FXMLLoader.load(getClass().getResource("sample.fxml"));
        primaryStage.setTitle("Test");
        primaryStage.setScene(new Scene(root, root.getPrefWidth(), root.getPrefHeight()));
        primaryStage.show();
    }


    public static void main(String[] args) {
        launch(args);
    }
}

在 javaFX 场景生成器中，按钮样式已更改：

但是当我编译我的代码时，按钮会获得默认的 CSS 样式：

为什么当我编译我的代码时按钮样式没有改变？

【问题讨论】：

标签： css intellij-idea javafx-2 javafx-8 fxml

【解决方案1】：

这解决了我的问题

.button {
    -fx-padding: 8 15 15 15;
    -fx-background-insets: 0,0 0 5 0, 0 0 6 0, 0 0 7 0;
    -fx-background-radius: 8;
    -fx-background-color:
            linear-gradient(from 0% 93% to 0% 100%, #9b9d9e 0%, #7a7c7d 100%),
            #7a7c7d,
            #9b9d9e,
            radial-gradient(center 50% 50%, radius 100%, #7a7c7d, #9b9d9e);
    -fx-effect: dropshadow( gaussian , rgba(0,0,0,0.75) , 4,0,0,1 );
    -fx-font-weight: bold;
    -fx-font-size: 1.3em;
}
.button:hover {
    -fx-background-color:
            linear-gradient(from 0% 93% to 0% 100%, #9b9d9e 0%, #7a7c7d 100%),
            #7a7c7d,
            #9b9d9e,
            radial-gradient(center 50% 50%, radius 100%, #9b9d9e, #7a7c7d);
}
.button:pressed {
    -fx-padding: 10 15 13 15;
    -fx-background-insets: 2 0 0 0,2 0 3 0, 2 0 4 0, 2 0 5 0;
}
.button Text {
    -fx-fill: white;
    -fx-effect: dropshadow( gaussian , #a30000 , 0,0,0,2 );
}

项目结构

主类

public void start(Stage primaryStage) throws Exception{
        Parent root = FXMLLoader.load(getClass().getResource("IeltsDatabaseAutomation.fxml"));
        primaryStage.setTitle("IELTS Speaking database automation");
        Scene scene = new Scene(root, 500, 600);
        scene.getStylesheets().add(getClass().getResource("style.css").toExternalForm());
        primaryStage.setScene(scene);
        primaryStage.show();
    }

【讨论】：

【解决方案2】：

您的 css 文件没有问题。主要原因是 CSS.css 文件没有与您的项目正确链接，所以现在将 CSS.css 文件放在您的项目目录中，然后重试。您可以在JavaFX CSS BUtton 了解更多信息

【讨论】：

【解决方案3】：

为了解决我的问题，我使用 JavaFX Scene Builder 将 .css 文件的目录从 Desktop 更改为 src\sample。

【讨论】：