使用 CSS 的 JavaFX ListView 圆角

Question

我想在我的 ListView 上有圆角。我目前拥有的 CSS 会圆角，直到我向 ListView 添加一个新字符串，然后角不再是圆的。我使用 ObservableList 来存储我的字符串并将 ListView 设置为 ObservableList。

我还检查了JavaFX CSS参考，但找不到对我的问题有用的任何内容。

无文字添加文字
后

我现在的css

.list-view {
    -fx-background-radius: 20px;
}

Answer 1

在您的示例中，列表单元格的默认样式与列表视图的圆形背景重叠。您可以向列表视图添加一些填充，这样就不会出现任何重叠。您也可以为列表视图的项目设置圆形边框。

文件格式：

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

<?import java.lang.String?>
<?import javafx.collections.FXCollections?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.control.ListView?>
<?import javafx.scene.layout.HBox?>


<HBox spacing="10.0" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1">
   <children>
      <ListView fx:id="listView1" style="-fx-background-radius: 20;">
         <items>
            <FXCollections fx:factory="observableArrayList">
               <String fx:value="Item 1" />
               <String fx:value="Item 2" />
               <String fx:value="Item 3" />
            </FXCollections>
         </items>
         <padding>
            <Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
         </padding>
      </ListView>
      <ListView fx:id="listView" stylesheets="@styling.css">
         <items>
            <FXCollections fx:factory="observableArrayList">
               <String fx:value="Item 1" />
               <String fx:value="Item 2" />
               <String fx:value="Item 3" />
            </FXCollections>
         </items>
         <padding>
            <Insets bottom="7.0" left="7.0" right="7.0" top="7.0" />
         </padding>
      </ListView>
   </children>
   <padding>
      <Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
   </padding>
</HBox>

style.css（用于第二个列表视图）：

.list-view {
    -fx-background-radius: 20;
}

.list-cell, .list-cell::focused {
    -fx-border-radius: 20;
}

预览：