Javafx 如何使RichTextFx的外观与TextArea相似?
默认情况下,RichTextFx(顶部控件)与TextArea(底部控件)不同: 我找到了一种添加圆角的方法(只需从modena.css复制和配置): 但不知道如何在非焦点控件周围添加灰色边框,在焦点控件周围添加蓝色边框(即文本控件和滚动条周围) 看起来像是配置了聚焦控件的蓝色边框,但以下CSS不起作用:Javafx 如何使RichTextFx的外观与TextArea相似?,javafx,javafx-8,richtextfx,Javafx,Javafx 8,Richtextfx,默认情况下,RichTextFx(顶部控件)与TextArea(底部控件)不同: 我找到了一种添加圆角的方法(只需从modena.css复制和配置): 但不知道如何在非焦点控件周围添加灰色边框,在焦点控件周围添加蓝色边框(即文本控件和滚动条周围) 看起来像是配置了聚焦控件的蓝色边框,但以下CSS不起作用: .virtualized-scroll-pane { -fx-text-fill: -fx-text-inner-color; -fx-highlight-fill: der
.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
无法聚焦
是Maven项目的再现问题
那么,如何修复它呢
仅供参考:RichTextFX 0.7-M1,JDK 1.8.0_91-b14您可以手动切换
虚拟化滚动窗格
的聚焦
伪类,然后可以使用。虚拟化滚动窗格:CSS中的聚焦
选择器:
PseudoClass FOCUSED = PseudoClass.getPseudoClass("focused");
area.focusedProperty().addListener((obs, oldVal, newVal) -> {
virtualizedScrollPane.pseudoClassStateChanged(FOCUSED, newVal);
});
我找到了以下定制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(带有“聚焦”伪类的修复):
完整版本在单独的分支中提供
未解决的问题:
- 滚动条大小
- 右下角正方形的颜色
- 在文本之前和顶部缩进
可能有人能提供更好的解决方案吗?对于右下角正方形的颜色,请使用以下选项:
.virtualized-scroll-pane .scroll-pane .filler {
-fx-background-color: white;
}
.virtualized-scroll-pane .scroll-pane .corner {
-fx-background-color: white;
}
.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;
}
.virtualized-scroll-pane .scroll-pane .filler {
-fx-background-color: white;
}
.virtualized-scroll-pane .scroll-pane .corner {
-fx-background-color: white;
}