我想在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中完成这项工作?
如果我要更改文字,它也会自动更改样式
Option 1:控件样式(按ID)您可以通过使用在更改文本时更改样式的自定义标签来实现。我将通过更改标签的ID进行演示。这个简化的示例使用文本作为id:
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 fx:id="root" 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="""" />
</children>
</StackPane>
基于ID(Root.css
)更改背景颜色的简单CSS:
#1{
-fx-background-color: red;
-fx-text-fill: white;
}
#2{
-fx-background-color: yellow;
-fx-text-fill: red;
}
#3{
-fx-background-color: green;
-fx-text-fill: yellow;
}
测试类:
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 LabelCssTest extends Application {
@Override public void start(Stage stage) throws IOException {
Parent root = FXMLLoader.load(getClass().getResource("Root.fxml"));
stage.setScene(new Scene(root));
stage.show();
}
public static void main(String[] args) {
launch(args);
}
}
和测试控制器:
import javafx.animation.PauseTransition;
import javafx.fxml.FXML;
import javafx.scene.Parent;
import javafx.util.Duration;
public class Controller {
@FXML
CustomLabel cLabel;
@FXML Parent root;
private static final int MIN_VALUE = 1, MAX_VALUE = 3;
private int counter = MIN_VALUE;
@FXML
private void initialize() {
root.getStylesheets().add(getClass().getResource("Root.css").toExternalForm());
cLabel.setTextAndId(String.valueOf(counter++));
PauseTransition pause = new PauseTransition(Duration.seconds(2));
pause.setOnFinished(event ->{
cLabel.setTextAndId(String.valueOf(counter++));
if(counter > MAX_VALUE) {
counter = MIN_VALUE;
}
pause.play();
});
pause.play();
}
}
Option 2:通过更改样式类来控制样式使用与选项1相同的测试类。
Root.fxml
:
<?xml version="1.0" encoding="UTF-8"?> <?import javafx.scene.control.Label?> <?import javafx.scene.layout.StackPane?> <StackPane fx:id="root" xmlns="http://javafx.com/javafx/10.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="tests.Controller"> <children> <Label fx:id="label" alignment="CENTER" contentDisplay="CENTER" prefHeight="20.0" prefWidth="70.0" text="" "" /> </children> </StackPane>
Root.css
:
.style1{ -fx-background-color: red; -fx-text-fill: white; } .style2{ -fx-background-color: yellow; -fx-text-fill: red; } .style3{ -fx-background-color: green; -fx-text-fill: yellow; }
和控制器:
控件样式,使用import javafx.animation.PauseTransition; import javafx.beans.binding.Bindings; import javafx.beans.property.SimpleIntegerProperty; import javafx.beans.value.ChangeListener; import javafx.fxml.FXML; import javafx.scene.Parent; import javafx.scene.control.Label; import javafx.util.Duration; public class Controller { @FXML Label label; @FXML Parent root; private static final int MIN_VALUE = 1, MAX_VALUE = 3; private SimpleIntegerProperty counter = new SimpleIntegerProperty(); @FXML private void initialize() { root.getStylesheets().add(getClass().getResource("Root.css").toExternalForm()); counter = new SimpleIntegerProperty(); counter.addListener((ChangeListener<Number>) (observable, oldValue, newValue) -> { label.getStyleClass().clear(); label.getStyleClass().add("style"+counter.get()); }); label.textProperty().bind(Bindings.createStringBinding(()->String.valueOf(counter.get()), counter)); counter.set(1); PauseTransition pause = new PauseTransition(Duration.seconds(2)); pause.setOnFinished(event ->{ counter.set(counter.get() >= MAX_VALUE ? MIN_VALUE : counter.get()+1); pause.play(); }); pause.play(); } }
选项3:
PseudoClass
:对选项2的更改:Root.css
:.root:style1 #label{ -fx-background-color: red; -fx-text-fill: white; } .root:style2 #label{ -fx-background-color: yellow; -fx-text-fill: red; } .root:style3 #label{ -fx-background-color: green; -fx-text-fill: yellow; }
和控制器:
import javafx.animation.PauseTransition;
import javafx.beans.binding.Bindings;
import javafx.beans.property.SimpleIntegerProperty;
import javafx.beans.value.ChangeListener;
import javafx.css.PseudoClass;
import javafx.fxml.FXML;
import javafx.scene.Parent;
import javafx.scene.control.Label;
import javafx.util.Duration;
public class Controller {
@FXML Label label;
@FXML Parent root;
private static final int MAX_VALUE = 3;
private SimpleIntegerProperty counter = new SimpleIntegerProperty(1);
@FXML
private void initialize() {
root.getStylesheets().add(getClass().getResource("Root.css").toExternalForm());
counter = new SimpleIntegerProperty();
counter.addListener((ChangeListener<Number>) (observable, oldValue, newValue) -> {
updateStates();
});
label.textProperty().bind(Bindings.createStringBinding(()->String.valueOf(counter.get()), counter));
counter.set(1);
PauseTransition pause = new PauseTransition(Duration.seconds(2));
pause.setOnFinished(event ->{
counter.set(counter.get() >= MAX_VALUE ? 1 : counter.get()+1);
pause.play();
});
pause.play();
}
private void updateStates() {
for( int index = 1; index <= MAX_VALUE; index++){
PseudoClass pc = PseudoClass.getPseudoClass("style"+String.valueOf(index));
root.pseudoClassStateChanged(pc, index == counter.get() ? true : false);
}
}
}
如果只想根据文本更改Label
的背景色,也可以只创建这样的方法,并在需要时为每个Label
调用它。