java - 如何在不使用 css 的情况下以编程方式更改 JavaFX 中的 TreeView 颜色?
问题描述
我正在尝试实现暗模式功能。为此,我需要将 treeView 的颜色更改为深灰色。以下代码不起作用。
treeView.setStyle("-fx-background-color:#242424;");
我没有单独使用 CSS。所以像上面的代码这样的解决方案将受到高度赞赏。
解决方案
您需要更改单元格的背景颜色。在 Java 代码中执行此操作很棘手,因为它强制您使用cellFactory
树上的自定义来访问单元格。相反,我建议使用外部样式表。你可以做
.tree-cell {
-fx-background-color:#242424;
}
默认情况下,树单元格(和许多其他控件)的背景设置为“查找颜色”(本质上是 CSS 变量),称为-fx-background
. 树单元格中的文本(以及许多其他控件中的文本)设置为取决于该值的颜色,因此如果背景是暗的,它将自动变为浅色(反之亦然)。所以这可能会更好
.tree-cell {
-fx-background:#242424;
}
通常,对于您的应用程序“主题化”,默认样式表modena.css根据查找颜色的小集合定义所有颜色。这些颜色及其默认值是
/* A light grey that is the base color for objects. Instead of using
* -fx-base directly, the sections in this file will typically use -fx-color.
*/
-fx-base: #ececec;
/* A very light grey used for the background of windows. See also
* -fx-text-background-color, which should be used as the -fx-text-fill
* value for text painted on top of backgrounds colored with -fx-background.
*/
-fx-background: derive(-fx-base,26.4%);
/* Used for the inside of text boxes, password boxes, lists, trees, and
* tables. See also -fx-text-inner-color, which should be used as the
* -fx-text-fill value for text painted on top of backgrounds colored
* with -fx-control-inner-background.
*/
-fx-control-inner-background: derive(-fx-base,80%);
/* Version of -fx-control-inner-background for alternative rows */
-fx-control-inner-background-alt: derive(-fx-control-inner-background,-2%);
/* A bright blue for highlighting/accenting objects. For example: selected
* text; selected items in menus, lists, trees, and tables; progress bars */
-fx-accent: #0096C9;
/* Default buttons color, this is similar to accent but more subtle */
-fx-default-button: #ABD8ED;
/* A bright blue for the focus indicator of objects. Typically used as the
* first color in -fx-background-color for the "focused" pseudo-class. Also
* typically used with insets of -1.4 to provide a glowing effect.
*/
-fx-focus-color: #039ED3;
-fx-faint-focus-color: #039ED322;
因此,为整个应用程序“主题化”的一个好策略是更改其中一些的定义并将其应用于场景的根。例如,“暗模式”可能只用
.root {
-fx-base: #242424 ;
-fx-control-inner-background: derive(-fx-base,20%);
-fx-control-inner-background-alt: derive(-fx-control-inner-background,-10%);
-fx-accent: #006689;
-fx-focus-color: #036E83;
-fx-faint-focus-color: #036E8322;
}
这是一个完整的例子:
import java.util.ArrayList;
import java.util.List;
import java.util.Random;
import java.util.stream.IntStream;
import javafx.application.Application;
import javafx.collections.FXCollections;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.ComboBox;
import javafx.scene.control.Label;
import javafx.scene.control.ListView;
import javafx.scene.control.TextField;
import javafx.scene.control.TreeItem;
import javafx.scene.control.TreeView;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.HBox;
import javafx.stage.Stage;
/**
* JavaFX App
*/
public class App extends Application {
@Override
public void start(Stage stage) {
TreeView<String> tree = createRandomTree();
BorderPane root = new BorderPane(tree);
HBox controls = new HBox(5,
new Button("Click"),
new Label("Choose one:"),
new ComboBox<>(FXCollections.observableArrayList("One", "Two", "Three")),
new TextField()
);
controls.setAlignment(Pos.CENTER);
controls.setPadding(new Insets(5));
root.setTop(controls);
ListView<String> list = new ListView<>();
IntStream.range(1, 51).mapToObj(i -> "Item "+i).forEach(list.getItems()::add);
root.setLeft(list);
Scene scene = new Scene(root);
scene.getStylesheets().add(getClass().getResource("darkmode.css").toExternalForm());
stage.setScene(scene);
stage.show();
}
private TreeView<String> createRandomTree() {
Random rng = new Random();
List<TreeItem<String>> items = new ArrayList<>();
TreeItem<String> root = new TreeItem<>("Item 1");
root.setExpanded(true);
items.add(root);
TreeView<String> tree = new TreeView<>(root);
for (int i = 2 ; i <=20 ; i++) {
TreeItem<String> item = new TreeItem<>("Item "+i);
item.setExpanded(true);
items.get(rng.nextInt(items.size())).getChildren().add(item);
items.add(item);
}
return tree ;
}
public static void main(String[] args) {
launch();
}
}
darkmode.css
上面的 CSS 文件在哪里。这给出了:
请注意,如果您真的想在没有外部 CSS 文件的情况下执行此操作,您可以直接在根节点上设置这些内联样式:
Pane root = ... ;
root.setStyle(
" -fx-base: #242424 ;\n" +
" -fx-control-inner-background: derive(-fx-base,20%);\n" +
" -fx-control-inner-background-alt: derive(-fx-control-inner-background,-10%);\n" +
" -fx-accent: #006689;\n" +
" -fx-focus-color: #036E83;\n" +
" -fx-faint-focus-color: #036E8322;");
您甚至可以将它们设置为 a TreeView
,这会将它们仅应用于树:
TreeView<String> tree = new TreeView<>();
tree.setStyle(
" -fx-base: #242424 ;\n" +
" -fx-control-inner-background: derive(-fx-base,20%);\n" +
" -fx-control-inner-background-alt: derive(-fx-control-inner-background,-10%);\n" +
" -fx-accent: #006689;\n" +
" -fx-focus-color: #036E83;\n" +
" -fx-faint-focus-color: #036E8322;");
但一般来说,使用和外部样式表在许多方面都更好。
推荐阅读
- react-native - React Native TextInput - 更新值时向左滚动
- java - 如何使用自定义转换器访问 jOOQ 生成的例程字段作为值?
- java - 如何从源代码生成 swagger.yml
- graphql - 避免嵌套分页的模式设计
- python - 使用继承 vs __init__(self, superclass)?
- android - “未安装 Node.js”。在尝试将 android studio 集成到 AWS 时
- c++ - 在构造函数中实例化对象时的 C++ 类成员范围
- c# - Linq To SQL,为什么返回相同数量记录的两个相似查询之间存在巨大的性能差异
- javascript - 溢出-x 滚动不适用于 chrome 和 Firefox
- modelica - 在循环内创建多个 CombiTimeTable