删除 JavaFX TitledPane 中的插图 CSS 不起作用
Remove insets in JavaFX TitledPane with CSS not working
根据我尝试过的 James_D (How to set/remove insets in JavaFX TitledPane) 的解决方案,似乎通过 CSS 从 JavaFX TitledPane 中删除插图不起作用?它确实在 Scene Builder 中正确更新,但在运行时插图保持不变。即使是 Scenic View 8.0 也报告了 9.6 的填充。
FXML 示例:
<?xml version="1.0" encoding="UTF-8"?>
<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<AnchorPane id="AnchorPane" prefHeight="200" prefWidth="320" stylesheets="@newCascadeStyleSheet.css" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/8" fx:controller="test3.FXMLDocumentController">
<children>
<Accordion layoutX="14.0" layoutY="14.0" prefHeight="270.0" prefWidth="320.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
<panes>
<TitledPane animated="false" text="untitled 1">
<content>
<AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="180.0" prefWidth="200.0">
<children>
<Button fx:id="button" layoutX="9.600000381469727" layoutY="9.600000381469727" prefHeight="124.0" prefWidth="318.0" text="Click Me!" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" />
</children>
</AnchorPane>
</content>
</TitledPane>
<TitledPane animated="false" text="untitled 2">
<content>
<AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="180.0" prefWidth="200.0" />
</content>
</TitledPane>
<TitledPane animated="false" text="untitled 3">
<content>
<AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="180.0" prefWidth="200.0" />
</content>
</TitledPane>
</panes>
</Accordion>
</children>
</AnchorPane>
CSS:
.titled-pane {
-fx-text-fill: rgb(0,100,157);
}
.titled-pane:focused {
-fx-color: -fx-base;
-fx-text-fill: white;
}
.titled-pane > .title {
-fx-text-fill: rgb(0,100,157);
-fx-font-weight: bold;
}
titled-pane > .title > .label{
-fx-text-fill: rgb(0,100,157);
-fx-font-weight: bold;
}
.titled-pane:focused > .title {
-fx-color: rgb(0,100,157);
-fx-text-fill: white;
}
.titled-pane > .title:hover {
-fx-color: lightgrey;
}
.titled-pane > * > * > AnchorPane {
-fx-padding: 0px ;
}
在 Scene Builder 中查看:(预览)
运行时查看:
所以似乎由于某种原因没有应用填充。在我的主要应用程序中,我使用了很多 Accordion
容器。另一种选择是将 FXML 代码中的填充添加到 TitledPane
的 AnchorPane
,这可行但很耗时。我在 CSS 中遗漏了什么吗?
将以下样式 -fx-padding
设置为 0 类。
.titled-pane .content AnchorPane {
-fx-padding: 0px;
}
扩展@NDY 的回答:
如果你不使用AnchorPane
作为TitledPane
的内容,而是使用其他节点,你必须相应地调整CSS。
用于删除 TitledPane
内容填充的通用 CSS 解决方案如下:
.titled-pane > .content > * {
-fx-padding: 0px;
}
这会将 TitledPane
内容的任何子项的填充设置为 0px
。
根据我尝试过的 James_D (How to set/remove insets in JavaFX TitledPane) 的解决方案,似乎通过 CSS 从 JavaFX TitledPane 中删除插图不起作用?它确实在 Scene Builder 中正确更新,但在运行时插图保持不变。即使是 Scenic View 8.0 也报告了 9.6 的填充。
FXML 示例:
<?xml version="1.0" encoding="UTF-8"?>
<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<AnchorPane id="AnchorPane" prefHeight="200" prefWidth="320" stylesheets="@newCascadeStyleSheet.css" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/8" fx:controller="test3.FXMLDocumentController">
<children>
<Accordion layoutX="14.0" layoutY="14.0" prefHeight="270.0" prefWidth="320.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
<panes>
<TitledPane animated="false" text="untitled 1">
<content>
<AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="180.0" prefWidth="200.0">
<children>
<Button fx:id="button" layoutX="9.600000381469727" layoutY="9.600000381469727" prefHeight="124.0" prefWidth="318.0" text="Click Me!" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" />
</children>
</AnchorPane>
</content>
</TitledPane>
<TitledPane animated="false" text="untitled 2">
<content>
<AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="180.0" prefWidth="200.0" />
</content>
</TitledPane>
<TitledPane animated="false" text="untitled 3">
<content>
<AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="180.0" prefWidth="200.0" />
</content>
</TitledPane>
</panes>
</Accordion>
</children>
</AnchorPane>
CSS:
.titled-pane {
-fx-text-fill: rgb(0,100,157);
}
.titled-pane:focused {
-fx-color: -fx-base;
-fx-text-fill: white;
}
.titled-pane > .title {
-fx-text-fill: rgb(0,100,157);
-fx-font-weight: bold;
}
titled-pane > .title > .label{
-fx-text-fill: rgb(0,100,157);
-fx-font-weight: bold;
}
.titled-pane:focused > .title {
-fx-color: rgb(0,100,157);
-fx-text-fill: white;
}
.titled-pane > .title:hover {
-fx-color: lightgrey;
}
.titled-pane > * > * > AnchorPane {
-fx-padding: 0px ;
}
在 Scene Builder 中查看:(预览)
运行时查看:
所以似乎由于某种原因没有应用填充。在我的主要应用程序中,我使用了很多 Accordion
容器。另一种选择是将 FXML 代码中的填充添加到 TitledPane
的 AnchorPane
,这可行但很耗时。我在 CSS 中遗漏了什么吗?
将以下样式 -fx-padding
设置为 0 类。
.titled-pane .content AnchorPane {
-fx-padding: 0px;
}
扩展@NDY 的回答:
如果你不使用AnchorPane
作为TitledPane
的内容,而是使用其他节点,你必须相应地调整CSS。
用于删除 TitledPane
内容填充的通用 CSS 解决方案如下:
.titled-pane > .content > * {
-fx-padding: 0px;
}
这会将 TitledPane
内容的任何子项的填充设置为 0px
。