使用CSS在javaFX中使用样式按钮 [英] Styling button in javaFX using CSS

问题描述

我在使用CSS的javaFX中使用样式按钮时遇到问题。
我使用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：
线性渐变（从0％93％到0％100％，＃a34313 0％，＃903b12 100％），
＃9d4024，
＃d86e3a，
径向渐变（中心50％50％，半径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：悬停{
 -fx-background-color：
线性渐变（从0％93％到0％100％，＃a34313 0％，＃ 903b12 100％），
＃9d4024，
＃d86e3a，
径向渐变（中心50％50％，半径100％，＃ea7f4b，＃c54e2c）; 
} 
 #Button：按{
 -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（高斯，＃a30000,0,0,0,2）; 
} 
  

sample.FXML

 <？xml version =1.0encoding =UTF-8？> 
 
<？import javafx.scene.control。*？> 
<？import java.lang。*？> 
<？import javafx.scene.layout。*？> 
 
< AnchorPane maxHeight = -  InfinitymaxWidth = -  InfinityminHeight = -  InfinityminWidth = -  InfinityprefHeight =94.0prefWidth =271.0xmlns =http： //javafx.com/javafx/8xmlns：fx =http://javafx.com/fxml/1> 
< children> 
< Button id =ButtonlayoutX =74.0layoutY =26.0mnemonicParsing =falsestylesheets =@ .. / .. / .. / .. / Desktop / CSS.csstext =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; 
 
公共类Main扩展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样式：

为什么我编译代码时按钮样式不会改变？

解决方案

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

I have a problem with styling button in javaFX using CSS. I use Intellij Idea IDE. I have CSS.css file :

#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 );
}

sample.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>

and this is the main class : package sample;

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);
    }
}

in javaFX Scene builder the button style is changed :

But when I compile my code the button get the default CSS style :

Why when I compile my code the button style dosen't change?

解决方案

To solve my problem , I changed the directory of .css file from Desktop to src\sample using JavaFX Scene Builder.

这篇关于使用CSS在javaFX中使用样式按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！