JavaFx:“材料设计”菜单水平切换

时间:2019-08-19 13:29:28

标签: java javafx

我正在尝试制作一个如下所示的水平切换菜单:

enter image description here

我正在使用jfoenix 节点列表 但我没有很多成功

我的控制者:

package application;


import com.jfoenix.controls.JFXButton;
import com.jfoenix.controls.JFXNodesList;

import javafx.animation.TranslateTransition;
import javafx.fxml.FXML;
import javafx.scene.input.MouseEvent;
import javafx.scene.layout.HBox;
import javafx.scene.layout.StackPane;
import javafx.util.Duration;

public class backup {

    @FXML
    private StackPane container;

    @FXML
    private HBox menu;

    @FXML
    private JFXButton homeBt;

    @FXML
    private JFXButton registerBt;

    @FXML
    private JFXButton manageBt;

    @FXML
    private JFXNodesList nodeList;

    @FXML
    private HBox containerNode;

    @FXML
    private JFXButton testOne;
    private static final String FX_TEXT_FILL_WHITE = "-fx-text-fill:WHITE";
    private static final String ANIMATED_OPTION_BUTTON = "animated-option-button";
    private static final String ANIMATED_OPTION_SUB_BUTTON = "animated-option-sub-button";
    private static final String ANIMATED_OPTION_SUB_BUTTON2 = "animated-option-sub-button2";

    public void initialize() {
        TranslateTransition openSubMenu = new TranslateTransition(new Duration(350), nodeList);
        openSubMenu.setToY(100);
        TranslateTransition closeNav = new TranslateTransition(new Duration(350), nodeList);

        manageBt.addEventHandler(MouseEvent.MOUSE_CLICKED, (e) -> {
            if(nodeList.getTranslateY() != 0){
                openSubMenu.play();
            }else{
                closeNav.play();
            }
        });
    } 


}

我的fxml:

<?xml version="1.0" encoding="UTF-8"?>

<?import com.jfoenix.controls.JFXButton?>
<?import com.jfoenix.controls.JFXNodesList?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.StackPane?>


<StackPane fx:id="container" alignment="TOP_LEFT" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="200.0" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="application.backup">
   <children>
      <HBox fx:id="menu" alignment="CENTER" maxHeight="50.0" prefHeight="50.0" prefWidth="200.0">
         <children>
            <JFXButton fx:id="homeBt" text="Home" />
            <JFXButton fx:id="registerBt" text="Register" />
            <JFXButton fx:id="manageBt" text="Manager" />
         </children>
      </HBox>
      <JFXNodesList fx:id="nodeList" maxHeight="50.0" maxWidth="200.0" prefWidth="200.0" translateY="-50.0">
         <children>
            <HBox fx:id="containerNode" prefHeight="50.0" prefWidth="200.0" style="-fx-background-color: #000;" />
         </children>
      </JFXNodesList>
   </children>
</StackPane>

我的主:

public class Main extends Application {
    @Override
    public void start(Stage primaryStage) {
        try {
            Parent root = FXMLLoader.load(getClass().getResource("teste.fxml"));
            primaryStage.setTitle("Registration Form FXML Application");
            primaryStage.setScene(new Scene(root, 800, 500));
            primaryStage.show();
        } catch(Exception e) {
            e.printStackTrace();
        }
    }

    public static void main(String[] args) {
        launch(args);
    }
}

当我单击manageBt按钮时,转换无效 我将他的翻译Y设置为-50 然后单击“我将它与y 100放在一起”,有人可以帮助我如何从图像中进行类似的操作吗? 我已经尝试了一切,无法想象。

0 个答案:

没有答案