从JavaFX中删除所有焦点边框-Java 学习之路

在使用JavaFX时，我发现焦点边框会阻碍某些视觉节点，如按钮和某些窗格 . 关于这个主题的其他问题通常建议在样式文件中添加以下css（覆盖Modena.css的默认值，JavaFX 8的默认样式表）：

-fx-focus-color: transparent;
-fx-faint-focus-color: transparent;

乍一看，这会移除焦点边框，但经过一些使用后，我发现一些UI元素缺少的不仅仅是蓝色光晕 . 经过摩德纳之后，我发现这是因为绘制了很多节点的方式：它们中的许多都有一个背景颜色，由多个盒子组成，彼此叠加，具有不同的插入和半径，从而形成边界 - 喜欢看 .

我还发现这种背景颜色来自前面提到的绘制边框的属性 . 因此将颜色设置为透明具有意想不到的效果，即某些节点（如窗格，组合框，...）在未聚焦时显示边框，但在聚焦时不再显示，因为背景颜色的衍生方式为 :focused 伪类 .

是否可以移除焦点边框（和模糊的焦点边框），以便它们在实际聚焦时保留未聚焦元素的外观？

1 回答

我已经编译了一个解决方案，其中通过覆盖更多部分的模型来组合我在SO上找到的焦点边框：我已经选择覆盖非焦点的那些“：focused”伪类的属性类似于按钮和窗格的东西的默认值（如在modena中所述） . 结果是：

.button:focused,
.toggle-button:focused,
.radio-button:focused > .radio,
.check-box:focused > .box,
.menu-button:focused,
.choice-box:focused,
.color-picker.split-button:focused > .color-picker-label,
.combo-box-base:focused,
.slider:focused .thumb {
    -fx-background-color: -fx-shadow-highlight-color, -fx-outer-border, -fx-inner-border, -fx-body-color;
    -fx-background-insets: 0 0 -1 0, 0, 1, 2;
    -fx-background-radius: 3px, 3px, 2px, 1px;
}

.scroll-pane:focused,
.split-pane:focused,
.list-view:focused,
.tree-view:focused,
.table-view:focused,
.tree-table-view:focused,
.html-editor:focused {
    -fx-background-color: -fx-box-border, -fx-control-inner-background;
    -fx-background-insets: 0, 1;
    -fx-padding: 1;
}

.radio-button > .radio, .radio-button:focused > .radio  {   
    -fx-background-radius: 1.0em; /* large value to make sure this remains circular */    
    -fx-padding: 0.333333em; /* 4 -- padding from outside edge to the inner black dot */ 
}
.split-menu-button:focused {
    -fx-background-color: -fx-shadow-highlight-color, -fx-outer-border; 
    -fx-background-insets: 0 0 -1 0, 0;
    -fx-background-radius: 3, 3;
}
.split-menu-button:focused > .label {
    -fx-text-fill: -fx-text-base-color;
    -fx-background-color: -fx-inner-border, -fx-body-color; 
    -fx-background-insets: 1 0 1 1, 2 1 2 2;
    -fx-background-radius: 2 0 0 2, 1 0 0 1;
    -fx-padding: 0.333333em 0.667em 0.333333em 0.667em; /* 4 8 4 8 */
}
.split-menu-button:focused > .arrow-button {
    -fx-background-color: -fx-inner-border, -fx-body-color; 
    -fx-background-insets: 1, 2;
    -fx-background-radius: 0 2 2 0, 0 1 1 0;
    -fx-padding: 0.5em 0.667em 0.5em 0.667em; /* 6 8 6 8 */
}

.scroll-bar:focused {
    -fx-background-color: derive(-fx-box-border,30%), linear-gradient(to bottom, derive(-fx-base,-3%), derive(-fx-base,5%) 50%, derive(-fx-base,-3%));
    -fx-background-insets: 0, 1 0 1 0;
}
.scroll-bar:vertical:focused {
    -fx-background-color: derive(-fx-box-border,30%), linear-gradient(to right, derive(-fx-base,-3%), derive(-fx-base,5%) 50%, derive(-fx-base,-3%));
    -fx-background-insets: 0, 0 1 0 1;
}

.text-input:focused {
    -fx-highlight-fill: -fx-accent;
    -fx-highlight-text-fill: white;
    -fx-background-color: linear-gradient(to bottom, derive(-fx-text-box-border, -10%), -fx-text-box-border),
        linear-gradient(from 0px 0px to 0px 5px, derive(-fx-control-inner-background, -9%), -fx-control-inner-background);
    -fx-background-insets: 0, 1;
    -fx-background-radius: 3, 2;
    -fx-prompt-text-fill: transparent;
}

.text-area:focused .content {
    -fx-background-color:
        linear-gradient(from 0px 0px to 0px 4px, derive(-fx-control-inner-background, -8%), -fx-control-inner-background);
    -fx-background-radius: 2;
}

.titled-pane:focused > .title > .arrow-button > .arrow {
    -fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
    -fx-background-insets: 1 0 -1 0, 0;
}

.color-picker.split-button:focused > .arrow-button {
    -fx-background-color: -fx-outer-border, -fx-inner-border, -fx-body-color;
    -fx-background-insets: 1 1 1 0, 1, 2;
    -fx-background-radius: 0 3 3 0, 0 2 2 0, 0 1 1 0;
}

基本上它是什么改变了背景颜色的渲染，以绘制相同的外观和感觉UI节点是否具有焦点 .

回复于 2024-04-28T23:33:13+08:00

从JavaFX中删除所有焦点边框

1 回答

相关问题