Question

我想在javafx中显示不同的标签，并且要根据其文本设置样式。我添加了一个CSS文件并设置了标签的类。然后，我检查了fxml，发现该文本已保存在text属性中。

我调查了普通的CSS，发现在那里可以通过属性更改样式。您需要为此使用[]。我在我的代码中尝试过，但没有成功。

我的代码： FXML：

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

<?import java.net.URL?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.layout.HBox?>

<HBox xmlns="http://javafx.com/javafx/8.0.121" xmlns:fx="http://javafx.com/fxml/1"
      fx:controller="controller">
    <stylesheets>
        <URL value="@../css/loadingScreen.css"/>
    </stylesheets>
    <Label styleClass="field" text="1" />
    <Label styleClass="field" text="2" />
    <Label styleClass="field" text="3" />
</HBox>

CSS：

.field {
    -fx-text-alignment: center;
    -fx-pref-height: 64px;
    -fx-min-width: 64px;
    -fx-pref-width: 64px;
    -fx-min-height: 64px;
    -fx-background-color: blue;
}

.field[text="1"]{
    -fx-background-color: red;
}

.field[text="2"]{
    -fx-background-color: yellow;
}

.field[text="3"]{
    -fx-background-color: green;
}

我用普通的css和html尝试了同样的方法，并且在那里工作了。 HTML：

<!DOCTYPE html>
<html>
<head>
<style>
.field[text="1"]{
    background-color: red;
}

.field[text="2"]{
    background-color: yellow;
}

.field[text="3"]{
    background-color: green;
}
</style>
</head>
<body>

<div class="field" text="1" >1</div>
<div class="field" text="2" >2</div>
<div class="field" text="3" >3</div>

</body>
</html>

要在fxml中进行这项工作，我需要做什么？

Answer 1

如果我要更改文字，它也会自动更改风格

您可以通过使用在更改文本时更改样式的自定义标签来实现。我将通过更改标签的ID进行演示。这个简化的示例使用文本作为id：

package tests;

import javafx.geometry.Pos;
import javafx.scene.control.Label;

public class CustomLabel extends Label{

    public CustomLabel() {
        setAlignment(Pos.CENTER);
        setPrefSize(50, 25);
    }

    void setTextAndId(String s){
        super.setText(s);
        /*To keep this demo simple and clear id is changed.
          If used, care must be taken to keep id unique. 
          Using setStyle() or PseudoClass should be preferred 
        */
        setId(s); 
    }
}

自定义标签可以在fxml（Root.fxml）中使用：

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

<?import javafx.scene.control.Label?>
<?import javafx.scene.layout.StackPane?>
<?import tests.CustomLabel?>

<StackPane xmlns="http://javafx.com/javafx/10.0.1" xmlns:fx="http://javafx.com/fxml/1" 
fx:controller="tests.Controller">
   <children>
      <CustomLabel fx:id="cLabel" text="&quot;&quot;" />
   </children>
</StackPane>

一个简单的CSS，它根据ID（Root.css）更改背景颜色：

#1{
    -fx-background-color: red;
}
#2{
    -fx-background-color: yellow;
}

#3{
    -fx-background-color: green;
}

测试类：

package tests;

import java.io.IOException;
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class TestCustomLabel extends Application {

    @Override public void start(Stage stage) throws IOException {

        Parent root = FXMLLoader.load(getClass().getResource("Root.fxml"));
        root.getStylesheets().add(getClass().getResource("Root.css").toExternalForm());
        stage.setScene(new Scene(root));
        stage.show();
    }

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

和测试控制器：

package tests;

import javafx.animation.PauseTransition;
import javafx.fxml.FXML;
import javafx.util.Duration;

public class Controller {

    @FXML
    CustomLabel cLabel;
    private int counter = 1;

    @FXML
    private void initialize() {

        cLabel.setTextAndId(String.valueOf(counter++));

        PauseTransition pause = new PauseTransition(Duration.seconds(2));
        pause.setOnFinished(event ->{
            cLabel.setTextAndId(String.valueOf(counter++));
            if(counter > 3) {
                counter = 1;
            }
            pause.play();
        });
        pause.play();
    }
}

Answer 2

如果您只想更改Label的背景颜色（取决于文本），也可以创建这样的方法，并在需要时为每个Label调用它

import javafx.scene.control.Label;
import javafx.geometry.Insets;
import javafx.scene.layout.Background;
import javafx.scene.layout.BackgroundFill;
import javafx.scene.layout.CornerRadii;
import javafx.scene.paint.Color;    

private void backgroundColorTextDependent(Label label) {
        if (label.getText().equals("1")) {
            label.setBackground(new Background(new BackgroundFill(Color.BLACK, CornerRadii.EMPTY, Insets.EMPTY)));
        } else if (label.getText().equals("2")) {
            label.setBackground(new Background(new BackgroundFill(Color.YELLOW, CornerRadii.EMPTY, Insets.EMPTY)));
        } else if (label.getText().equals("3")) {
            label.setBackground(new Background(new BackgroundFill(Color.GREEN, CornerRadii.EMPTY, Insets.EMPTY)));
        } else {
            label.setBackground(new Background(new BackgroundFill(Color.BLUE, CornerRadii.EMPTY, Insets.EMPTY)));
        }

有没有办法通过javafx中的元素属性更改元素的样式？

2 个答案: