JavaFX ListView使用CSS的圆角

Question

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

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

无文本
添加文本后

我目前的 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>

造型。css（用于第二个列表视图）：

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

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

预览：