使用 CSS 的 JavaFX ListView 圆角

Question

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

我也检查了 JavaFX CSS 参考资料，但找不到任何对我的问题有用的东西。

No text
After text is added

我现在的css

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

Answer 1

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

FXML:

<?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>

styling.css（对于第二个列表视图）：

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

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

预览：

使用 CSS 的 JavaFX ListView 圆角

JavaFX ListView rounded corners using CSS

css

listview

javafx