3
votes

La modification de la couleur d'arrière-plan dans la cellule de tableau supprime la couleur de sélection, la rend difficile à lire

J'ai effectué cette modification:

Changer l'arrière-plan de TableColumn dans TableView, tout en conservant une couleur de ligne alternée?

Cela semble bien non sélectionné:

: p>

Cependant, lorsque vous sélectionnez une cellule:

Cela ressemble à ceci, mais j'aimerais qu'il agisse normalement quand sélectionné / ciblé.

Je suis presque sûr que j'ai besoin d'utiliser une classe de style, cependant, je ne sais pas quels sont les attributs dont vous avez besoin pour conserver toutes les autres fonctionnalités d'un TableCell code > juste avec un fond de couleur différente. De plus, dois-je appliquer la classe de style au niveau de la cellule ou au niveau de la colonne? p>

Mon fichier css: custom.css

 tableCol.getStyleClass().add("customhighlight");
  Comment appliquer cela à une colonne? 
  J'ai essayé 
 table.getStyleClass().add("customhighlight");
  Cependant, cela a changé tout le tableau. 
  J'ai essayé 
.customhighlight .table-cell {
    -fx-background-color: rgba(0, 128, 0, 0.3);
}

.customhighlight .table-cell:selected {
    -fx-background-color: inherit;
}
  et ça n'a rien fait. 
  J'ai aussi essayé au niveau de la cellule ...  p >

java css javafx

0 commentaires

3 Réponses :

1
votes

Quelque chose comme

table.getSelectionModel().setCellSelectionEnabled(true);

.table-cell:selected {
    -fx-background-color: white;
    -fx-text-fill: black;
}

devrait fonctionner

2 commentaires

C'est le truc, je vais devoir utiliser getStyleClass.add ("something.css") au lieu de setStyle (String) car vous ne pouvez pas cibler dans le code (ou du moins c'est salissant).

Cela devrait faire l'affaire. De toute évidence, changez les couleurs en fonction de ce qui a du sens pour votre application.

1
votes

Vous pouvez changer le style dans la méthode updateItem () dans votre TableCell en vous abonnant à la propriété sélectionnée:

.table-cell.customhighlight {
    -fx-background-color: rgba(0, 128, 0, 0.3);
}

.table-cell.customhighlight:selected {
    -fx-background-color: inherit;
}

Ou en utilisant un fichier CSS:

getStyleClass().add("customhighlight");

Cela colorera toutes les cellules du tableau. Si vous ne souhaitez colorer qu'une seule colonne, je vous recommande d'utiliser une classe personnalisée pour cela:

.table-cell {
    -fx-background-color: rgba(0, 128, 0, 0.3);
}

.table-cell:selected {
    -fx-background-color: inherit;
}

Modifiez le fichier CSS de cette façon:

String style = "-fx-background-color: rgba(0, 128, 0, 0.3);";
setStyle(style);
selectedProperty().addListener((observableValue, value, old) -> {
    if (value) {
        setStyle(style);
    } else {
        setStyle(null);
    }
});

2 commentaires

Comment appliquez-vous le fichier css à une colonne? Je sais que je peux le faire maintenant table.getStyleClass (). Add ("customhighlight"); et cela change la table entière, mais comment affectez-vous seulement une colonne? Je l'ai essayé sur une colonne et cela n'a pas fonctionné.

@trilogy Si vous ajoutez la classe à la cellule du tableau avec getStyleClass (). add ("customhighlight"); vous devez supprimer l'espace entre les deux classes css, car elles sont sur le même élément: < code> .customhighlight.table-cell . Ou vous remplacez simplement .table-cell par .customhighlight .

2
votes

Si je vous comprends bien, vous voulez:

Toutes les cellules d'une colonne doivent avoir un arrière-plan translucide.
Ces cellules, lorsqu'elles sont sélectionnées, doivent ressembler à l'apparence sélectionnée par défaut modena.css .
- En d'autres termes, remplacez l'arrière-plan translucide par cette couleur bleu plus foncé et le texte devient blanc.

Vous devez ajouter une classe de style aux cellules appropriées que vous pouvez ensuite utiliser dans un fichier CSS. Voici un petit exemple:

Main.java

.highlighted-table-cell {
    -fx-background-color: rgba(0, 128, 0, 0.3);
}

/* Needed by cell selection mode */
.highlighted-table-cell:selected {
    -fx-background-color: inherit;
}

/* Needed by row selection mode */
.table-row-cell:selected > .highlighted-table-cell {
    -fx-background-color: inherit;
}

Main.css p >

import static java.util.stream.Collectors.collectingAndThen;
import static java.util.stream.Collectors.toCollection;

import javafx.application.Application;
import javafx.collections.FXCollections;
import javafx.scene.Scene;
import javafx.scene.control.TableCell;
import javafx.scene.control.TableColumn;
import javafx.scene.control.TableView;
import javafx.scene.control.cell.PropertyValueFactory;
import javafx.stage.Stage;
import javafx.util.Pair;

public class Main extends Application {

    @Override
    public void start(Stage primaryStage) {
        var table = System.getProperties().stringPropertyNames().stream()
                .map(name -> new Pair<>(name, System.getProperty(name)))
                .collect(collectingAndThen(toCollection(FXCollections::observableArrayList), TableView::new));
        table.setColumnResizePolicy(TableView.CONSTRAINED_RESIZE_POLICY);
        table.getSelectionModel().setCellSelectionEnabled(true); // Not sure if you're using cell or row selection

        var keyCol = new TableColumn<Pair<String, String>, String>("Key");
        keyCol.setCellValueFactory(new PropertyValueFactory<>("key"));
        table.getColumns().add(keyCol);

        var valCol = new TableColumn<Pair<String, String>, String>("Value");
        valCol.setCellValueFactory(new PropertyValueFactory<>("value"));
        valCol.setCellFactory(tc -> new TableCell<>() {
            { getStyleClass().add("highlighted-table-cell"); }
            @Override protected void updateItem(String item, boolean empty) {
                super.updateItem(item, empty);
                if (empty || item == null) {
                    setText(null);
                } else {
                    setText(item);
                }
            }
        });
        table.getColumns().add(valCol);

        var scene = new Scene(table, 600, 400);
        scene.getStylesheets().add("Main.css");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

}

0 commentaires