无法设置水平盒子或垂直盒子的样式-PHP中文网问答

非常令人沮丧，因为我遵循指南和基本教程。我可以将 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，各包含一个标签。几乎和 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>

还有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;
}

标签正确变为蓝色，但未应用 hbox 样式

事实上，这些建议都不起作用。

我尝试过：

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

对于每次更改，我都会更改标签的颜色，以确保新版本的 CSS 能够被读取。

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

全部回复(1)

P粉0418819242023-09-04 00:20:20 1楼

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

查看CSS 文档一个>.

对于HBox

对于标签

因此，HBox 不存在“.hbox”这样的样式类，除非您添加了一个样式类，但您还没有这样做。

CSS 选择器和 JavaFX 背景

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

应用示例

因此，您可以通过三种方法解决此问题：

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

在 CSS 文件中应用样式类：

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

并在 FXML 中写入：

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

或者在代码中写入：

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

在 CSS 文件中应用样式 ID：
```
#my-hbox-id { <css rules> }
```
并在 FXML 中写入：
```
<HBox id="my-hbox-id">
```
或者在代码中写入：
```
myHBox.setId("my-hbox-id");
```

选择器范围差异

每种方法的标准应用的含义有所不同：

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

赞 +0

添加回复