Плавающие прямоугольники при выделении ListCells - PullRequest
Новая
       6

Плавающие прямоугольники при выделении ListCells

0 голосов
/ 02 апреля 2020

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

Например,

ячейки подсвечиваются правильно при первом открытии мое приложение

Но плавающие подсвеченные прямоугольники появляются после того, как я ввожу команды, которые специально создают новые ячейки или удаляют существующие

Код, который я использую для установки новые стили выглядят следующим образом: 

class ModuleListViewCell extends ListCell<Module> {
    @Override
    protected void updateItem(Module module, boolean empty) {
        super.updateItem(module, empty);

        if (empty || module == null) {
            setGraphic(null);
            setText(null);
        } else {
            setGraphic(new ModuleCard(module, getIndex() + 1).getRoot());
            if (module.equals(getCurrentlyShownModule())) {
                setStyle("-fx-background-color: " + BACKGROUND_COLOUR + "; "
                        + "-fx-border-color: " + BORDER_COLOUR + "; "
                        + "-fx-border-width: " + BORDER_WIDTH + ";");
            }
        }
    }
}

Я использую этот код для всех своих списков. Я совершенно уверен, что ошибка заключается в пользовательском интерфейсе, а не в коде, который выбирает ячейку для выделения (например, getCurrentlyShownModule ()). Тем не менее, я не могу выяснить причину для плавающих прямоугольников. Буду признателен за все советы, которые я могу получить

Код для файлов .f xml следующий:

ModuleListCard.f xml

<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.layout.ColumnConstraints?>
<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.Region?>
<?import javafx.scene.layout.VBox?>
<HBox id="cardPane" fx:id="cardPane" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1">
    <GridPane HBox.hgrow="ALWAYS">
        <columnConstraints>
            <ColumnConstraints hgrow="SOMETIMES" minWidth="10" prefWidth="150" />
        </columnConstraints>
        <VBox alignment="CENTER_LEFT" minHeight="50" GridPane.columnIndex="0">
            <padding>
                <Insets top="5" right="5" bottom="5" left="15" />
            </padding>
            <HBox spacing="5" alignment="CENTER_LEFT">
                <Label fx:id="id" styleClass="cell_big_label">
                    <minWidth>
                        <!-- Ensures that the label text is never truncated -->
                        <Region fx:constant="USE_PREF_SIZE" />
                    </minWidth>
                </Label>
                <Label fx:id="name" text="\$first" styleClass="cell_big_label" />
            </HBox>
            <Label fx:id="identifier" styleClass="cell_small_label" text="\$identifier" />
        </VBox>
    </GridPane>
</HBox>

ModuleListPanel.f xml

<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.ListView?>
<?import javafx.scene.layout.VBox?>
<VBox xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1">
    <ListView fx:id="moduleListView" VBox.vgrow="ALWAYS" />
</VBox>

И вот файл CSS, который я использую для своего проекта 

