JavaFX：旋转的 TitledPane 不填充布局

Question

我正在制作一个桌面应用程序，并试图创建一个垂直的 TitledPane 来表示 "vertical collapsible toolbar"。

我已经研究了如何做到这一点并且能够正确创建我的垂直 TitledPane，但我不知道如何设置 TitledPane 的大小来填充布局。

这是我所做的和我想要的截图。我的 VerticalTitledPane 是一个包含在根布局中的 FXML，它是一个 BorderPane，并设置为放置在左侧容器上。您知道是否可以告诉 TitledPane 填充布局（伪代码中的 TitledPane.height = BorderPane.left.height）吗？

这是垂直 TitledPane 的 FXML。 BorderPane 仅包含并将其设置在左侧（如果需要请询问）：

<Group xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="ch.aardex.widgets.toolbar_vertical.VerticalToolbarCtrl" fx:id="group">
<stylesheets>
    <URL value="@/ch/aardex/widgets/toolbar_vertical/toolbar_vertical.css"/>
</stylesheets>
<children>
    <Accordion rotate="90.0" fx:id="accordion">
        <panes>
          <TitledPane onMouseClicked="#expandMenu" >
               <content>
                    <HBox spacing="15.0">
                        <children>
                            <Button fx:id="btShowHome" styleClass="vertical-bar-button" onAction="#showHome" rotate="270.0" >
                                <graphic>
                                    <ImageView>
                                        <Image url="/ch/aardex/widgets/images/logo_home_48.png"/>
                                    </ImageView>
                                </graphic>
                            </Button>

                          <Button fx:id="btShowInitPatient" styleClass="vertical-bar-button" onAction="#showInitPatient" rotate="270.0" >
                              <graphic>
                                  <ImageView>
                                      <Image url="/ch/aardex/widgets/images/user_add_48.png"/>
                                  </ImageView>
                              </graphic>
                          </Button>

                          <Button fx:id="btShowReadMems" styleClass="vertical-bar-button" onAction="#showReadMems" rotate="270.0">
                              <graphic>
                                  <ImageView>
                                      <Image url="/ch/aardex/widgets/images/mems_read_48.png"/>
                                  </ImageView>
                              </graphic>
                          </Button>

                          <Button fx:id="btShowPatientList" styleClass="vertical-bar-button" onAction="#showPatientList" rotate="270.0">
                              <graphic>
                                  <ImageView>
                                      <Image url="/ch/aardex/widgets/images/user_group_48.png"/>
                                  </ImageView>
                              </graphic>
                          </Button>
                       </children>
                    </HBox>
               </content>
            </TitledPane>
        </panes>
      </Accordion>
</children>

非常感谢！

Answer 1

我终于找到了一种方法来实现我想要的。由于我没有找到很多答案，我会 post 我希望这可以帮助其他人。

我发现最好的实现方法是使用带有一些动画的简单 VBox。

这是 FXML：

<?xml version="1.0" encoding="UTF-8"?>
<?import java.lang.*?>
<?import java.net.*?>
<?import java.util.*?>
<?import javafx.scene.*?>
<?import javafx.geometry.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.image.*?>

<VBox minWidth="75.0" alignment="CENTER_RIGHT" styleClass="vertical-bar" fx:id="toolbarVertical" xmlns:fx="http://javafx.com/fxml/1" fx:controller="ch.aardex.root.ToolbarVerticalCtrl">
    <padding>
        <Insets top="10" right="10" bottom="10" left="10"/>
    </padding>

    <Button fx:id="btExpandMenu" styleClass="vertical-bar-button" onAction="#expandMenu" >
        <graphic>
            <ImageView>
                <Image url="..."/>
            </ImageView>
        </graphic>
    </Button>

    <VBox VBox.vgrow="ALWAYS"/>

    <GridPane alignment="CENTER_RIGHT" >
        <Label fx:id="homeLabel" text="Go to the dashboard view" GridPane.columnIndex="0" GridPane.rowIndex="0" managed="false" wrapText="true" />
        <Button fx:id="homeBt" styleClass="vertical-bar-button" onAction="#showHome" GridPane.columnIndex="1" GridPane.rowIndex="0" >
            <graphic>
                <ImageView>
                    <Image url="..."/>
                </ImageView>
            </graphic>
        </Button>

        <Label fx:id="addLabel" text="Read a patient or add a new one" GridPane.columnIndex="0" GridPane.rowIndex="1" managed="false" wrapText="true"/>
        <Button fx:id="addBt" styleClass="vertical-bar-button" onAction="#showInitPatient" GridPane.columnIndex="1" GridPane.rowIndex="1" >
            <graphic>
                <ImageView>
                    <Image url="..."/>
                </ImageView>
            </graphic>
        </Button>

        <Label fx:id="listLabel" text="Show the list of patients" GridPane.columnIndex="0" GridPane.rowIndex="2" managed="false" wrapText="true"/>
        <Button fx:id="listBt" styleClass="vertical-bar-button" onAction="#showPatientList" GridPane.columnIndex="1" GridPane.rowIndex="2">
            <graphic>
                <ImageView>
                    <Image url="..."/>
                </ImageView>
            </graphic>
        </Button>

        <Label fx:id="confLabel" text="Settings of the app" GridPane.columnIndex="0" GridPane.rowIndex="3" managed="false" wrapText="true"/>
        <Button fx:id="confBt" styleClass="vertical-bar-button" onAction="#showConfiguration" GridPane.columnIndex="1" GridPane.rowIndex="3">
            <graphic>
                <ImageView>
                    <Image url="..."/>
                </ImageView>
            </graphic>
        </Button>
    </GridPane>
