在 JavaFX 中重新定位手风琴箭头
Reposition the accordian arrow in JavaFX
我想将一个手风琴控件嵌套在另一个控件中,虽然这按预期工作,但我想对其进行自定义,以便嵌套的手风琴的箭头相对于顶层缩进。
link 显示了当前的情况:-
The bottom level arrows need to move in 20px
我想不出在代码或 scenebuilder 中设置它的方法。但是,如果我在 scenicview 中打开 运行 应用程序,它似乎显示不同,我可以看到 TitledPane 组成为:TitleRegion>StackPane arrowRegion>StackPane 箭头。如果我向其中添加 fx-translateX 20.0,它就会执行我想要的操作。
代码或者fxml有好的解决方案吗?或者我可以 css 做 scenicview 可以做的事情吗(我也找不到 scenicview 的导出)。
我刚刚在 scenebuilder 中修改了 Netbeans 模板 JavaFX fxml 项目。使用 JAVA 1.8.0.92., nb8.0.2, latest sb +sv.我的 fxml 是:
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.Accordion?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.TitledPane?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.text.Text?>
<AnchorPane id="AnchorPane" prefHeight="200" prefWidth="320" xmlns="http://javafx.com/javafx/8.0.65" xmlns:fx="http://javafx.com/fxml/1" fx:controller="accordianchildtitledpanearrrowcustom.FXMLDocumentController">
<children>
<Label fx:id="label" alignment="CENTER" contentDisplay="CENTER" layoutX="79.0" layoutY="14.0" minHeight="16" minWidth="69" text="Example nested accordian" />
<Accordion layoutY="38.0" prefHeight="54.0" prefWidth="320.0">
<panes>
<TitledPane alignment="CENTER" animated="false" text="Top Level 1">
<content>
<Accordion>
<panes>
<TitledPane alignment="CENTER" animated="false" text="Bottom Level 1">
<content>
<Text strokeType="OUTSIDE" strokeWidth="0.0" text="example text 1" />
</content></TitledPane>
<TitledPane alignment="CENTER" animated="false" contentDisplay="CENTER" text="Bottom Level 2">
<content>
<Text strokeType="OUTSIDE" strokeWidth="0.0" text="example text 2" />
</content></TitledPane>
</panes>
</Accordion>
</content>
</TitledPane>
<TitledPane alignment="CENTER" animated="false" text="Top Level 2" />
</panes>
</Accordion>
</children>
</AnchorPane>
在应用程序 css 文件中,您可以添加以下行来翻译箭头按钮:
.accordion .title > .arrow-button .arrow{
-fx-translate-x: 20;
}
如果只想翻译嵌套TitledPanes
的箭头按钮,可以使用:
.titled-pane .accordion .title > .arrow-button .arrow{
-fx-translate-x: 20;
}
样式表可以添加如下:
scene.getStylesheets().add(getClass().getResource("/yourPackage/yourStyleSheet.css").toExternalForm());
我想将一个手风琴控件嵌套在另一个控件中,虽然这按预期工作,但我想对其进行自定义,以便嵌套的手风琴的箭头相对于顶层缩进。 link 显示了当前的情况:- The bottom level arrows need to move in 20px
我想不出在代码或 scenebuilder 中设置它的方法。但是,如果我在 scenicview 中打开 运行 应用程序,它似乎显示不同,我可以看到 TitledPane 组成为:TitleRegion>StackPane arrowRegion>StackPane 箭头。如果我向其中添加 fx-translateX 20.0,它就会执行我想要的操作。
代码或者fxml有好的解决方案吗?或者我可以 css 做 scenicview 可以做的事情吗(我也找不到 scenicview 的导出)。
我刚刚在 scenebuilder 中修改了 Netbeans 模板 JavaFX fxml 项目。使用 JAVA 1.8.0.92., nb8.0.2, latest sb +sv.我的 fxml 是:
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.Accordion?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.TitledPane?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.text.Text?>
<AnchorPane id="AnchorPane" prefHeight="200" prefWidth="320" xmlns="http://javafx.com/javafx/8.0.65" xmlns:fx="http://javafx.com/fxml/1" fx:controller="accordianchildtitledpanearrrowcustom.FXMLDocumentController">
<children>
<Label fx:id="label" alignment="CENTER" contentDisplay="CENTER" layoutX="79.0" layoutY="14.0" minHeight="16" minWidth="69" text="Example nested accordian" />
<Accordion layoutY="38.0" prefHeight="54.0" prefWidth="320.0">
<panes>
<TitledPane alignment="CENTER" animated="false" text="Top Level 1">
<content>
<Accordion>
<panes>
<TitledPane alignment="CENTER" animated="false" text="Bottom Level 1">
<content>
<Text strokeType="OUTSIDE" strokeWidth="0.0" text="example text 1" />
</content></TitledPane>
<TitledPane alignment="CENTER" animated="false" contentDisplay="CENTER" text="Bottom Level 2">
<content>
<Text strokeType="OUTSIDE" strokeWidth="0.0" text="example text 2" />
</content></TitledPane>
</panes>
</Accordion>
</content>
</TitledPane>
<TitledPane alignment="CENTER" animated="false" text="Top Level 2" />
</panes>
</Accordion>
</children>
</AnchorPane>
在应用程序 css 文件中,您可以添加以下行来翻译箭头按钮:
.accordion .title > .arrow-button .arrow{
-fx-translate-x: 20;
}
如果只想翻译嵌套TitledPanes
的箭头按钮,可以使用:
.titled-pane .accordion .title > .arrow-button .arrow{
-fx-translate-x: 20;
}
样式表可以添加如下:
scene.getStylesheets().add(getClass().getResource("/yourPackage/yourStyleSheet.css").toExternalForm());