时间戳

首页 > 解决方案 > 使用 JavaFx，如何仅在填充内更改面板背景颜色？

java - 使用 JavaFx，如何仅在填充内更改面板背景颜色？

问题描述

我在 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 的新手，因此将不胜感激。

标签： javacssjavafx

解决方案

首先，JavaFX CSS 中没有 CSS 属性“-fx-background-padding”。

您可以使用 css 属性“-fx-background-insets”设置多个背景并定位它们。这是一个非常强大/有用的属性，几乎整个预定义的 css（在 modena.css 中）都依赖于它来设置控件的样式。

话虽如此，在造型方面不会有单一的具体解决方案。您可以通过多种方式获得相同的效果（由@n247s 和@jewelsea 指定）。
除了这两个之外，获得所需行为的另一种方法是使用“-fx-background-insets”。

方法一

如果您非常具体地使用“-fx-border-insets”，您可以在背景中添加额外的颜色并使用-fx-background-padding 控制这两种颜色。

在下面的代码中，我包含了“透明”颜色并管理它以渲染所需的空间，然后从那里开始渲染所需的颜色（#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);
    }

}

推荐阅读