Изменение цвета фона в TableCell снимает выделение цвета, затрудняет чтение - PullRequest
3 голосов
/ 08 апреля 2019

Я сделал это изменение:

Изменить фон TableColumn в TableView, сохранив цвет чередующегося ряда?

Выглядит хорошо, не выбрано:

:unselected

Однако при выборе ячейки:

selected

Похоже, но яМне бы хотелось, чтобы он работал нормально, когда выделен / сфокусирован.

Я почти уверен, что мне нужно использовать класс стилей, однако я не знаю, какие атрибуты вам нужны, чтобы сохранить все остальные функцииTableCell просто с другим цветом фона.Кроме того, я могу применить класс стиля на уровне ячейки или на уровне столбца?

ОБНОВЛЕНИЕ

Мой файл CSS: custom.css

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

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

Как применить это к одному столбцу?

Я пытался

table.getStyleClass().add("customhighlight");

Однако, это изменило всю таблицу.

Я пытался

tableCol.getStyleClass().add("customhighlight");

, и он ничего не делал.

Я также пробовал это на уровне клетки ...

Ответы [ 3 ]

2 голосов
/ 09 апреля 2019

Если я вас правильно понимаю, вы хотите:

  • Все ячейки столбца должны иметь полупрозрачный фон.
  • Эти ячейки, если они выбраны, должны выглядеть как выбранный по умолчанию modena.css выбранный вид.
    • Другими словами, замените полупрозрачный фон темным синим цветом, и текст станет белым.

Вам следует добавить класс стиля в соответствующие ячейки, которые затем можно использовать в файле CSS. Вот небольшой пример:

Main.java

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();
    }

}

Main.css

.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;
}
1 голос
/ 09 апреля 2019

Вы можете переключить стиль в методе updateItem() в TableCell, подписавшись на выбранное свойство:

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

Или используя файл CSS:

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

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

Это закрасит все ячейки в таблице.Если вы хотите закрасить только один столбец, я бы порекомендовал использовать для этого специальный класс:

getStyleClass().add("customhighlight");

Изменить файл CSS следующим образом:

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

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

Все решения используют выбор по умолчаниюстиль для выбранной ячейки, сбросив цвет фона.Результат выглядит так:

result

1 голос
/ 08 апреля 2019

Что-то вроде

table.getSelectionModel().setCellSelectionEnabled(true);

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

Должно работать

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...