JavaFX，始终为白色的滚动窗格

Question

我正在创建这个看起来像 Telegram 的消息应用程序。我添加了 BorderPane 并使用 LeftRegion 和 LeftStackPane 在其左侧创建了一个聊天列表。

我希望每次您单击聊天（用户名）时，您都会被重定向到与该用户的聊天。因此，在 BorderPane 的中间，我制作了一个漂亮的背景，就像 Telegram 那样。但是，我意识到我需要使用滚动窗格。

如果消息很多，我需要使用 ScrollPane 才能查看所有消息。

所以我添加了它，它只是白色的。

我试图让它变得透明，但一切都行不通。

如何使我的滚动窗格相对于 BorderPane 背景变得可转换，或者以某种方式更改 ScrollPane 背景，使其不总是白色，而是其他颜色，甚至可能是图像。

ScrollPane scrollPane = new ScrollPane(messageList);

// Create a new ScrollPane
scrollPane.setStyle("-fx-background-color: #00000; " + // Background color
        "-fx-border-color: #000000; " + // Border color
        "-fx-border-radius: 0px; " + // Border radius
        "-fx-background-radius: 0px;"); // Background radius

// Set the CSS style of the ScrollPane's viewport
scrollPane.viewportBoundsProperty().addListener((observable, oldValue, newValue) -> {
    scrollPane.setClip(new Rectangle(newValue.getWidth(), newValue.getHeight()));
});

scrollPane.setFitToWidth(true);  // Ensures the scroll pane width fits the content
scrollPane.setFitToHeight(true);
scrollPane.setFitToWidth(true);  // Ensures the scroll pane width fits the content
scrollPane.setFitToHeight(true);

scrollPane.setVisible(true);

//StackPane for INFOBOX and MESSAGE LIST
StackPane centerPane = new StackPane();
centerPane.getChildren().add(scrollPane);
centerPane.getChildren().add(infoBox);

这是添加 ScrollPanea 之前的图像

Answer 1

您可能根本不需要 ScrollPane。

相反，您可能想要一个透明的 ListView:

• 如何在javafx中获得透明列表视图？

这样您就可以将消息添加到列表中并让列表视图处理滚动。

这是一个半透明的 ListView，带有样式单元格和静态重复背景图像。

样式仅用于演示目的，您可以研究示例以了解如何完成类似的操作，并应用您自己的样式和实现（无论有或没有 FXML）。

styled-list.css

.root {
    -fx-font-size: 20px;
    -fx-font-weight: bold;
}

.list-background {
    -fx-background-image:url(dragon.png);
    -fx-background-size: 256px;
    -fx-opacity: 10%;
}

.list-cell {
    -fx-background-color: rgba(144,238,144,.1);
    -fx-text-fill: indigo;
}

.list-cell:odd {
    -fx-background-color: rgba(32,178,170,.1);
    -fx-border-color: rgba(32,178,170,.2);
    -fx-border-width: 1 0 1 0;
}

.list-view {
    -fx-background-color: transparent;
}

styled-list.fxml

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.ListView?>
<?import javafx.scene.layout.StackPane?>

<StackPane stylesheets="@styled-list.css" xmlns="http://javafx.com/javafx/19" xmlns:fx="http://javafx.com/fxml/1">
   <children>
      <StackPane styleClass="list-background" />
      <ListView />
   </children>
</StackPane>

使用场景生成器的

View | Show Sample Data

功能生成的图像：

用于样式设置的示例图标，以及所需的属性是：

<a href="https://www.flaticon.com/free-icons/dragon" title="dragon icons">Dragon icons created by Icongeek26 - Flaticon</a>

对于聊天应用程序，您可能需要为发送和接收的消息设置不同的样式，这也可以通过在 ListView 中设置单元格样式来完成，但如何做到这一点超出了我在此描述的范围。