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 那样只是 .item:hover。

其次，由于 IMO 缺乏文档，我发现很难使用 GluonMobile。

也许我还没有找到编写文档，但事实上我需要执行 printLn 来为我找到节点的样式表，我觉得这很奇怪。

Answer 1

Gluon Mobile 控件的 Java 文档，例如 NavigationDrawer.Item 是 here。

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

每当您无法找到正确的样式 classes 和伪 classes 时，我强烈建议您使用 ScenicView。

找到 Java 8 的 distribution 和运行它：

java -jar scenicView.jar

同时您还运行桌面上的 Gluon Mobile 项目：

./gradlew run

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

具有item样式class的节点是一个ViewItem，它得到selected和hover状态。

具有 item-content 的节点是 HBox，ViewItem 的子节点，虽然它得到 hover，但它没有得到 selected：

根据节点层次结构，您还可以创建样式层次结构 classes，例如：

.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;
}

得到类似的东西：

GluonMobile Css 已选择导航抽屉

GluonMobile Css Navigation Drawer selected

css

gluon-mobile