Javafx 2 在JavaFX中，如何去除分割窗格周围的边框？

我使用的是JavaFX SceneBuilder，但由于它很短，我将在下面粘贴FXML。我有一个非常简单的窗口，在锚定窗格中有一个拆分窗格。以下是FXML：

，但有几件事我很难理解：

我用红色箭头标出的边界在哪里
为什么将
-fx边框样式
设置为
无
会导致忽略
-fx边框颜色
，而
-fx边框宽度
仍会对外观产生影响（如填充）
解决方案-如何从拆分窗格中删除边框

import javafx.application.Application;
import javafx.scene.*;
import javafx.scene.control.SplitPane;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;

public class SplitPaneBorderRemover extends Application {
  public static void main(String[] args) throws Exception { launch(args); }
  @Override public void start(final Stage stage) throws Exception {
    StackPane r1 = new StackPane();
    r1.setPrefSize(200, 150);
    r1.setStyle("-fx-background-color: palegreen;");
    
    StackPane r2 = new StackPane();
    r2.setPrefSize(200, 150);
    r2.setStyle("-fx-background-color: coral;");
    
    SplitPane split = new SplitPane();
    split.getItems().setAll(
      r1, r2
    );
    split.setStyle("-fx-box-border: transparent;");
    
    StackPane layout = new StackPane();
    layout.getChildren().setAll(split);
    layout.setStyle("-fx-padding: 20px; -fx-background-color: cornsilk");
    
    stage.setScene(new Scene(layout));
    stage.show();
  }
}

如果不希望边框显示，请替代-fx框边框颜色定义：

split.setStyle("-fx-box-border: transparent;");

删除边框的拆分窗格


示例代码

import javafx.application.Application;
import javafx.scene.*;
import javafx.scene.control.SplitPane;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;

public class SplitPaneBorderRemover extends Application {
  public static void main(String[] args) throws Exception { launch(args); }
  @Override public void start(final Stage stage) throws Exception {
    StackPane r1 = new StackPane();
    r1.setPrefSize(200, 150);
    r1.setStyle("-fx-background-color: palegreen;");
    
    StackPane r2 = new StackPane();
    r2.setPrefSize(200, 150);
    r2.setStyle("-fx-background-color: coral;");
    
    SplitPane split = new SplitPane();
    split.getItems().setAll(
      r1, r2
    );
    split.setStyle("-fx-box-border: transparent;");
    
    StackPane layout = new StackPane();
    layout.getChildren().setAll(split);
    layout.setStyle("-fx-padding: 20px; -fx-background-color: cornsilk");
    
    stage.setScene(new Scene(layout));
    stage.show();
  }
}

其他问题的答案

我用红色箭头标出的边界在哪里

它是默认css样式表（或）中的背景样式

为什么将-fx边框样式设置为“无”会导致忽略-fx边框颜色，而-fx边框宽度仍会对外观产生影响（如填充）

因为拆分窗格的边框是使用背景定义而不是边框定义显示的。所有默认的JavaFX控件css样式都是这样工作的。他们设置多个重叠背景以实现边界技术，而不是通过设置显式边界属性

了解答案的工作原理

虽然这个答案实际上只是简单的一行，但我将在这里花一些时间来解释它的工作原理。对不起，如果这个解释夸大了答案。那些已经知道这些信息的人可以忽略答案的这一部分

我仍然很难理解这个概念

花一些时间阅读JavaFX，我知道有点枯燥，但如果你想了解JavaFXCSS样式，就必须阅读

还有一个，但它不会教你阅读css参考和研究我之前链接的默认样式表

我从css参考资料中提取了相关声明，并在此处引用：

JavaFX有一组丰富的CSS扩展，支持颜色派生、属性查找以及单个节点的多种背景颜色和边框等功能。这些特性为开发人员和设计人员增添了新的力量，本文档对此进行了详细描述

设置为“透明”以删除边框的-fx框边框实际上根本不是边框，它是已应用于拆分窗格的多个背景之一的查找颜色

通过查找颜色，可以引用在当前节点或其任何父节点上设置的任何其他颜色属性。这是一个非常强大的功能，因为它允许在场景中指定通用的调色板，然后在应用程序之外使用。如果要更改其中一种调色板颜色，可以在场景树中的任何级别进行更改，这将影响该节点及其所有偏心。在应用查找颜色之前，不会查找这些颜色，因此它们处于活动状态并对可能发生的任何样式更改做出反应，例如在运行时将调色板颜色替换为节点上的“样式”属性

在下面的示例中，所有按钮的所有背景色都使用查找颜色“abc”

.root{abc:#f00}

.button{-fx背景色：abc}

Java 8 modena.css样式的-fx框边框的默认定义为：

/* A little darker than -fx-color and used to draw boxes around objects such
 * as progress bars, scroll bars, scroll panes, trees, tables, and lists.
 */
-fx-box-border: ladder(
    -fx-color,
    black 20%,
    derive(-fx-color,-15%) 30%
);

拆分窗格的默认样式为“长方体”：

因此，通过分析css，您可以看到，对于未聚焦的拆分窗格，定义了两种背景（最新或最具体的-fx背景色定义。拆分窗格赢得了css怪异的应用程序规则）。内部背景颜色为-fx背景，并插入一个像素。外部背景颜色为-fx框边框，不插入。分割窗格的填充设置为一个像素。这可防止拆分窗格内容覆盖其周围的一个像素边框

此答案中的解决方案通过使用setStyle方法覆盖特定于给定splitpane实例的代码中的查找颜色定义来工作。通过将-fx框边框设置为透明（尽管null也可以同样使用，并且可能更有效），边框被设置为不可见（即使它仍然存在并且它的填充在css中保持为1像素）

如果需要，进一步修改css（通过应用您自己的用户样式表覆盖默认的拆分窗格样式类）可以删除此单像素填充：

.split-pane {
    -fx-background-color: -fx-control-inner-background;
    -fx-background-insets: 0;
    -fx-padding: 0;
}

现在边界的所有跟踪都消失了，您的内容可以自由填充分割窗格的整个区域，包括边界原来所在的1像素区域。我更喜欢将-fx框边框设置为透明的最小更改，因为这样您的用户样式定义很小，与默认样式相比没有太多细节

例如，设置-fx框边框：红色；在拆分窗格周围会有一个1px的红色边框

是的，这是因为-fx框边框颜色的默认背景区域仅为1像素宽，并且您刚刚明确地将像素颜色设置为红色

我假设它是填充组件上的框边框

否，如上所述，原因是-fx框边框的背景从区域边缘插入0像素，而内部背景-fx背景颜色从区域边缘插入1像素，留下1像素宽的-fx框边框。在本例中，-fx填充所做的全部工作是确保分割窗格内容不会覆盖分割窗格的1像素外部背景

然后设置-fx填充：5；分裂
.split-pane {
    -fx-background-color: -fx-box-border, -fx-control-inner-background;
    -fx-background-insets: 0, 5;
    -fx-padding: 5;
}

.split-pane {
  -fx-background-color: transparent, -fx-background;
}