使用 JavaFx，如何僅在填充內更改面板背景顏色？

Question

我在 JavaFx 中有一個面板，我正在嘗試僅在應用的填充內更改面板顏色。 使用此代碼...

control_box.setStyle(
                "-fx-background-color: #f4f4f4;" + 
                "-fx-background-padding: 10;" +     
                "-fx-padding: 10;" + 
                "-fx-border-style: solid inside;" + 
                "-fx-border-width: 2;" +
                "-fx-border-insets: 5;" + 
                "-fx-border-radius: 5;" + 
                "-fx-border-color: lightgrey;"
               );

我得到這個結果...

我試圖讓藍色一直到填充邊界。 我是使用 css 的新手，因此我們將不勝感激。

Answer 1

首先，在 JavaFX CSS 中沒有 css 屬性“-fx-background-padding”。

您可以使用 css 屬性“-fx-background-insets”設置多個背景和 position。 這是一個非常強大/有用的屬性，幾乎整個預定義的 css（在 modena.css 中）都依賴於它來設置控件的樣式。

話雖如此，在造型方面不會有單一的具體解決方案。 您可以通過多種方式獲得相同的效果（由@n247s 和@jewelsea 指定）。
除了這兩個之外，獲得所需行為的另一種方法是使用“-fx-background-insets”。

方法一

如果您非常具體地使用“-fx-border-insets”，您可以在背景中添加額外的顏色，並使用 -fx-background-padding 控制兩個 colors。

在下面的代碼中，我包含了“透明”顏色並管理它以渲染所需的空間，然后從那里開始渲染所需的顏色（#f4f4f4）。

controlBox1.setStyle(
            "-fx-background-color: transparent, #f4f4f4;" +
                    "-fx-background-insets:0, 5;" +
                    "-fx-background-radius: 5;" +
                    //"-fx-background-padding: 10;" +
                    "-fx-padding: 10;" +
                    "-fx-border-style: solid inside;" +
                    "-fx-border-width: 2;" +
                    "-fx-border-insets: 5;" +
                    "-fx-border-radius: 5;" +
                    "-fx-border-color: lightgrey;"
    );

方法二

如果您有一種邊框顏色，我不建議使用“-fx-border-insets”。 如果您設法設置邊距（如@jewelsea 所述），您可以刪除“-fx-border-insets”。

HBox.setMargin(controlBox2, new Insets(5));
controlBox2.setStyle(
        "-fx-background-color: #f4f4f4;" +
                "-fx-background-radius: 5;" +
                //"-fx-background-padding: 10;" +
                "-fx-padding: 10;" +
                "-fx-border-style: solid inside;" +
                "-fx-border-width: 2;" +
                // "-fx-border-insets: 5;" +
                "-fx-border-radius: 5;" +
                "-fx-border-color: lightgrey;"
);

請注意，我在兩種方法中都包含“-fx-background-radius”以避免邊緣背景角。

工作示例：

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.layout.HBox;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;

public class BackgroundPadding_Demo extends Application {
    @Override
    public void start(Stage stage) throws Exception {
        StackPane root = new StackPane();
        root.setStyle("-fx-background-color:lightblue;");
        Scene scene = new Scene(root, 500, 200);
        stage.setScene(scene);
        stage.show();

        StackPane controlBox1 = new StackPane(new Label("Box1"));
        controlBox1.setAlignment(Pos.TOP_LEFT);
        controlBox1.setMinSize(200, 100);
        controlBox1.setMaxSize(200, 100);
        controlBox1.setStyle(
                "-fx-background-color: transparent, #f4f4f4;" +
                        "-fx-background-insets:0, 5;" +
                        "-fx-background-radius: 5;" +
                        //"-fx-background-padding: 10;" +
                        "-fx-padding: 10;" +
                        "-fx-border-style: solid inside;" +
                        "-fx-border-width: 2;" +
                        "-fx-border-insets: 5;" +
                        "-fx-border-radius: 5;" +
                        "-fx-border-color: lightgrey;"
        );

        StackPane controlBox2 = new StackPane(new Label("Box2"));
        controlBox2.setAlignment(Pos.TOP_LEFT);
        controlBox2.setMinSize(200, 100);
        controlBox2.setMaxSize(200, 100);
        HBox.setMargin(controlBox2, new Insets(5));
        controlBox2.setStyle(
                "-fx-background-color: #f4f4f4;" +
                        "-fx-background-radius: 5;" +
                        //"-fx-background-padding: 10;" +
                        "-fx-padding: 10;" +
                        "-fx-border-style: solid inside;" +
                        "-fx-border-width: 2;" +
                        // "-fx-border-insets: 5;" +
                        "-fx-border-radius: 5;" +
                        "-fx-border-color: lightgrey;"
        );

        HBox hBox = new HBox(controlBox1, controlBox2);
        hBox.setSpacing(15);
        hBox.setAlignment(Pos.CENTER);
        root.getChildren().add(new Group(hBox));
    }

    public static void main(String[] args) {
        Application.launch(args);
    }

}