更新 TableView 行外观 [英] Updating TableView row appearance

问题描述

我在更改某些 TableView 行的外观时遇到了一些困难.该行应显示带有笔划和红色的文本.实际上，我可以用红色显示它，但仍然无法进行描边.这是我用来改变线条外观的 css 类:

I'm having some dificulties to change the appearance of some TableView rows. The line should show the text with a stroke and in red. Actually, I can show it in red color but still can't do the stroke. This is the css class I'm using to change the appearance of the line:

.itemCancelado {
    -fx-strikethrough: true;
    -fx-text-fill: red;
}

当用户将项目标记为已取消时添加此样式类:

This style class is added when the user mark the item as canceled:

public class ItemCanceladoCellFactory implements Callback<TableColumn, TableCell> {
    @Override
    public TableCell call(TableColumn tableColumn) {
        return new TableCell<ItemBean, Object>() {
            @Override
            public void updateItem(Object item, boolean empty) {
                super.updateItem(item, empty);
                setText(empty ? "" : getItem().toString());
                setGraphic(null);
                int indice=getIndex();
                ItemBean bean=null;
                if(indice<getTableView().getItems().size())
                    bean = getTableView().getItems().get(indice);
                if (bean != null && bean.isCancelado())
                    getStyleClass().add("itemCancelado");
            }
        };
    }
}

这里还有一个问题，标记为取消的行只会在用户从可观察列表中添加或删除元素时改变颜色.有没有办法强制更新 TableView?

There is another problem here, the row marked as canceled only changes the color when the user adds or removes an element from observable list. Is there a way I can force the update of the TableView?

我将 ItemBean 类更改为使用 BooleanProperty 并部分解决:

I changed the ItemBean class to use BooleanProperty and it solved partially:

public class ItemBean {
    ...
    private BooleanProperty cancelado = new SimpleBooleanProperty(false);
    ...
    public Boolean getCancelado() {
        return cancelado.get();
    }

    public void setCancelado(Boolean cancelado){
        this.cancelado.set(cancelado);
    }

    public BooleanProperty canceladoProperty(){
        return cancelado;
    }
}

不幸的是，只有cancelado"列(当这最终起作用时将被隐藏或删除)改变了外观:

Unfortunately, only the column "cancelado" (that will be hided or removed when this finally work) changes the appearance:

这里我配置了列和表:

public class ControladorPainelPreVenda extends ControladorPainel {

    @FXML
    private TableView<ItemBean> tabelaItens;
    private ObservableList<ItemBean> itens = FXCollections.observableArrayList();
    ...

    private void configurarTabela() {
        colunaCodigo.setCellValueFactory(new MultiPropertyValueFactory<ItemBean, String>("produto.id"));
        colunaCodigo.setCellFactory(new ItemCanceladoCellFactory());
        colunaDescricao.setCellValueFactory(new MultiPropertyValueFactory<ItemBean, String>("produto.descricao"));
        colunaDescricao.setCellFactory(new ItemCanceladoCellFactory());
        colunaLinha.setCellValueFactory(new MultiPropertyValueFactory<ItemBean, String>("produto.nomeLinha"));
        colunaLinha.setCellFactory(new ItemCanceladoCellFactory());
        colunaQuantidade.setCellValueFactory(new PropertyValueFactory<ItemBean, BigDecimal>("quantidade"));
        colunaQuantidade.setCellFactory(new ItemCanceladoCellFactory());
        colunaValorLiquido.setCellValueFactory(new PropertyValueFactory<ItemBean, BigDecimal>("valorLiquido"));
        colunaValorLiquido.setCellFactory(new ItemCanceladoCellFactory());
        colunaValorTotal.setCellValueFactory(new PropertyValueFactory<ItemBean, BigDecimal>("valorTotal"));
        colunaValorTotal.setCellFactory(new ItemCanceladoCellFactory());
        colunaCancelado.setCellValueFactory(new PropertyValueFactory<ItemBean, Boolean>("cancelado"));
        colunaCancelado.setCellFactory(new ItemCanceladoCellFactory());
        tabelaItens.setItems(itens);
    }
    ...
}

如何更新所有列?

推荐答案

