无法让 JavaFX Separator 设置不同颜色的样式
Can't get JavaFX Separator to style with a different color
我想做的就是在 VBox 中的元素之间添加一个分隔符,但我希望分隔线的颜色与默认颜色不同。我们以红色为例。
我能找到的唯一 CSS 会改变线条颜色的是:
.separator {
-fx-padding: 8;
}
.separator .line {
-fx-background-color: red;
-fx-pref-height: 5;
}
但这似乎添加了第二行并且它没有为第一行着色,正如您在此处看到的那样:
它需要看起来像这样:
这是一个显示问题的工作示例。如果您 运行 此代码,则需要将其添加到您的 POM 文件中:
<dependency>
<groupId>com.simtechdata</groupId>
<artifactId>Switcher</artifactId>
<version>1.3.4</version>
</dependency>
并创建一个名为 Separator.css 的 CSS 文件并将其放在资源文件夹中。 css 文件的内容已经在这个 post 中(我 post 编辑的第一个代码片段)。
这里是运行宁class:
package sample;
import com.simtechdata.Switcher;
import javafx.application.Application;
import javafx.scene.control.Label;
import javafx.scene.control.Separator;
import javafx.scene.layout.AnchorPane;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
public class Main extends Application {
private final ClassLoader resource = ClassLoader.getSystemClassLoader();
@Override
public void start(Stage primaryStage) throws Exception{
String separatorCSS = resource.getResource("Separator.css").toExternalForm(); AnchorPane ap = new AnchorPane();
ap.setPrefWidth(300);
ap.setPrefHeight(400);
Switcher.addScene(10,ap,300,400);
ap.setStyle("-fx-background-color: black");
Label label1 = new Label("Example Text");
Label label2 = new Label("More Example Text");
label1.setStyle("\t-fx-font-size: 24pt;\n" +
"\t-fx-font-family: \"Segoe UI Semibold\";\n" +
"\t-fx-text-fill: rgb(255,155,0);\n" +
"\t-fx-alignment: center;\n");
label2.setStyle("\t-fx-font-size: 24pt;\n" +
"\t-fx-font-family: \"Segoe UI Semibold\";\n" +
"\t-fx-text-fill: rgb(255,155,0);\n" +
"\t-fx-alignment: center;\n");
Separator separator = new Separator();
separator.getStylesheets().add(separatorCSS);
VBox vbox = new VBox();
vbox.getChildren().addAll(label1,separator,label2);
ap.getChildren().add(vbox);
Switcher.showScene(10);
}
public static void main(String[] args) {
launch(args);
}
}
有谁知道如何以编程方式或使用 CSS 更改 JavaFX 分隔线的颜色?
谢谢,
迈克·西姆斯
默认情况下,Separator
has a border(对于水平分隔符,边框在顶部)。这是您看到的白线。
去掉边框即可,例如:
.separator .line {
-fx-background-color: red;
-fx-pref-height: 5;
-fx-border-color: null ;
}
我想做的就是在 VBox 中的元素之间添加一个分隔符,但我希望分隔线的颜色与默认颜色不同。我们以红色为例。
我能找到的唯一 CSS 会改变线条颜色的是:
.separator {
-fx-padding: 8;
}
.separator .line {
-fx-background-color: red;
-fx-pref-height: 5;
}
但这似乎添加了第二行并且它没有为第一行着色,正如您在此处看到的那样:
它需要看起来像这样:
这是一个显示问题的工作示例。如果您 运行 此代码,则需要将其添加到您的 POM 文件中:
<dependency>
<groupId>com.simtechdata</groupId>
<artifactId>Switcher</artifactId>
<version>1.3.4</version>
</dependency>
并创建一个名为 Separator.css 的 CSS 文件并将其放在资源文件夹中。 css 文件的内容已经在这个 post 中(我 post 编辑的第一个代码片段)。
这里是运行宁class:
package sample;
import com.simtechdata.Switcher;
import javafx.application.Application;
import javafx.scene.control.Label;
import javafx.scene.control.Separator;
import javafx.scene.layout.AnchorPane;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
public class Main extends Application {
private final ClassLoader resource = ClassLoader.getSystemClassLoader();
@Override
public void start(Stage primaryStage) throws Exception{
String separatorCSS = resource.getResource("Separator.css").toExternalForm(); AnchorPane ap = new AnchorPane();
ap.setPrefWidth(300);
ap.setPrefHeight(400);
Switcher.addScene(10,ap,300,400);
ap.setStyle("-fx-background-color: black");
Label label1 = new Label("Example Text");
Label label2 = new Label("More Example Text");
label1.setStyle("\t-fx-font-size: 24pt;\n" +
"\t-fx-font-family: \"Segoe UI Semibold\";\n" +
"\t-fx-text-fill: rgb(255,155,0);\n" +
"\t-fx-alignment: center;\n");
label2.setStyle("\t-fx-font-size: 24pt;\n" +
"\t-fx-font-family: \"Segoe UI Semibold\";\n" +
"\t-fx-text-fill: rgb(255,155,0);\n" +
"\t-fx-alignment: center;\n");
Separator separator = new Separator();
separator.getStylesheets().add(separatorCSS);
VBox vbox = new VBox();
vbox.getChildren().addAll(label1,separator,label2);
ap.getChildren().add(vbox);
Switcher.showScene(10);
}
public static void main(String[] args) {
launch(args);
}
}
有谁知道如何以编程方式或使用 CSS 更改 JavaFX 分隔线的颜色?
谢谢,
迈克·西姆斯
默认情况下,Separator
has a border(对于水平分隔符,边框在顶部)。这是您看到的白线。
去掉边框即可,例如:
.separator .line {
-fx-background-color: red;
-fx-pref-height: 5;
-fx-border-color: null ;
}