javafx边框线_javafx-2 – 如何摆脱JavaFX中分割窗格周围的边框？
解决方案 – 如何从拆分窗格中删除边框
如果您不希望边框显示,请覆盖-fx-box-border颜色定义：
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();
}
}
附加问题的答案
Where is the border I’ve marked with the red arrow coming from?
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?
因为使用背景定义而不是边框定义显示拆分窗格的边框.所有默认的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根本不是边框,它是一种已应用于分割窗格的多个背景之一的查找颜色.
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%
);
拆分窗格的默认样式为“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,您可以看到,对于未聚焦的分割窗格,定义了两个背景(作为.split-pane的-fx-background-color的最新或最具体的定义,赢得了css的奇怪的应用程序规则).内部背景被着色为-fx-background并且插入一个像素.外部背景颜色为-fx-box-border而不是插入.拆分窗格的填充设置为一个像素.这可以防止拆分窗格内容覆盖其周围的一个像素边框.
本答案中的解决方案是通过使用setStyle方法专门为给定的splitpane实例覆盖代码中的查找颜色定义.通过将-fx-box-border设置为透明(尽管也许null也可以同样使用并且可能更高效),边框设置为不可见(即使它仍然存在并且它的填充仍然存在在1像素的CSS).
进一步修改css(通过应用自己的用户样式表来覆盖默认的分割窗格样式类)可以根据需要删除这一个像素填充：
.split-pane {
-fx-background-color: -fx-control-inner-background;
-fx-background-insets: 0;
-fx-padding: 0;
}
现在,所有边框的痕迹都消失了,您的内容可以自由填充分割窗格的整个区域,包括曾经是边框的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像素,将1像素宽度保留为-fx-box-border.在这种情况下,所有-fx-padding都在确保拆分窗格内容不会在拆分窗格的1像素外部背景上绘制.
Then set -fx-padding: 5; on split. The red box-border disappears and another gray border shows up.
“灰色边框”始终存在 – 它是分割窗格css样式(-fx-background one)中定义的第二个内部背景.默认的-fx-background颜色为灰色.通过将-fx-padding设置为5,您可以将拆分窗格的内容从splitpane区域的外边缘插入5个像素.这允许显示默认背景.
如果您的内容有一些透明区域并且没有填充分割窗格的整个可用区域,那么您还可以在这些透明区域中看到这种灰色-fx-背景色的颜色.
如果您想要的是在-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分析.