.background {
    -fx-background-color: derive(#1d1d1d, 20%);
    background-color: #383838; /* Used in the default.html file */
}

.background-2 {
    -fx-background-color: derive(#2a2a2a, 20%);
    -fx-background-radius: 5px;
    background-color: #2a2a2a; /* Used in the default.html file */
}

.label {
    -fx-font-size: 11pt;
    -fx-font-family: "Segoe UI Semibold";
    -fx-text-fill: #555555;
    -fx-opacity: 0.9;
}

.label-bright {
    -fx-font-size: 11pt;
    -fx-font-family: "Segoe UI Semibold";
    -fx-text-fill: white;
    -fx-opacity: 1;
}

.label-header {
    -fx-font-size: 32pt;
    -fx-font-family: "Segoe UI Light";
    -fx-text-fill: white;
    -fx-opacity: 1;
}

.text-field {
    -fx-font-size: 12pt;
    -fx-font-family: "Segoe UI Semibold";
}

.tab-pane {
    -fx-background-color: derive(#1d1d1d, 20%);
    -fx-padding: 0 0 0 1;
    -fx-tab-min-height: 3em;
    -fx-tab-max-height: 3em;
}

.tab-pane .tab-header-area {
    -fx-background-color: derive(#1d1d1d, 20%);
    -fx-padding: 0 0 0 0;
    -fx-min-height: 0;
    -fx-max-height: 0;
}

.tab-pane .tab-header-area .tab {
    -fx-background-color: derive(#1d1d1d, 20%);
}

.tab-pane .tab-header-area .tab-header-background {
    -fx-background-color: derive(#1d1d1d, 20%);
    -fx-opacity: 0.9;
}

.tab-pane .tab-header-area .tab .tab-label {
    -fx-font-size: 15pt;
    -fx-font-family: "Segoe UI Light";
    -fx-text-fill: white;
    -fx-opacity: 0.9;
}

.table-view {
    -fx-base: #1d1d1d;
    -fx-control-inner-background: #1d1d1d;
    -fx-background-color: #1d1d1d;
    -fx-table-cell-border-color: transparent;
    -fx-table-header-border-color: transparent;
    -fx-padding: 5;
}

.table-view .column-header-background {
    -fx-background-color: transparent;
}

.table-view .column-header, .table-view .filler {
    -fx-size: 35;
    -fx-border-width: 0 0 1 0;
    -fx-background-color: transparent;
    -fx-border-color:
        transparent
        transparent
        derive(-fx-base, 80%)
        transparent;
    -fx-border-insets: 0 10 1 0;
}

.table-view .column-header .label {
    -fx-font-size: 20pt;
    -fx-font-family: "Segoe UI Light";
    -fx-text-fill: white;
    -fx-alignment: center-left;
    -fx-opacity: 1;
}

.table-view:focused .table-row-cell:filled:focused:selected {
    -fx-background-color: -fx-focus-color;
}

.split-pane:horizontal .split-pane-divider {
    -fx-background-color: derive(#1d1d1d, 20%);
    -fx-border-color: transparent transparent transparent #4d4d4d;
}

.split-pane {
    -fx-border-radius: 1;
    -fx-border-width: 1;
    -fx-background-color: derive(#1d1d1d, 20%);
}

.label {
    -fx-text-fill: white;
}

.list-view {
    -fx-background-insets: 0;
    -fx-padding: 0;
    -fx-background-color: derive(#1d1d1d, 20%);
}

.list-cell {
    -fx-label-padding: 0 0 0 0;
    -fx-graphic-text-gap : 0;
    -fx-padding: 0 0 0 0;
}

.list-cell:filled:even {
    -fx-background-color: #3c3e3f;
}

.list-cell:filled:odd {
    -fx-background-color: #515658;
}

.list-cell:filled:selected {
    -fx-background-color: #424d5f;
}

.list-cell:filled:selected #cardPane {
    -fx-border-color: #3e7b91;
    -fx-border-width: 1;
}

.list-cell .label {
    -fx-text-fill: white;
}

.cell_big_label {
    -fx-font-family: "Segoe UI Semibold";
    -fx-font-size: 16px;
    -fx-text-fill: #010504;
}

.cell_small_label {
    -fx-font-family: "Segoe UI";
    -fx-font-size: 13px;
    -fx-text-fill: #010504;
}

.stack-pane {
     -fx-background-color: derive(#1d1d1d, 20%);
}

.pane-with-border {
     -fx-background-color: derive(#1d1d1d, 20%);
     -fx-border-color: derive(#1d1d1d, 10%);
     -fx-border-top-width: 1px;
}

.status-bar {
    -fx-background-color: derive(#1d1d1d, 30%);
}

.result-display {
    -fx-background-color: transparent;
    -fx-font-family: "Segoe UI Light";
    -fx-font-size: 13pt;
    -fx-text-fill: white;
}

.result-display .label {
    -fx-text-fill: black !important;
}

.status-bar .label {
    -fx-font-family: "Segoe UI Light";
    -fx-text-fill: white;
    -fx-padding: 4px;
    -fx-pref-height: 30px;
}

.status-bar-with-border {
    -fx-background-color: derive(#1d1d1d, 30%);
    -fx-border-color: derive(#1d1d1d, 25%);
    -fx-border-width: 1px;
}

.status-bar-with-border .label {
    -fx-text-fill: white;
}

.grid-pane {
    -fx-background-color: derive(#1d1d1d, 30%);
    -fx-border-color: derive(#1d1d1d, 30%);
    -fx-border-width: 1px;
}

.grid-pane .stack-pane {
    -fx-background-color: derive(#1d1d1d, 30%);
}

.context-menu {
    -fx-background-color: derive(#1d1d1d, 50%);
}

.context-menu .label {
    -fx-text-fill: white;
}

.menu-bar {
    -fx-background-color: derive(#1d1d1d, 20%);
}

.menu-bar .label {
    -fx-font-size: 14pt;
    -fx-font-family: "Segoe UI Light";
    -fx-text-fill: white;
    -fx-opacity: 0.9;
}

.menu .left-container {
    -fx-background-color: black;
}

/*
 * Metro style Push Button
 * Author: Pedro Duque Vieira
 * http://pixelduke.wordpress.com/2012/10/23/jmetro-windows-8-controls-on-java/
 */
.button {
    -fx-padding: 5 22 5 22;
    -fx-border-color: #e2e2e2;
    -fx-border-width: 2;
    -fx-background-radius: 0;
    -fx-background-color: #1d1d1d;
    -fx-font-family: "Segoe UI", Helvetica, Arial, sans-serif;
    -fx-font-size: 11pt;
    -fx-text-fill: #d8d8d8;
    -fx-background-insets: 0 0 0 0, 0, 1, 2;
}

.button:hover {
    -fx-background-color: #3a3a3a;
}

.button:pressed, .button:default:hover:pressed {
  -fx-background-color: white;
  -fx-text-fill: #1d1d1d;
}

.button:focused {
    -fx-border-color: white, white;
    -fx-border-width: 1, 1;
    -fx-border-style: solid, segments(1, 1);
    -fx-border-radius: 0, 0;
    -fx-border-insets: 1 1 1 1, 0;
}

.button:disabled, .button:default:disabled {
    -fx-opacity: 0.4;
    -fx-background-color: #1d1d1d;
    -fx-text-fill: white;
}

.button:default {
    -fx-background-color: -fx-focus-color;
    -fx-text-fill: #ffffff;
}

.button:default:hover {
    -fx-background-color: derive(-fx-focus-color, 30%);
}

.dialog-pane {
    -fx-background-color: #1d1d1d;
}

.dialog-pane > *.button-bar > *.container {
    -fx-background-color: #1d1d1d;
}

.dialog-pane > *.label.content {
    -fx-font-size: 14px;
    -fx-font-weight: bold;
    -fx-text-fill: white;
}

.dialog-pane:header *.header-panel {
    -fx-background-color: derive(#1d1d1d, 25%);
}

.dialog-pane:header *.header-panel *.label {
    -fx-font-size: 18px;
    -fx-font-style: italic;
    -fx-fill: white;
    -fx-text-fill: white;
}

.scroll-bar {
    -fx-background-color: derive(#1d1d1d, 20%);
}

.scroll-bar .thumb {
    -fx-background-color: derive(#1d1d1d, 50%);
    -fx-background-insets: 3;
}

.scroll-bar .increment-button, .scroll-bar .decrement-button {
    -fx-background-color: transparent;
    -fx-padding: 0 0 0 0;
}

.scroll-bar .increment-arrow, .scroll-bar .decrement-arrow {
    -fx-shape: " ";
}

.scroll-bar:vertical .increment-arrow, .scroll-bar:vertical .decrement-arrow {
    -fx-padding: 1 8 1 8;
}

.scroll-bar:horizontal .increment-arrow, .scroll-bar:horizontal .decrement-arrow {
    -fx-padding: 8 1 8 1;
}

#cardPane {
    -fx-background-color: transparent;
    -fx-border-width: 0;
}

#commandTypeLabel {
    -fx-font-size: 11px;
    -fx-text-fill: #F70D1A;
}

#commandTextField {
    -fx-background-color: transparent #383838 transparent #383838;
    -fx-background-insets: 0;
    -fx-border-color: #383838 #383838 #ffffff #383838;
    -fx-border-insets: 0;
    -fx-border-width: 1;
    -fx-font-family: "Segoe UI Light";
    -fx-font-size: 13pt;
    -fx-text-fill: white;
}

#filterField, #studentListPanel, #studentWebpage {
    -fx-effect: innershadow(gaussian, black, 10, 0, 0, 0);
}

#resultDisplay .content {
    -fx-background-color: transparent, #383838, transparent, #383838;
    -fx-background-radius: 0;
}

#tags {
    -fx-hgap: 7;
    -fx-vgap: 3;
}

#tags .label {
    -fx-text-fill: white;
    -fx-background-color: #3e7b91;
    -fx-padding: 1 3 1 3;
    -fx-border-radius: 2;
    -fx-background-radius: 2;
    -fx-font-size: 11;
}

.label-new {
    -fx-font-size: 14;
    -fx-font-family: "Segoe UI Semibold";
    -fx-text-fill: #aaa;
    -fx-opacity: 1;
}

.label-title {
    -fx-font-size: 16;
    -fx-font-family: "Segoe UI Semibold";
    -fx-text-fill: #ccc;
    -fx-opacity: 1;
}

.label-h1 {
    -fx-font-size: 28px;
    -fx-font-family: "Segoe UI Semibold";
    -fx-text-fill: #aaa;
    -fx-opacity: 1;
}

.default-color0.chart-bar { -fx-bar-fill: #FFC58C; }

.default-color0.chart-pie { -fx-pie-color: #FFADCA; }
.default-color1.chart-pie { -fx-pie-color: #BA72E8; }
.default-color2.chart-pie { -fx-pie-color: #8999FF; }
.default-color3.chart-pie { -fx-pie-color: #72D7E8; }
.default-color4.chart-pie { -fx-pie-color: #7DFFAF; }
.default-color5.chart-pie { -fx-pie-color: #cccccc; }

.chart-title {
    -fx-font-size: 16;
    -fx-font-family: "Segoe UI Semibold";
    -fx-text-fill: #ccc;
    -fx-opacity: 1;
}

.axis-label {
    -fx-text-fill: #aaa;
}

.chart-pie-label-line {
    -fx-stroke: #aaa;
    -fx-fill: #aaa;
}

.chart-pie-label { /*this is what you need for labels*/
    -fx-fill: #aaa;
}

1 Ответ

0 голосов
/ 02 апреля 2020

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

class ModuleListViewCell extends ListCell<Module> {
    @Override
    protected void updateItem(Module module, boolean empty) {
        super.updateItem(module, empty);

        if (empty || module == null) {
            setGraphic(null);
            setText(null);
            setStyle("");
        } else {
            setGraphic(new ModuleCard(module, getIndex() + 1).getRoot());
            if (module.equals(getCurrentlyShownModule())) {
                setStyle("-fx-background-color: " + BACKGROUND_COLOUR + "; "
                        + "-fx-border-color: " + BORDER_COLOUR + "; "
                        + "-fx-border-width: " + BORDER_WIDTH + ";");
            } else {
                setStyle("");
            }
        }
    }
}

Лог c может быть не совсем тем, что вам конкретно нужно, но вы должны убедиться, что стиль установлен на соответствующее значение во всех возможных путях кода.

Кроме того, вы не должны создавать новые элементы пользовательского интерфейса при каждом вызове updateItem(...), который может вызываться очень часто (например, во время прокрутки). Создайте компонент пользовательского интерфейса один раз и обновите его с updateItem(): 

class ModuleListViewCell extends ListCell<Module> {

    private final ModuleCard card = new ModuleCard();

    @Override
    protected void updateItem(Module module, boolean empty) {
        super.updateItem(module, empty);

        if (empty || module == null) {
            setGraphic(null);
            setText(null);
            setStyle("");
        } else {
            // update card with data...
            card.setModule(module);
            card.setIndex(getIndex() + 1);
            setGraphic(card.getRoot());
            if (module.equals(getCurrentlyShownModule())) {
                setStyle("-fx-background-color: " + BACKGROUND_COLOUR + "; "
                        + "-fx-border-color: " + BORDER_COLOUR + "; "
                        + "-fx-border-width: " + BORDER_WIDTH + ";");
            } else {
                setStyle("");
            }
        }
    }
}

, определяя соответствующие методы в ModuleCard, как требуется.

...