JavaFX，我需要尽快获得有关滚动窗格的帮助

Question

我正在创建这个看起来像 Telegram 的消息应用程序。我添加了 BorderPane 并使用 LeftRegion 和 LeftStackPane 在其左侧创建了一个 chatList。现在，我希望每次您单击聊天（用户名）时，您都会被重定向到与该用户的聊天。因此，在 BorderPane 的中间，我制作了一个漂亮的背景，就像 Telegram 那样。然而，我意识到我需要使用 SCROLLPANE。

如果消息很多，我需要使用 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 之前的图像 [在此处输入图像描述](https://i.sstatic.net/mLvQo6XD.png)

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>