时间戳

首页 > 解决方案 > Javafx 风格 - 继承不能直观地工作，-fx-text-fill 不能工作

css - Javafx 风格 - 继承不能直观地工作，-fx-text-fill 不能工作

问题描述

我是 JavaFX 的新手，对样式感到困惑。我正在使用 OpenJFX 13.0.1。我有以下简单的场景：

val oscs = HBox()
val osc1 = VBox()
val title = Text("Osc 1")
title.styleClass.add("text")
osc1.children.add(title)
oscs.children.add(osc1)

val root = BorderPane()
root.children.add(oscs)
val scene = Scene(root, 500.0,  400.0)

我有两个问题：

  1. -fx-text-fill不能为文本着色，而-fx-fill可以。IE 

    .text {
    -fx-fill: #44FFFF;
}

    有效，而： 

    .text {
    -fx-text-fill: #44FFFF;
}

    才不是。根据文档，这似乎是错误的。

  2. 继承没有像我期望的那样工作。子节点不应该从根继承吗？

    无论是 还是 ，以下内容都无法为标签-fx-fill着色-fx-text-fill。 

    .root {
    -fx-font-size: 24px;
    -fx-font-family: sans-serif;
    -fx-fill: #44FFFF;  
    -fx-background-color: #000000;
    -fx-border-color: #44FF00;
    -fx-border-width: 2px;
}

我究竟做错了什么？

标签： cssjavafxopenjfx

解决方案

你可能会感到Label困惑Text。

Text是的子类，Shape不提供-fx-text-fill属性。此外Shape的-fx-fill属性不会被继承。请参阅CSS 参考指南。

除了与Label您一起使用之外，您还可以使用后代选择器来分配填充：

.root .text {
    -fx-fill: #44FFFF;  
}

编辑：

Label'-fx-text-fill也不是继承的。您应该能够通过将or属性指定inherit为值来解决这两种情况。以下应该适用于：-fx-text-fill-fx-fillText

.root {
    -fx-fill: #44FFFF;
    -fx-background-color: #000000;
}

.text {
    -fx-fill: inherit;
}

推荐阅读