如何通过属性更改组件的样式？
我想在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相同的方法，它在那里工作。网页：
<!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中做到这一点？
斯蒂芬大帝浏览 85回答 2
2回答
-
噜噜哒
如果我改变文本，它也会自动改变风格选项 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>一个简单的 css，它根据 id （） 更改背景颜色：Root.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(); }}选项 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(); }}Option 3: control style by using :Changes from option 2::PseudoClassRoot.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;}And controller: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); } }} -
jeck猫
如果您只想根据文本更改 的背景颜色，也可以创建一个这样的方法，并在需要时为每个方法调用它。LabelLabelimport 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))); }
随时随地看视频慕课网APP
相关分类
Java