英文:
Cannot style hbox or vbox
问题
以下是您要翻译的内容:
"Quite frustrating as I follow guidelines and basic tutorial. I can apply CSS styles to different elements but not to vbox or hbox.
I have the following simple Apps creating a simple scene using a FMXL and CSS:
import java.net.URL;
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.stage.Stage;
import javafx.scene.Parent;
import javafx.scene.Scene;
public class BingRen extends Application {
@Override
public void start(Stage primaryStage) {
Parent root = null;
FXMLLoader loader = new FXMLLoader();
URL xmlUrl = getClass().getResource("/BingRen.fxml");
loader.setLocation(xmlUrl);
try {
root = loader.load();
Scene scene = new Scene(root,400,400);
scene.getStylesheets().add(getClass().getResource("BingRen.css").toExternalForm());
primaryStage.setScene(scene);
primaryStage.show();
} catch(Exception e) {
e.printStackTrace();
}
}
public static void main(String[] args) {
launch(args);
}
}
With FXML, creating just a BordPane and 2 HBox containing one label each. Almost as simple as HellopApp :
<?xml version="1.0" encoding="UTF-8"?>
<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.geometry.*?>
<BorderPane fx:id="rootBorderPane"
xmlns="http://javafx.com/javafx"
xmlns:fx="http://javafx.com/fxml"
fx:controller="MainControler">
<top>
<HBox>
<Label text="BingRen app" />
</HBox>
</top>
<bottom>
<HBox>
<Label text="Status bar" />
</HBox>
</bottom>
<center>
</center>
</BorderPane>
And CSS to set some basic properties:
.hbox {
-fx-background-color: #00ff00;
-fx-border-color: #00ff00;
-fx-border-width: 2px;
-fx-padding: 10;
-fx-spacing: 8;
}
.label {
-fx-text-fill: #0000ff;
}
Label properly turns blue but none of the hbox styles are applied.
In fact, none of the suggestions worked.
I tried:
- Change .hbox to .Hbox in CSS file
- Make a #allbox in CSS file and add fx-id="allbox" in the FXML file
For every change, I changed the color for the label to ensure the new version of CSS is read through.
Label always changes color, but I never get background or paddings in the Hboxes."
英文:
Quite frustrating as I follow guidelines and basic tutorial. I can apply CSS styles to differnt elements but not to vbox or hbox.
I have the following simple Apps creating a simple scene using a FMXL and CSS:
import java.net.URL;
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.stage.Stage;
import javafx.scene.Parent;
import javafx.scene.Scene;
public class BingRen extends Application {
@Override
public void start(Stage primaryStage) {
Parent root = null;
FXMLLoader loader = new FXMLLoader();
URL xmlUrl = getClass().getResource("/BingRen.fxml");
loader.setLocation(xmlUrl);
try {
root = loader.load();
Scene scene = new Scene(root,400,400);
scene.getStylesheets().add(getClass().getResource("BingRen.css").toExternalForm());
primaryStage.setScene(scene);
primaryStage.show();
} catch(Exception e) {
e.printStackTrace();
}
}
public static void main(String[] args) {
launch(args);
}
}
With FXML, creating just a BordPane and 2 HBox containing one label each. Almost as simple as HellopApp :
<?xml version="1.0" encoding="UTF-8"?>
<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.geometry.*?>
<BorderPane fx:id="rootBorderPane"
xmlns="http://javafx.com/javafx"
xmlns:fx="http://javafx.com/fxml"
fx:controller="MainControler">
<top>
<HBox>
<Label text="BingRen app" />
</HBox>
</top>
<bottom>
<HBox>
<Label text="Status bar" />
</HBox>
</bottom>
<center>
</center>
</BorderPane>
And CSS to set some basic properties:
.hbox {
-fx-background-color: #00ff00;
-fx-border-color: #00ff00;
-fx-border-width: 2px;
-fx-padding: 10;
-fx-spacing: 8;
}
.label {
-fx-text-fill: #0000ff;
}
Label properly turn blue but not of the hbox style are applied
In fact none of the suggestion worked.
I tried :
- Change .hbox to .Hbox in css file
- Make a #allbox in css file and add fx-id="allbox" and fxml file
For every change, I change the color for label to ensure the new version of css is read through.
Label always change color but I never get backgroung or paddings in the Hboxes
答案1
得分: 6
为什么你当前的方法失败
查看CSS文档。
对于HBox
> 样式类:默认为空
对于Label
> 样式类:label
因此,对于HBox,除非添加一个样式类(而你没有添加),否则不存在类似“.hbox”的样式类。
CSS选择器和JavaFX的背景
阅读标题为“CSS和JavaFX场景图” 的部分(链接):
> CSS选择器用于将样式匹配到场景图节点。节点与CSS选择器的关系如下:
>
> * Node的getTypeSelector方法返回一个字符串,类似于CSS Type Selector。默认情况下,此方法返回类的简单名称。请注意,内部类或匿名类的简单名称可能无法用作类型选择器。在这种情况下,应重写此方法以返回有意义的值。
> * 场景图中的每个节点都有一个styleClass属性。请注意,节点可能有多个样式类。Node的styleClass类似于出现在HTML元素上的class="..."属性。请参阅Class Selectors。
> * 场景图中的每个节点都有一个id变量,一个字符串。这类似于出现在HTML元素上的id="..."属性。请参阅ID Selectors。
应用示例
因此,有三种方法可以解决此问题:
-
在CSS文件中使用类型选择器:
HBox { <css规则> }
-
在CSS文件中应用样式类:
.my-hbox-styleclass { <css规则> }
并在FXML中写:
<HBox styleClass="my-hbox-styleclass">
或在代码中写:
myHBox.getStyleClass().add("my-hbox-styleclass");
-
在CSS文件中应用样式ID:
#my-hbox-id { <css规则> }
并在FXML中写:
<HBox id="my-hbox-id">
或在代码中写:
myHBox.setId("my-hbox-id");
选择器范围差异
对于每种方法的标准应用,存在以下差异:
- 类型选择器将应用于UI中的所有HBox类型。
- 样式类选择器将应用于具有给定样式类的任何内容。
- ID选择器通常用于UI中的单个节点,而不是节点的类型或类。在FXML文档或场景图树中应该是唯一的,尽管这并不是强制执行的。
英文:
Why your current approach fails
Look at the CSS documentation.
For HBox
> Style class: empty by default
For Label
> Style class: label
So there is no such style class as ".hbox" for a HBox unless you add one, which you have not done.
Background on CSS selectors and JavaFX
Read the section titled "CSS and the JavaFX Scene Graph":
> CSS selectors are used to match styles to scene‑graph nodes. The
> relationship of a Node to a CSS selector is as follows:
>
> * Node's getTypeSelector method returns a String which is analogous to a
> CSS Type Selector. By default, this method returns the simple name of
> the class. Note that the simple name of an inner class or of an
> anonymous class may not be usable as a type selector. In such a case,
> this method should be overridden to return a meaningful value.
> * Each
> node in the scene‑graph has a styleClass property. Note that a node
> may have more than one style‑class. A Node's styleClass is analogous
> to the class="..." attribute that can appear on HTML elements. See
> Class Selectors.
> * Each node in the scene‑graph has an id variable, a
> string. This is analogous to the id="..." attribute that can appear
> HTML elements. See ID Selectors.
Application examples
So there are three ways you can fix this:
-
Use a type selector in your CSS file:
HBox { <css rules> }
-
Apply a style class in your CSS file:
.my-hbox-styleclass { <css rules> }
And in FXML write:
<HBox styleClass="my-hbox-styleclass">
OR in code write:
myHBox.getStyleClass().add("my-hbox-styleclass");
-
Apply a style id in your CSS file:
#my-hbox-id { <css rules> }
And in FXML write:
<HBox id="my-hbox-id">
OR in code write:
myHBox.setId("my-hbox-id");
Selector scope differences
There are differences in the meaning for the standard application of each approach:
- The type selector will apply to all HBox types in your UI.
- The class selector will apply to anything which has the given style class applied.
- The id selector is usually used for a single node in the UI, rather than a type or class of node. It should be unique within an FXML document or scene graph tree, though this is not enforced.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论