無法設定水平盒子或垂直盒子的樣式

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，各包含一個標籤。幾乎跟 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 能夠被讀取。

標籤總是改變顏色，但我從來沒有在水平盒中得到背景或填充

Answer 1

為什麼您目前的方法失敗​​了

檢視CSS 文件.

對於HBox

#

對於標籤

因此，HBox 不存在“.hbox”這樣的樣式類，除非您添加了一個樣式類，但您還沒有這樣做。

CSS 選擇器和 JavaFX 背景

閱讀標題為 " 的部分CSS 和 JavaFX 場景圖」：

應用範例

因此，您可以透過三種方法解決此問題：

1. 在 CSS 檔案中使用類型選擇器：

   HBox { <css rules> }

2. 在 CSS 檔案中套用樣式類別：

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

   並在 FXML 中寫入：

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

   或在程式碼中寫入：

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

3. 在 CSS 檔案中套用樣式 ID：

   #my-hbox-id { <css rules> }

   並在 FXML 中寫入：

   <HBox id="my-hbox-id">

   或在程式碼中寫入：

   myHBox.setId("my-hbox-id");

選擇器範圍差異

#每種方法的標準應用的意義有所不同：

1. 類型選擇器將套用於使用者介面中的所有 HBox 類型。
2. 類別選擇器將套用於應用了給定樣式類別的任何內容。
3. id ​​選擇器通常用於 UI 中的單一節點，而不是節點的類型或類別。它在 FXML 文件或場景圖樹中應該是唯一的，儘管這不是強制的。