JavaFX-CSS:如何“移动”孩子的父母风格? [英] JavaFX-CSS: How to "move" style of parent to a child?
问题描述
触发此操作的是一个快速实验来解决 TreeItem选择宽度:要求是仅突出显示文本,不是整个树细胞。没有什么比这更容易了(Frederik :):
The trigger for this was a quick experiment to solve TreeItem selection width: the requirement is to highlight only the text, not the whole tree cell. Nothing easier than that (said Frederik :)
- 实现一个自定义TreeCell,标签为图形(并根据需要配置标签) )
- 删除选择样式(主要是单元格中的高亮背景)
- 将高亮样式添加到标签
类似的东西(使用它的可运行示例在最后):
Something like (a runnable example using this is at the end):
public static class MyTreeCell extends TreeCell<String> {
private Label label;
public MyTreeCell() {
getStyleClass().add("tree-text-only");
}
@Override
public void updateItem(String item, boolean empty) {
super.updateItem(item, empty);
if (empty) {
setText(null);
setGraphic(null);
} else {
if (label == null) {
label = new Label();
}
label.setText(item);
setGraphic(label);
}
}
}
css:
/* remove the highlight from cell as a whole,
c&p'd the unselected style from modena */
.tree-text-only:filled:selected {
-fx-background: -fx-control-inner-background;
-fx-background-color: -fx-background;
}
/* c&p'd selected style */
/* using > doesn't make a different to the behaviour */
/* .tree-text-only:filled:selected > .label { */
.tree-text-only:filled:selected .label {
/* following is the selection color from themes, doesn't show */
-fx-background: -fx-selection-bar;
/* hard-coded color does show */
/* -fx-background-color: -fx-accent ; */
/* auto-adjust text fill */
/* no effect for hard-coded color, showing nothing for selection bar */
-fx-text-fill: -fx-text-background-color;
}
预期行为
- 标签在使用选择栏时突出显示背景
- 文本自动调整其填充
实际行为:
- 使用语义(?)突出显示颜色选择栏,背景颜色为标签未更改为高亮颜色,但文本填充更改为白色,因此文本不显示
- 使用硬编码颜色(任何,甚至是重音如上所述)更改标签的背景但文本填充没有更新
显而易见的问题:如何让它按预期工作?
The obvious question: How to make it work as expected?
为方便起见,一个可运行的例子:
For convenience, a runnable example:
public class TreeCellExample extends Application {
public static class MyTreeCell extends TreeCell<String> {
private Label label;
public MyTreeCell() {
getStyleClass().add("tree-text-only");
}
@Override
public void updateItem(String item, boolean empty) {
super.updateItem(item, empty);
if (empty) {
setText(null);
setGraphic(null);
} else {
if (label == null) {
label = new Label();
}
label.setText(item);
setGraphic(label);
}
}
}
private Parent getContent() {
TreeItem root = createSubTree("root");
root.setExpanded(true);
TreeView tree = new TreeView(root);
tree.getStylesheets().add(
getClass().getResource("treetextonly.css").toExternalForm());
tree.setCellFactory(p -> new MyTreeCell());
BorderPane pane = new BorderPane(tree);
return pane;
}
ObservableList rawItems = FXCollections.observableArrayList(
"9-item", "8-item", "7-item", "6-item",
"5-item", "4-item", "3-item", "2-item", "1-item");
protected TreeItem createSubTree(Object value) {
TreeItem child = new TreeItem(value);
child.getChildren().setAll((List<TreeItem>) rawItems.stream()
.map(TreeItem::new)
.collect(Collectors.toList()));
return child;
}
@Override
public void start(Stage primaryStage) throws Exception {
Scene scene = new Scene(getContent());
primaryStage.setScene(scene);
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}
推荐答案
之所以不起作用,是因为 .label
没有适用 -fx-background
的规则,因此分配给它的任何值都不会影响任何 Label
属性。
The reason why it doesn't work is because .label
doesn't have a rule where -fx-background
is applied, so any value assigned to it won't affect any of the Label
properties.
更重要的是,标签
不使用 -fx-background-color
property。
What's more, Label
doesn't use a -fx-background-color
property.
所以一个简单的解决方案就是添加它:
So an easy solution would be adding it:
.tree-text-only > .label {
-fx-background-color: -fx-background;
}
现在,您可以仅使用此语义颜色应用所有样式。
Now you can apply all the style using only this "semantic" colors.
注意我还添加了控件没有焦点的情况:
Note I've added also the case where the control doesn't have the focus:
/*
* remove the highlight from cell as a whole
*/
/* Selected rows */
.tree-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-text-only:filled:selected {
-fx-background: -fx-control-inner-background;
}
/* Selected when control is not focused */
.tree-text-only:filled:selected {
-fx-background: -fx-control-inner-background;
}
/* focused cell (keyboard navigation) */
.tree-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-text-only:focused {
-fx-cell-focus-inner-border: -fx-control-inner-background;
}
/*
* highlight only the label
*/
// Add background color rule
.tree-text-only > .label {
-fx-background-color: -fx-background;
}
/* Selected rows */
.tree-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-text-only:filled:selected > .label {
-fx-background: -fx-selection-bar;
}
/* Selected when control is not focused */
.tree-text-only:filled:selected > .label {
-fx-background: -fx-selection-bar-non-focused;
}
/* focused cell (keyboard navigation) */
.tree-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-text-only:focused > .label {
-fx-background: -fx-selection-bar;
}
这篇关于JavaFX-CSS:如何“移动”孩子的父母风格?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!