Question

假设JavaFX CSS不支持基于JavaFX 8 Oracle CSS Reference :enabled的{{1}}我怎么做？

TableView存在我应用某种css的地方：

.table-row-cell:hover {
    -fx-background-color:orange;
}

.table-row-cell:focused {
    -fx-background-color:purple;
}

我希望在TableRow启用时（仅）完成上述操作。

所以我修改了包含:enabled伪元素的代码，但现在没有任何作用：

.table-row-cell:hover:enabled {
    -fx-background-color:orange;
}

.table-row-cell:focused:enabled {
    -fx-background-color:purple;
}

最后一些小问题：

1）我如何将：悬停与：已停用或：已启用结合使用？

->[ apply **:hover** only if the `Table-Row|Cell` is enabled. ]

2）JavaFX css是否支持：已启用？

最后但并非最不重要：

在对上面的代码进行了几次测试后，我得到了youtu.be/l7Pbz2l2wjE?t=138这个结果。

Answer 1

我改变了你的想法，而不是试图找到谁enabled，为什么不寻找相反的（disabled）并应用固定的风格，以便它不会改变时光标进入边界：

     .table-row-cell{

     -fx-background-color:red;

     }

     .table-row-cell:disabled{

     -fx-background-color:red; //Here you can define a fixed style 
                               //  or similar to the normal state

     }

     .table-row-cell:focused:disabled .text{

       -fx-fill: red; // Here you define the color of the text

     }

     .table-row-cell:hover{

     -fx-background-color:blue;

     }

希望这会对你有所帮助，对不起，如果我误解了!!

Answer 2

您可以使用javafx.css.PseudoClass更改特定行的样式。以下是有关如何使用PseudoClass的示例。

JavaFx代码

PseudoClass enableRowClass = PseudoClass.getPseudoClass("enabled-row");
// A row factory that returns a row that disables itself whenever the
// item it displays has a value less than 5:
table.setRowFactory(tv -> {
    TableRow<Item> row = new TableRow<>();
    row.disableProperty().bind(
            Bindings.selectInteger(row.itemProperty(), "value")
                    .lessThan(5));


    row.itemProperty().addListener(new ChangeListener<Item>() {
        @Override
        public void changed(ObservableValue<? extends Item> observable, Item oldValue, Item newValue) {
            try {
                //Applying pseudoclass to only those rows which are enabled.
                // The condition is the reverse of the condition used to disable a row.
                row.pseudoClassStateChanged(enableRowClass, newValue.getValue() >= 5);
            } catch (NullPointerException e) {
            }
        }
    });
    return row;
});

Css：

.table-row-cell:enabled-row:hover .table-cell {
    -fx-background-color: purple;

}

.table-row-cell:enabled-row:focused .table-cell {
    -fx-background-color: orange;

}

Answer 3

我使用:disabled的最终解决方案如下：

您可以清楚地看到该行可以是focused但no hovered甚至是selected，即使它是:disabled。

解决方案编号1，:disabled（更快）：

 /* .table-row-cell */

.table-row-cell:disabled{
    -fx-opacity:0.5;
}

.table-row-cell .text{
    -fx-font-weight:bold;
    -fx-fill: black ;
} 

.table-row-cell:focused .text {
     -fx-fill: white ;
}

.table-row-cell:focused{
    -fx-background-color:purple;
}

.table-row-cell:focused:disabled{ /* focused+disabled */
    -fx-background-color:blue;
}

.table-row-cell:hover{
    -fx-background-color:magenta;
}

解决方案编号2基于使用pseudoclass的{{3}}的答案：

PseudoClass enableRowClass = PseudoClass.getPseudoClass("enabled-row");

setRowFactory(tv -> {
                TableRow<Media> row = new TableRow<>();

                // use EasyBind to access the valueProperty of the itemProperty
                // of the cell:
                row.disableProperty().bind(
                        // start at itemProperty of row
                        EasyBind.select(row.itemProperty())
                                // map to fileExistsProperty[a boolean] of item, if item
                                // non-null
                                .selectObject(Media::fileExistsProperty)
                                // map to BooleanBinding checking if false
                                .map(x -> x.booleanValue() == false)
                                // value to use if item was null
                                .orElse(false));

  //This line of code is the idea of the `Harshita Sethi` modified a little bit to not use a changelistener
  row.pseudoClassStateChanged(enableRowClass, !row.disabledProperty().get());

    return row;
 });

当然 .css （提到它不会产生确切的结果因为解决方案1导致它缺少一些行;）：

.table-row-cell:enabled-row:hover .table-cell {
    -fx-background-color: purple;

}

.table-row-cell:enabled-row:focused .table-cell {
    -fx-background-color: orange;

}

JavaFX仅在以下情况下将css应用于TableRows：启用

3 个答案: