如何使 RichTextFx 的外观与 TextArea 相似？

Question

默认情况下，RichTextFx（顶部控件）看起来不像 TextArea（底部控件）：

我找到了添加圆角的方法（只需从 modena.css 复制并配置 some styles）：

.virtualized-scroll-pane {
    -fx-padding: 0;
    -fx-cursor: default;
    -fx-background-color: linear-gradient(to bottom, derive(-fx-text-box-border, -10%), -fx-text-box-border),
        derive(-fx-base,-1%);
}
.virtualized-scroll-pane {
    -fx-background-color: null;
}
.virtualized-scroll-pane > .scroll-bar:horizontal {
    -fx-background-radius: 0 0 2 2;
}
.virtualized-scroll-pane > .scroll-bar:vertical {
    -fx-background-radius: 0 2 2 0;
}
.virtualized-scroll-pane > .corner {
    -fx-background-radius: 0 0 2 0;
}
.virtualized-scroll-pane .code-area {
    /*the is 1px less top and bottom than TextInput because of scrollpane border */
    -fx-padding: 0.25em 0.583em 0.25em 0.583em; /* 3 7 3 7 */
    -fx-cursor: text;
    -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;
}
.virtualized-scroll-pane:focused .code-area {
    -fx-background-color:
        -fx-control-inner-background,
        -fx-faint-focus-color,
        linear-gradient(from 0px 0px to 0px 5px, derive(-fx-control-inner-background, -9%), -fx-control-inner-background);
    -fx-background-insets: 0, 0, 2;
    -fx-background-radius: 2, 1, 0;
}

但不明白如何在未获得焦点的控件周围添加灰色边框和在获得焦点的控件周围添加蓝色边框（即文本控件和滚动条周围）？

似乎配置了焦点控件的蓝色边框 here 但以下 CSS 不起作用：

.virtualized-scroll-pane {
    -fx-text-fill: -fx-text-inner-color;
    -fx-highlight-fill: derive(-fx-control-inner-background,-20%);
    -fx-highlight-text-fill: -fx-text-inner-color;
    -fx-prompt-text-fill: derive(-fx-control-inner-background,-30%);
    -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-cursor: text;
    -fx-padding: 0.333333em 0.583em 0.333333em 0.583em; /* 4 7 4 7 */
}
.virtualized-scroll-pane:focused {
    -fx-highlight-fill: -fx-accent;
    -fx-highlight-text-fill: white;
    -fx-background-color:
        -fx-focus-color,
        -fx-control-inner-background,
        -fx-faint-focus-color,
        linear-gradient(from 0px 0px to 0px 5px, derive(-fx-control-inner-background, -9%), -fx-control-inner-background);
    -fx-background-insets: -0.2, 1, -1.4, 3;
    -fx-background-radius: 3, 2, 4, 0;
    -fx-prompt-text-fill: transparent;
}

据我所知，这是行不通的，因为 .virtualized-scroll-pane 没有聚焦。

Here 是重现问题的 Maven 项目。

那么，如何解决呢？

仅供参考：RichTextFX 0.7-M1，JDK1.8.0_91-b14

Answer 1

您可以手动切换 VirtualizedScrollPane 的 focused 伪 class 然后您可以使用 CSS 中的 .virtualized-scroll-pane:focused 选择器:

PseudoClass FOCUSED = PseudoClass.getPseudoClass("focused");
area.focusedProperty().addListener((obs, oldVal, newVal) -> {
    virtualizedScrollPane.pseudoClassStateChanged(FOCUSED, newVal);
});

Answer 2

我找到了以下自定义 RichTextFx 的方法：

对于 0.6.10 版本：

.code-area {
    -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-padding: 0.041666625em;
}

.code-area:focused {
    -fx-background-color:
        -fx-focus-color,
        -fx-control-inner-background,
        -fx-faint-focus-color,
        linear-gradient(from 0px 0px to 0px 5px, derive(-fx-control-inner-background, -9%), -fx-control-inner-background);
    -fx-background-insets: -0.2, 1, -1.4, 3;
    -fx-background-radius: 3, 2, 4, 0;
}

.code-area .scroll-bar:horizontal {
    -fx-background-radius: 0 0 2 2;
}

.code-area .scroll-bar:vertical {
    -fx-background-radius: 0 2 2 0;
}

对于 0.7-M1（修复了 'focused' 伪 class）：

.virtualized-scroll-pane {
    -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;
}

.virtualized-scroll-pane:focused {
    -fx-background-color:
        -fx-focus-color,
        -fx-control-inner-background,
        -fx-faint-focus-color,
        linear-gradient(from 0px 0px to 0px 5px, derive(-fx-control-inner-background, -9%), -fx-control-inner-background);
    -fx-background-insets: -0.2, 1, -1.4, 3;
    -fx-background-radius: 3, 2, 4, 0;
}

/* 
I don't understand why this rule fix problem with border around CodeArea.
May be somebody can explain it.
*/
.virtualized-scroll-pane .styled-text-area {
    -fx-background-insets: 0px;
}

.virtualized-scroll-pane .scroll-bar:horizontal {
    -fx-background-radius: 0 0 2 2;

    -fx-padding: 0 0.08333325em 0.08333325em 0.08333325em;
    -fx-border-insets: 0 0.08333325em 0.08333325em 0.08333325em;
    -fx-background-insets: 0 0.08333325em 0.08333325em 0.08333325em;
}

.virtualized-scroll-pane .scroll-bar:vertical {
    -fx-background-radius: 0 2 2 0;

    -fx-padding: 0.08333325em 0.08333325em 0.08333325em 0;
    -fx-border-insets: 0.08333325em 0.08333325em 0.08333325em 0;
    -fx-background-insets: 0.08333325em 0.08333325em 0.08333325em 0;
}

完整版本在 repository 的独立分支中可用。

未解决的问题：

滚动条大小
右下角正方形的颜色
在文本之前和顶部缩进

有人可以提供更好的解决方案吗？

Answer 3

right-bottom角方块的颜色使用：

.virtualized-scroll-pane  .scroll-pane .filler {
    -fx-background-color: white;
}

.virtualized-scroll-pane  .scroll-pane .corner {
    -fx-background-color: white;
}

如何使 RichTextFx 的外观与 TextArea 相似？

How to make look and feel of RichTextFx similar to TextArea?

javafx

javafx-8

richtextfx