已选择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;
}

得到类似的东西：