有没有办法强制更新 TableView?

使 Cancelado 成为 ItemBean 类的属性:

Make the Cancelado a property of the ItemBean class:

private BooleanProperty cancelado = new SimpleBooleanProperty(false);
public BooleanProperty canceladoProperty() { 
  return cancelado;
}

现在，列表视图的默认单元实现将侦听 cancelado 属性的更改，并根据需要触发对相关列表视图单元的 updateItem 调用.

Now the default cell implementation for the list view will listen for changes on the cancelado property and trigger updateItem calls for the relevant list view cell as appropriate.

请注意，返回属性的函数的名称很重要，它必须是 canceladoProperty() 因为 JavaFX 扩展了标准的 Java Beans 成员 getter 和 setter 模式.

Note that the name of the function which returns the property is important, it must be canceladoProperty() as JavaFX extends the standard Java Beans member getter and setter pattern for properties.

属性命名约定背景

JavaFX 属性访问的命名约定在 Oracle 使用 JavaFX 属性和绑定 教程.

The naming convention for JavaFX property access is demonstrated in this code snippet from the Oracle Using JavaFX Properties and Binding tutorial.

package propertydemo;

import javafx.beans.property.DoubleProperty;
import javafx.beans.property.SimpleDoubleProperty;

class Bill {

    // Define a variable to store the property
    private DoubleProperty amountDue = new SimpleDoubleProperty();

    // Define a getter for the property's value
    public final double getAmountDue(){return amountDue.get();}

    // Define a setter for the property's value
    public final void setAmountDue(double value){amountDue.set(value);}

     // Define a getter for the property itself
    public DoubleProperty amountDueProperty() {return amountDue;}

}

JavaFX 属性架构 上有一个很好的概述openfx wiki，其中详细介绍了属性的命名约定以及各种更高级的使用场景，例如只读属性和惰性属性.

There is a great overview of the JavaFX Property Architecture on the openfx wiki which details naming conventions for properties and various more advanced usage scenarios like read only properties and lazy properties.

自定义TableView中一行的外观

此 gist 中提供了更多信息和基于布尔行值自定义表格行外观的示例示例代码.

private TableColumn<Friend, Boolean> makeBooleanColumn(String columnName, String propertyName, int prefWidth) {
  TableColumn<Friend, Boolean> column = new TableColumn<>(columnName);
  column.setCellValueFactory(new PropertyValueFactory<Friend, Boolean>(propertyName));
  column.setCellFactory(new Callback<TableColumn<Friend, Boolean>, TableCell<Friend, Boolean>>() {
    @Override public TableCell<Friend, Boolean> call(TableColumn<Friend, Boolean> soCalledFriendBooleanTableColumn) {
      return new TableCell<Friend, Boolean>() {
        @Override public void updateItem(final Boolean item, final boolean empty) {
          super.updateItem(item, empty);

          // clear any custom styles
          this.getStyleClass().remove("willPayCell");
          this.getStyleClass().remove("wontPayCell");
          this.getTableRow().getStyleClass().remove("willPayRow");
          this.getTableRow().getStyleClass().remove("wontPayRow");

          // update the item and set a custom style if necessary
          if (item != null) {
            setText(item.toString());
            this.getStyleClass().add(item ? "willPayCell" : "wontPayCell");
            this.getTableRow().getStyleClass().add(item ? "willPayRow" : "wontPayRow");
          }
        }
      };
    }
  });
  column.setPrefWidth(prefWidth);
}

相关

StackOverflow 问题 JavaFX 中有 2 种颜色的背景?，提供了一个类似的解决方案.该问题的答案中的讨论提供了有关 JavaFX 中表格行突出显示的注意事项和微妙之处的更多信息(基本上，很难获得伪类样式 - 聚焦环、选定条、悬停反馈等 - 使用自定义行样式).

The StackOverflow question Background with 2 colors in JavaFX?, provides a similar solution. The discussion in the answer to that question provides further information on caveats and subtleties of table row highlighting in JavaFX (basically, it's really hard to get the psuedo-class styles - focus rings, selected bars, hover feedback, etc - right with custom row styles).

这篇关于更新 TableView 行外观的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！