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

问题描述 投票:0回答:1

我正在创建这个看起来像 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)

java user-interface javafx
1个回答
0
投票

您可能根本不需要 ScrollPane。

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

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

这是一个半透明的 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
功能生成的图像:

enter image description here

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

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

enter image description here

© www.soinside.com 2019 - 2024. All rights reserved.