Vaadin 23 中虛擬列表的格式化問題

Question

我創建了一個 VirtualList 來顯示書籍信息。 我的渲染器將每本書信息呈現為手風琴，其中第一個面板是通用圖書信息（作者、標題等），它可能還有三個面板：注釋、評論、評論。 它按預期工作，但我確實遇到格式問題。 這是我的圖書渲染器：

    private final ComponentRenderer<Component, Book> bookRenderer = new ComponentRenderer<>(
        book -> {
            //info panel
            Accordion bookPresentation = new Accordion();
            HorizontalLayout bookInfo = new HorizontalLayout();
            bookInfo.getStyle().set("background-color", book.getHighlight());
            bookInfo.setWidth("100%");
            UnorderedList authorsList = createAuthorsList(book.getAuthors());
            authorsList.setMinWidth("24%");
            VerticalLayout taggedTitle = createTaggedTitle(book);
            VerticalLayout stars = createStarRating(book);
            VerticalLayout readerRating = createReaderRating(book);
            VerticalLayout bookStatus = createStatusField(book);
            bookInfo.add(authorsList, taggedTitle, stars, readerRating, bookStatus);
            AccordionPanel summary = new AccordionPanel(bookInfo);
            summary.addThemeVariants(DetailsVariant.SMALL);
            summary.addClassName("book-item");
            bookPresentation.add(summary);
            //annotation panel
            if (book.getAnnotation() != null && !book.getAnnotation().isBlank()) {
                TextArea annotation = new TextArea();
                annotation.setWidth("75%");
                annotation.setValue(book.getAnnotation());
                annotation.setReadOnly(true);
                annotation.setMaxHeight(MAX_HIGHT);
                bookPresentation.add("Аннотация", annotation);
            }
            if (book.getCommentary() != null && !book.getCommentary().isBlank()) {
                TextArea comment = new TextArea();
                comment.setValue(book.getCommentary());
                comment.setReadOnly(true);
                comment.setMaxHeight(MAX_HIGHT);
                bookPresentation.add("Комментарий", comment);
            }
            if (book.getReadersReviews() != null && !book.getReadersReviews().isEmpty()) {
                Accordion reviews = new Accordion();
                for (ReadersReview review : book.getReadersReviews()) {
                    TextArea reviewText = new TextArea();
                    reviewText.setMaxHeight(MAX_HIGHT);
                    reviewText.setValue(review.getReaderComment());
                    if(user == null || !user.getReaderName().equalsIgnoreCase(review.getReviewerName())) {
                        reviewText.setReadOnly(true);
                    }
                    reviews.add(review.getReviewerName(), reviewText);
                }
                bookPresentation.add("Мнение читателей", reviews);
            }
            return bookPresentation;
        });

這是我在屏幕上看到的：

1. 我在手風琴面板之間有分隔線，但列表中的兩個項目（書籍）之間沒有分隔線。 我寧願不這樣。 至少我確實需要將一本書與另一本書分開。 我確實搜索了 Vaadin 文檔，但沒有找到任何可以在 VirtualList 項之間顯示此類分隔符的設置。 我想讓這個分隔符的顏色和線寬與手風琴面板分隔符不同。 我遵循 Joel 建議並向 styles.css 文件添加邊框，並將 CSS class 添加到手風琴或其第一個面板，但它沒有任何效果。
2. 如屏幕截圖所示，顯示的 VirtualList 中項目之間的差距差異很大。 有時物品 go 一個接一個，有時它們之間的距離可以達到 2 英寸以上。 如何設置這些項目之間的固定距離？
3. 我已將 bookInfo 面板的寬度設置為 100%，但如您所見，它占用的空間要小得多。 我還指定了每個組件的寬度，它們的總和應等於 100%，但如您所見，它們沒有對齊。 我在那里缺少什么？

Answer 1

要在項目之間放置分隔線，您需要使用 CSS。一種方法是在您的 VirtualList 項目（通過渲染器）上設置 CSS class 名稱，說“book-item”，然后使用一些 CSS像下面這樣：

.book-item {
  border-top: 3px solid darkgray;
}
.book-item:first-of-type {
  border-top: none;
}