默认情况下,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、JDK 1.8.0_91-b14
最佳答案
您可以手动切换 VirtualizedScrollPane
的 focused
伪类,然后可以使用 .virtualized-scroll-pane:focused
选择器在 CSS 中:
PseudoClass FOCUSED = PseudoClass.getPseudoClass("focused");
area.focusedProperty().addListener((obs, oldVal, newVal) -> {
virtualizedScrollPane.pseudoClassStateChanged(FOCUSED, newVal);
});
关于javafx - 如何使 RichTextFx 的外观和感觉与 TextArea 相似?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37808715/