如何解决JavaFX ListView使用CSS圆角
我希望ListView上有圆角。我当前拥有的CSS会四角,直到我向ListView添加新的字符串,然后四角不再圆了。我正在使用ObservableList来存储我的字符串,并将ListView设置为ObservableList。
我还检查了JavaFX CSS参考,但找不到对我的问题有用的任何东西。
我当前的CSS
.list-view {
-fx-background-radius: 20px;
}
解决方法
在您的示例中,列表单元格的默认样式与列表视图的圆形背景重叠。您可以在列表视图中添加一些填充,以便没有任何重叠。列表视图的项目也可以具有圆形边框。
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;
}
预览:
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。