在JavaFX中重新定位手风琴箭头

时间:2016-04-27 23:13:56

标签: java css javafx scenebuilder

我想将一个手风琴控件嵌套在另一个中,虽然这样可以预期我想要自定义它,以便嵌套的手风琴的箭头相对于顶层缩进。 此链接显示目前的情况: - The bottom level arrows need to move in 20px

我无法找到在代码或scenebuilder中设置此方法的方法。但是,如果我在Scenicview中打开正在运行的应用程序,它似乎以不同方式显示它,我可以看到TitledPane组成为:TitleRegion> StackPane arrowRegion> StackPane箭头。如果我将fx-translateX 20.0添加到它,它就会做我想要的。

代码或fxml中是否有一个很好的解决方案?或者我可以获得css来做景观观察所能做的事情(我也找不到景区出口)。

我刚刚在scenebuilder中修改了Netbeans模板JavaFX fxml项目。使用JAVA 1.8.0.92。,nb8.0.2,最新的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>

1 个答案:

答案 0 :(得分:3)

在应用程序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());