无法设置 hbox 或 vbox 的样式

Question

我遵循指南和基本教程时非常沮丧。我可以将 CSS 样式应用于不同的元素，但不能应用于 vbox 或 hbox。

我有以下简单的应用程序，使用 FMXL 和 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);
    }
}

使用 FXML，只创建一个 BordPane 和 2 个 HBox，每个包含一个标签。几乎和 HelloApp 一样简单：

<?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>

和CSS设置一些基本属性：

.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 正确变成蓝色但没有应用 hbox 样式

Answer 1

为什么您当前的方法失败了

查看CSS文档.

对于HBox

样式类：默认为空

对于标签

样式类：label

因此，除非您添加一个 HBox，否则没有诸如“.hbox”之类的样式类，而您还没有这样做。

CSS 选择器和 JavaFX 的背景

阅读标题为 “CSS 和 JavaFX 场景图”的部分：

CSS 选择器用于将样式与场景图节点匹配。这节点与 CSS 选择器的关系如下：

Node 的 getTypeSelector 方法返回一个类似于 CSS 类型选择器。默认情况下，此方法返回的简单名称班上。请注意，内部类或内部类的简单名称匿名类可能不能用作类型选择器。在这种情况下，应该重写此方法以返回有意义的值。

每个场景图中的节点有一个 styleClass 属性。注意一个节点可能有不止一个样式类。一个 Node 的 styleClass 是类似的可以出现在 HTML 元素上的 class="..." 属性。看类选择器。

场景图中的每个节点都有一个 id 变量，一个细绳。这类似于可以出现的 id="..." 属性 HTML 元素。请参阅 ID 选择器。

应用实例

所以您可以通过三种方式解决这个问题：

在您的 CSS 文件中使用 类型选择器：
```
.HBox { <css rules> }
```

在您的 CSS 文件中应用样式类：

.my-hbox-styleclass { <css rules> }

然后在 FXML 中写：

<HBox styleClass="my-hbox-styleclass">

或在代码中写：

myHBox.getStyleClass().add("my-hbox-styleclass");

在你的 CSS 文件中应用一个 style id：
```
#my-hbox-id { <css rules> }
```
然后在 FXML 中写：
```
<HBox id="my-hbox-id">
```
或在代码中写：
```
myHBox.setId("my-hbox-id");
```

选择器范围差异

每种方法的标准应用在含义上存在差异：

类型选择器 将应用于您 UI 中的所有 HBox 类型。
类选择器将应用于应用了给定样式类的任何对象。
id 选择器 通常用于 UI 中的单个节点，而不是节点的类型或类别。它在 FXML 文档或场景图树中应该是唯一的，尽管这不是强制执行的。

Answer 2

已解决

FXMl 文件内：

<HBox styleClass="allbox">

内部 CSS 文件：

.allbox {...

应用所有属性

Answer 3

事实上，这些建议都没有奏效。

我试过了：

在 css 文件中将 .hbox 更改为 .Hbox
在 css 文件中创建一个 #allbox 并添加 fx-id="allbox" 和 fxml 文件

对于每一个变化，我都会改变标签的颜色，以确保新版本的 css 被阅读。

标签总是改变颜色，但我从来没有在 Hboxes 中得到背景或填充

Answer 4

您面临的问题是因为您的 HBox 元素的 CSS 选择器不正确。您使用“.hbox”作为选择器，但正确的选择器是“.Hbox”。区别在于“HBox”中“b”的大写。

无法设置 hbox 或 vbox 的样式

问题描述投票：0回答：4

4个回答

最新问题

无法设置 hbox 或 vbox 的样式

问题描述 投票：0回答：4

4个回答

最新问题

问题描述投票：0回答：4