javafx-2 - 如何摆脱 JavaFX 中拆分 Pane 周围的边框？

Question

我正在使用 JavaFX SceneBuilder，但我将在下面粘贴 FXML，因为它很短。我有一个非常简单的窗口，在 anchor Pane 内有一个拆分 Pane 。这是 FXML:

<?xml version="1.0" encoding="UTF-8"?>

<AnchorPane id="AnchorPane" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns:fx="http://javafx.com/fxml">
  <children>
    <SplitPane id="main-split-pane" dividerPositions="0.25" focusTraversable="true" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" prefHeight="-1.0" prefWidth="-1.0" style="" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
      <items>
        <AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="160.0" prefWidth="100.0" style="" />
        <AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="160.0" prefWidth="100.0" />
      </items>
    </SplitPane>
  </children>
  <padding>
    <Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
  </padding>
  <stylesheets>
    <URL value="@main-view.css" />
  </stylesheets>
</AnchorPane>

我正在使用以下 CSS:

#main-split-pane {
    -fx-border-style: none;
    -fx-border-color: blue;
    -fx-border-width: 25;
}

它给了我一个这样的窗口:



我已经使用了显示的 CSS 设置 here ，但有几件事我无法理解:

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

为什么设置-fx-border-style至 none导致 -fx-border-color被忽略而 -fx-border-width仍然对事物的外观有影响(如填充)？

Answer 1

解决方案 - 如何从拆分 Pane 中删除边框
如果您不想显示边框，请覆盖 -fx-box-border 颜色定义:

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

带边框的拆分 Pane

示例代码

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();
  }
}

对附加问题的回答

Where is the border I've marked with the red arrow coming from?

它是默认 css 样式表( caspian.css for JavaFX 2.2 或 modena.css for Java 8) )中的背景样式。

Why does setting the -fx-border-style to none cause the -fx-border-color to be ignored while the -fx-border-width still has an effect (like padding) on how things look?

因为拆分 Pane 的边框是使用背景定义而不是边框​​定义来显示的。所有默认的 JavaFX 控件 css 样式都以这种方式工作。他们设置多个叠加背景来完成边框技术，而不是通过设置显式边框属性。
了解答案的工作原理
虽然这个答案实际上只是一个简单的单行，但我会花一些时间在这里解释它为什么有效。对不起，如果这个解释使答案膨胀。那些已经知道这些信息的人可以忽略这部分答案。

I'm still having trouble understanding the concept

花一些时间阅读 JavaFX css reference guide ，我知道有点枯燥，但如果您想了解 JavaFX css 样式，则必须阅读。
还有一个 official Oracle tutorial for css ，但它不会像阅读 css 引用资料和研究我之前链接的默认样式表那样教你。
我从 css 引用中提取了相关语句并在此处引用它们:

JavaFX has a rich set of extensions to CSS in support of features such as color derivation, property lookup, and multiple background colors and borders for a single node. These features add significant new power for developers and designers and are described in detail in this document.

-fx-box-border 设置为透明以删除边框，它根本不是真正的边框，它是一种已应用于拆分 Pane 的多个背景之一的查找颜色。

With looked-up colors you can refer to any other color property that is set on the current node or any of its parents. This is a very powerful feature, as it allows a generic palette of colors to be specified on the scene then used thoughout the application. If you want to change one of those palette colors you can do so at any level in the scene tree and it will affect that node and all its decendents. Looked-up colors are not looked up until they are applied, so they are live and react to any style changes that might occur, such as replacing a palette color at runtime with the "style" property on a node.

In the following example, all background color of all buttons uses the looked up color "abc".

.root { abc: #f00 }

.button { -fx-background-color: abc }

Java 8 modena.css 样式的 -fx-box-border 的默认定义是:

/* 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%
);

拆分 Pane 的默认样式是“Box Like Thing”:

/* ====   BOX LIKE THINGS   ================================================= */

.scroll-pane,
.split-pane,
.list-view,
.tree-view,
.table-view, 
.tree-table-view,
.html-editor {
    -fx-background-color: -fx-box-border, -fx-control-inner-background;
    -fx-background-insets: 0, 1;
    -fx-padding: 1;
}
. . .
/* ones with grey -fx-background not lighter -fx-control-inner-background */
.scroll-pane,
.split-pane {
    -fx-background-color: -fx-box-border, -fx-background;
}

因此，分析 css，您可以看到，对于未聚焦的拆分 Pane ，定义了两个背景(因为 .split-pane 的 -fx-background-color 的最新或最具体定义赢得了 css 奇怪的应用程序规则)。内部背景颜色为 -fx-background 并插入一个像素。外部背景颜色为 -fx-box-border 且未插入。拆分 Pane 的填充设置为一个像素。这可以防止拆分 Pane 内容覆盖其周围的一个像素边框。
此答案中的解决方案通过使用 setStyle 方法覆盖专门针对给定拆分 Pane 实例的代码中的查找颜色定义来工作。通过将 -fx-box-border 设置为透明(尽管 null 也可以同样使用并且可能更有效)，边框被设置为不可见(即使它仍然存在并且它的填充仍然存在)在 1 个像素的 css 中)。
如果需要，进一步修改 css(通过应用您自己的用户样式表来覆盖默认的拆分 Pane 样式类)可以删除这个像素填充:

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

现在边框的所有痕迹都消失了，您的内容可以自由地填充拆分 Pane 的整个区域，包括边框曾经所在的 1 像素区域。我更喜欢将 -fx-box-border 设置为透明的最小更改，因为这样您的用户样式定义很小，并且不会从默认样式中详细说明。

For example, set -fx-box-border: red; and you'll get a 1px red border around the split pane.

是的，这是因为 -fx-box-border 颜色着色的默认背景区域只有 1 像素宽，并且您刚刚将像素颜色明确设置为红色。

I assume it's the box-border on the padding component.

不，如上所述，原因是因为背景 -fx-box-border 距区域边缘 0 像素的插入，而内部背景 -fx-background-color 是距区域边缘 1 像素的插入，用 -fx-box-border 颜色留下 1 像素宽度。在此实例中 -fx-padding 所做的所有工作是确保您的拆分 Pane 内容不会绘制在拆分 Pane 的 1 像素外部背景上。

Then set -fx-padding: 5; on split. The red box-border disappears and another gray border shows up.

“灰色边框”总是在那里 - 它是分割 Pane css 样式(-fx-background 样式)中定义的第二个内部背景。默认的 -fx-background 颜色是灰色。通过将 -fx-padding 设置为 5，您是说将拆分 Pane 的内容从拆分 Pane 区域的外边缘插入 5 个像素。这允许显示默认背景。
如果您的内容有一些透明区域并且没有填满拆分 Pane 的整个可用区域，那么您也会在这些透明区域中看到这种灰色 -fx-background-color 颜色。
如果您想要以 -fx-box-border 颜色在内容周围实现 5 像素边框，那么您需要同时调整填充和边框插图，例如:

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

如果手动分析大型应用程序的填充、背景插入、css 样式派生规则等似乎令人生畏，请知道有工具支持可以帮助理解场景图结构和 css 应用程序。使用的工具是 SceneBuilder's css analyzer用于设计时 css 分析和 ScenicView用于运行时场景图和 css 分析。