选择了GluonMobile CSS导航抽屉

Question

在GluonMobile上，当在抽屉中选择一个项目时，是否可以使用CSS？

我的应用程序将具有很多菜单，因此我希望能够快速看到我们所希望的菜单。

我设法获得了项目颜色，即悬停颜色，但没有选定的颜色。

.navigation-drawer{

   -fx-background-color: -primary-swatch-500;
}


.item  {
   -fx-background-color: -primary-swatch-300;
}

.item > .item-content:hover{
   -fx-background-color: black;
}

我尝试所有这些事情

.item:selected
.item > .item-content:selected
.item:focused
.item > .item-content:focused

但是没有任何效果。

所以首先有人可以向我解释为什么我需要这样做 .item> .item-content：hover，为什么不像以前做过的任何其他CSS ive那样只是.item：hover。

第二，由于缺少IMO文件，我发现使用GluonMobile确实很难。

Maybee我还没有找到写文档，但是我需要做一个printLn来找到Node的styleSheet的事实让我觉得很奇怪。

Answer 1

用于Gluon Mobile控件的JavaDoc，例如NavigationDrawer.Item是here。

但是，您将找不到应用于这些控件的样式类，因为在JavaFX内置控件javadoc中也找不到它。

只要发现正确的样式类和伪类有问题，我强烈建议您使用ScenicView。

找到Java 8的distribution，然后运行它：

java -jar scenicView.jar

同时在桌面上运行Gluon Mobile项目：

./gradlew run

例如，当您打开默认的Glisten-Afterburner模板项目的抽屉时，您会看到：

具有item样式类的节点是ViewItem，并获得selected和hover状态。

带有item-content的节点是HBox的子节点，是ViewItem的子节点，当它得到hover时，它不会得到selected：

按照节点的层次结构，您还可以创建样式类的层次结构，例如：

.navigation-drawer > * > .scroll-pane > .viewport > * > .container > .item > .item-container

因此，对于抽屉中的每个项目，不同的状态可以是：

.item:hover {}
.item:selected {}
.item:selected:hover {}

或对于内容节点：

.item:selected > .item-content {}
.item:selected:hover > .item-content {}
...

在您的情况下，您可以应用类似以下内容的

：

.item {
    -fx-background-color: -primary-swatch-300;
}

.item > .item-content:hover {
    -fx-background-color: black;
}

.item:selected > .item-content { 
    -fx-background-color: green;
}

.item:selected:hover > .item-content {
    -fx-background-color: lightgreen;
}

得到类似的东西