选定的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，为什么不像以前做的那样只做.item:hover。

其次，我发现使用GluonMobile真的很难，因为缺乏文档。

也许我还没有找到编写文档，但事实上我需要做一个printLn来为我找到一个节点的styleSheet，我觉得这很奇怪。

Answer 1

像NavigationDrawer.Item这样的胶水移动控件的JavaDoc是here。

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

每当您在查找正确的样式类和伪类时遇到问题，我强烈建议您使用ScenicView。

找到Java8的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;
}

要获得类似如下的内容：

​

​