java中的Listview背景透明

Question

我在 borderpane 中有一个列表视图，在其中加载一些 vbox，如何将背景设置为对所有项目透明以查看我的 borderpane 的背景

我尝试将我的项目的所有背景设置为透明，但它不起作用

<VBox prefHeight="219.0" prefWidth="335.0" style="-fx-background-color: transparent;" stylesheets="@css/sheet.css" xmlns="http://javafx.com/javafx/21" xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.example.progetto.controller_graf.ViaggioController">


<Pane prefHeight="219.0" prefWidth="590.0" style="-fx-background-color: transparent;">
      <ImageView fx:id="imagine" fitHeight="219.0" fitWidth="335.0" pickOnBounds="true" preserveRatio="true" />
      <Pane prefHeight="219.0" prefWidth="335.0" style="-fx-background-color: transparent;">
         <children>
            <Rectangle arcHeight="5.0" arcWidth="5.0" fill="WHITE" height="44.0" layoutX="20.0" layoutY="161.0" stroke="WHITE" strokeType="INSIDE" width="301.0" />
            <ImageView fitHeight="38.0" fitWidth="36.0" layoutX="20.0" layoutY="164.0">
               <image>
                  <Image url="@css/immagini/calendario.png" />
               </image>
            </ImageView>
            <Text fx:id="data" layoutX="68.0" layoutY="189.0" strokeType="OUTSIDE" strokeWidth="0.0" style="-fx-font-size: 20;" styleClass="fontnuovo" text="Text" wrappingWidth="204.70003700256348" />
            <Text fx:id="prezzo" layoutX="284.0" layoutY="189.0" strokeType="OUTSIDE" strokeWidth="0.0" style="-fx-font-size: 20;" styleClass="fontnuovo" text="Text" />
            <Button fx:id="title" alignment="TOP_LEFT" layoutX="-15.0" layoutY="-9.0" mnemonicParsing="false" onAction="#pagetrip" prefHeight="79.0" prefWidth="292.0" style="-fx-background-color: transparent; -fx-font-size: 35; -fx-cursor: hand;" styleClass="fontnuovo" text="Button" />
         </children>
      </Pane>
   </Pane>
</VBox>

---

<BorderPane maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" minHeight="-Infinity" minWidth="-Infinity" prefHeight="650.0" prefWidth="1000.0" stylesheets="@css/sheet.css" xmlns="http://javafx.com/javafx/21" xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.example.progetto.controller_graf.ViewTripController">
   <center>
      <Pane prefHeight="200.0" prefWidth="200.0" styleClass="background" BorderPane.alignment="CENTER">
         <children>
            <ListView fx:id="listaview" prefHeight="522.0" prefWidth="436.0">
               <styleClass>
                  <String fx:value="list-view" />
                  <String fx:value="list-cell" />
               </styleClass></ListView>
         </children>
      </Pane>
   </center>
</BorderPane>

Answer 1

“看透”默认值

ListView

所需的最少 CSS 是：

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

如果您使用具有复杂图形的自定义单元格，请确保适当地设置构成图形的节点的样式。默认情况下，除了场景的根之外，没有任何layout应用任何背景。这意味着单元格中的任何“布局”都将是透明的，除非您明确将它们设置为不透明。至于控件，有些默认有背景，有些则没有。您必须根据需要设计它们的样式。 请注意，上面的 CSS 不会对滚动条执行任何操作。它还删除了选定和聚焦的单元格的背景样式，尽管选择单元格时文本仍会变为白色。您必须根据需要添加自己的样式。

这里有一些有用的资源：

• JavaFX CSS 参考指南

  – 记录 CSS 在 JavaFX 中的工作方式以及各种控件的公共结构，以及可用的选择器和伪类。

• modena.css

  – JavaFX 8+ 的默认用户代理样式表。如果您想了解控件的默认样式以及如何最好地覆盖这些默认样式，请研究此内容。

我建议尽可能使用样式表而不是设置

style

属性（无论是在代码中还是通过 FXML）。

顺便说一句，如果您发现自己硬编码了

layoutX

和

layoutY

等属性，那么您就没有正确使用布局。绝对定位不能很好地响应 UI 大小的变化。您应该使用适当的布局或布局组合，以获得所有控件的正确相对位置。例如，

HBox

可能对您有用。如果您需要更精细的控制，也可以使用

GridPane

。

这是带有透明列表单元格的透明列表视图的示例。应用于根的线性渐变是为了显示列表视图后面的内容如何对用户可见。

---

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.ListView;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;

public class Main extends Application {

  private static final String DATA_URI_STYLESHEET =
      """
      data:text/css,
      .root {
          -fx-background-color: linear-gradient(to bottom, #FFECD2, #FCB69F);
      }

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

  @Override
  public void start(Stage primaryStage) {
    var listView = new ListView<String>();
    for (int i = 1; i <= 100; i++) {
      listView.getItems().add("Item #" + i);
    }

    var scene = new Scene(new StackPane(listView), 600, 400);
    scene.getStylesheets().add(DATA_URI_STYLESHEET);

    primaryStage.setScene(scene);
    primaryStage.show();
  }
}

为了使示例运行更容易，CSS 在代码中定义为多行字符串，并作为数据 URI 添加到场景中（这需要 JavaFX 17+）。不过为了方便，这里单独放一下CSS：

.root {
    -fx-background-color: linear-gradient(to bottom, #FFECD2, #FCB69F);
}

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

这是示例的屏幕截图：