</VBox>

控制器：

import ch.aardex.common.IController;
import java.net.URL;
import java.util.ResourceBundle;
import javafx.animation.Animation;
import javafx.animation.Transition;
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.layout.VBox;
import javafx.util.Duration;

public class ToolbarVerticalCtrl extends IController implements Initializable {

    // FXML controls
    @FXML private VBox toolbarVertical;

    @FXML private Label homeLabel;
    @FXML private Button homeBt;

    @FXML private Label addLabel;
    @FXML private Button addBt;

    @FXML private Label listLabel;
    @FXML private Button listBt;

    @FXML private Label confLabel;
    @FXML private Button confBt;

    // Constants
    private final double EXPANSION = 90.0; // the expansion of the vertical toolbar
    private final double MARGIN = 10.0; // the margin of the vertical toolbar
                                        // margin is used to set the offset when sliding the toolbar

    // Variables
    private boolean hidden = true; // is the bar hidden ?

    @Override
    public void initialize(URL url, ResourceBundle rb) {
    }

    @FXML
    private void showHome(ActionEvent event) {
        getRoot().initViewWithTopOnly(DASHBOARD_VIEW);
    }

    @FXML
    private void showInitPatient(ActionEvent event) {
        getRoot().initViewWithTopAndVertical(WORKFLOW_VIEW);
    }

    @FXML
    private void showPatientList(ActionEvent event) {
        getRoot().initViewWithTopAndVertical(LIST_VIEW);
    }

    @FXML
    private void showConfiguration(ActionEvent event) {
        getRoot().initViewWithTopAndVertical(CONFIG_VIEW);
    }

    @FXML
    private void expandMenu(ActionEvent event){
        final Animation hideSideBar = new Transition() {
            { setCycleDuration(Duration.millis(250)); }

            @Override
            protected void interpolate(double frac) {
                double current = EXPANSION - EXPANSION * frac;
                toolbarVertical.setPrefWidth(EXPANSION + current);
            }
        };

        final Animation showSideBar = new Transition() {
            { setCycleDuration(Duration.millis(250)); }

            @Override
            protected void interpolate(double frac) {
                double current = MARGIN + EXPANSION * frac;
                toolbarVertical.setPrefWidth(EXPANSION + current);
            }
        };

        showSideBar.onFinishedProperty().set((ActionEvent event1) -> {
            setLabelsManagement(true);
        });

        if(showSideBar.statusProperty().get() == Animation.Status.STOPPED && 
                hideSideBar.statusProperty().get() == Animation.Status.STOPPED){
            if(!hidden){
                hideSideBar.play();
                setLabelsManagement(false);
                System.out.println(toolbarVertical.getWidth());
            } else {
                showSideBar.play();
                System.out.println(toolbarVertical.getWidth());
            }
        }
    }

    private void setLabelsManagement(boolean b){
        homeLabel.setManaged(b);
        homeLabel.setVisible(b);

        addLabel.setManaged(b);
        addLabel.setVisible(b);

        listLabel.setManaged(b);
        listLabel.setVisible(b);

        confLabel.setManaged(b);
        confLabel.setVisible(b);

        hidden = !b;
    }    
}

重要的部分是expandMenu函数，它负责滑动VBox和隐藏/管理或不隐藏/管理Labels（因为在这种情况下，即使在隐藏，因此在不需要时添加一些额外的 space）。

原文出处可以多给大家一些提示，思路来自here.

希望这可以帮助到别人，干杯！

JavaFX：旋转的 TitledPane 不填充布局

JavaFX : Rotated TitledPane does not fill the layout

layout

javafx-2

fxml