我正在创建这个看起来像 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)
您可能根本不需要 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
功能生成的图像:
用于样式设置的示例图标,以及所需的属性是:
<a href="https://www.flaticon.com/free-icons/dragon" title="dragon icons">Dragon icons created by Icongeek26 - Flaticon</a>