如何解决彼此属于两个不同窗格的控件的重叠

Question

试图制作隐藏/显示右窗口/窗格的切换按钮。这里是一个演示例如：

package demoapp; 

import javafx.application.Application; 
import javafx.event.ActionEvent; 
import javafx.event.EventHandler; 
import javafx.geometry.Pos; 
import javafx.scene.Scene; 
import javafx.scene.control.Button; 
import javafx.scene.control.Label; 
import javafx.scene.layout.*; 
import javafx.scene.text.Text; 
import javafx.stage.Stage; 

public class DemoApp extends Application { 

    private static final String styleHide = "-fx-skin: \"com.sun.javafx.scene.control.skin.ButtonSkin\"; -fx-base: gray; -fx-padding: 2; -fx-font-weight: bold; -fx-text-fill: #FFF; -fx-background-radius: 0 10 10 0;"; 
    private static final String styleShow = "-fx-skin: \"com.sun.javafx.scene.control.skin.ButtonSkin\"; -fx-base: gray; -fx-padding: 2; -fx-font-weight: bold; -fx-text-fill: #FFF; -fx-background-radius: 10 0 0 10;"; 
    private final double minWidth = 5; 
    private final double maxWidth = 170; 
    private boolean hidden = true; 

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

    @Override 
    public void start(Stage primaryStage) { 
     BorderPane borderPane = new BorderPane(); 
     borderPane.setRight(getRightContent()); 

     VBox box = new VBox(); 
     box.setStyle("-fx-background-color: lightgray"); 
     box.setAlignment(Pos.CENTER_RIGHT); 
     box.getChildren().add(new Label("Main Content")); 
     box.getChildren().add(new Button("Button1")); 
     borderPane.setCenter(box); 

     StackPane root = new StackPane(); 
     root.getChildren().add(borderPane); 
     primaryStage.setScene(new Scene(root, 300, 250)); 
     primaryStage.show(); 
    } 

    private GridPane getRightContent() { 

     final Button btn = new Button(" toggle button "); 
     final GridPane pane = new GridPane(); 

     btn.setPrefHeight(40); 
     btn.setFocusTraversable(false); 
     btn.setOnAction(new EventHandler<ActionEvent>() { 

      public void handle(ActionEvent event) { 
       toggleRightContent(btn, pane); 
      } 
     }); 

     toggleRightContent(btn, pane); 

     Text txt = new Text("Right Content"); 
     txt.setWrappingWidth(maxWidth - 20); 

     pane.setVgap(10); 
     pane.setStyle("-fx-padding: 5; -fx-background-color: gray"); 
     pane.addColumn(0, btn, txt); 

     return pane; 
    } 

    private void toggleRightContent(Button btn, Pane pane) { 
     if (hidden) { 
      btn.setTranslateX(-5); 
      btn.setStyle(styleHide); 
      pane.toBack(); 
      pane.setMaxWidth(maxWidth); 
      pane.setMinWidth(maxWidth); 
      pane.setPrefWidth(maxWidth); 
     } else { 
      btn.setTranslateX(-113); 
      btn.setStyle(styleShow); 
      pane.toFront(); 
      pane.setMaxWidth(minWidth); 
      pane.setMinWidth(minWidth); 
      pane.setPrefWidth(minWidth); 
     } 
     hidden = !hidden; 
    } 
} 

的问题是，此切换按钮被部分地重叠在主内容的Button1并防止其点击它。这是因为上面的代码为pane.toFront();。如果我删除此行，则此时Button1正在阻止切换按钮在其上可点击。
我该如何解决这个问题？或者还有其他方式来完成不同的切换按钮功能吗？
谢谢。

Answer 1

您使用的是什么版本的JavaFX？

在Java 2.1（开发者预览）你的应用程序看起来接下来方式：

UPDATE：

你的推杆按钮右边的窗格中，所以有它的正面是防止底部面板从获得活动。

最好把按钮根，所以它不会依赖于内容窗格：

public class AccordionStyleButton extends Application { 

    private static final String styleHide = "-fx-skin: \"com.sun.javafx.scene.control.skin.ButtonSkin\"; -fx-base: gray; -fx-padding: 2; -fx-font-weight: bold; -fx-text-fill: #FFF; -fx-background-radius: 0 10 10 0;"; 
    private static final String styleShow = "-fx-skin: \"com.sun.javafx.scene.control.skin.ButtonSkin\"; -fx-base: gray; -fx-padding: 2; -fx-font-weight: bold; -fx-text-fill: #FFF; -fx-background-radius: 10 0 0 10;"; 
    private final double minWidth = 5; 
    private final double maxWidth = 170; 
    private boolean hidden = true; 

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

    private Pane root; 

    @Override 
    public void start(Stage primaryStage) { 
     BorderPane borderPane = new BorderPane(); 
     root = new Pane(); 
     root.getChildren().add(borderPane); 

     borderPane.prefWidthProperty().bind(root.widthProperty()); 
     borderPane.prefHeightProperty().bind(root.heightProperty()); 

     final Pane rightPane = getRightContent(); 
     borderPane.setRight(rightPane); 

     VBox box = new VBox(); 
     box.setStyle("-fx-background-color: lightgray;"); 
     box.setAlignment(Pos.CENTER_RIGHT); 
     box.getChildren().add(new Label("Main Content")); 
     box.getChildren().add(new Button("Button1")); 
     box.getChildren().add(new Button("Button2")); 
     borderPane.setCenter(box); 

     primaryStage.setScene(new Scene(root, 300, 250)); 

     final Button btn = new Button(" toggle button "); 
     btn.setPrefHeight(40); 
     btn.setFocusTraversable(false); 
     btn.setOnAction(new EventHandler<ActionEvent>() { 

      public void handle(ActionEvent event) { 
       toggleRightContent(btn, rightPane); 
      } 
     }); 

     root.getChildren().add(btn); 
     toggleRightContent(btn, rightPane); 

     primaryStage.show(); 
    } 


    private GridPane getRightContent() { 
     GridPane pane = new GridPane(); 

     Text txt = new Text("Right Content"); 
     txt.setWrappingWidth(maxWidth - 20); 

     pane.setVgap(10); 
     pane.setStyle("-fx-padding: 5; -fx-background-color: gray;"); 
     pane.addColumn(0, txt); 

     return pane; 
    } 

    private void toggleRightContent(Button btn, Pane pane) { 
     if (hidden) { 
      btn.setStyle(styleHide); 
      pane.setMaxWidth(maxWidth); 
      pane.setMinWidth(maxWidth); 
      pane.setPrefWidth(maxWidth); 
      btn.layoutXProperty().bind(root.widthProperty().subtract(maxWidth)); 
     } else { 
      btn.setStyle(styleShow); 
      pane.setMaxWidth(minWidth); 
      pane.setMinWidth(minWidth); 
      pane.setPrefWidth(minWidth); 
      btn.layoutXProperty().bind(root.widthProperty().subtract(minWidth).subtract(btn.widthProperty())); 
     } 
     hidden = !hidden; 
    } 
}