在javafx中同时使用Checkbox更改矩形的顺序和视图?

时间:2017-05-29 10:12:10

标签: javafx

我正在使用javafx中的两个复选框,如果第一个为真,那么矩形的顺序会改变,如果第二个复选框为true,则视图应该更改为垂直。这是我的例子

  public class Main extends Application{

    @Override
    public void start(Stage primaryStage) {
        // Displaying all the functions in Scene
        StackPane border = new StackPane();
        Scene scene = new Scene(border, 750, 500);
        primaryStage.setTitle("BorderPane");
        primaryStage.setScene(scene);
        primaryStage.show();


        HBox h1 = new HBox(20);
        h1.setPadding(new Insets(20));
        HBox h2 = new HBox(20);
        h1.setPadding(new Insets(20));

        VBox p = new VBox(20);

        CheckBox box = new CheckBox("Switch Places");
        CheckBox box1 = new CheckBox("Switch");
        Rectangle rect1 = new Rectangle(200,200);

        rect1.setFill(null);
        rect1.setStroke(Color.RED);

        Rectangle rect2 = new Rectangle(200,200);
        rect2.setFill(null);
        rect2.setStroke(Color.BLUE);
        h2.getChildren().addAll(box,box1);
        h1.getChildren().addAll(rect1,rect2,h2);
        box.setOnAction((e)->{
            if (box.isSelected()){
                h1.getChildren().clear();
                h1.getChildren().addAll(rect2,rect1,h2);
            }
            else if(box.isSelected() && (box1.isSelected())){
                p.getChildren().clear();
                p.getChildren().addAll(rect2,rect1,h2);
                border.getChildren().clear();
                border.getChildren().add(p); 
            }
            else{
                h1.getChildren().clear();
                h1.getChildren().addAll(rect1,rect2,h2);
            }
        });

        box1.setOnAction((e)->{       
            if(box.isSelected() && (box1.isSelected())){
                p.getChildren().clear();
                p.getChildren().addAll(rect2,rect1,h2);
                border.getChildren().clear();
                border.getChildren().add(p); 
            }
            else if(box1.isSelected()){
                p.getChildren().clear();
                p.getChildren().addAll(rect1,rect2,h2);
                border.getChildren().clear();
                border.getChildren().add(p); 
            }
             else{
                    h1.getChildren().clear();
                    h1.getChildren().addAll(rect1,rect2,h2);
                    border.getChildren().clear();
                    border.getChildren().add(h1);
                }   
        });

        border.getChildren().addAll(h1);

    }

    /**
     * @param args
     *            the command line arguments
     */
    public static void main(String[] args) {
        launch(args);
    }
}

当第一个复选框为true时:应更改矩形的顺序

当第二个复选框为true时:矩形应位于垂直视图中。

当两个复选框均为真时:应更改订单和查看两者。

以上代码的问题是当第二个复选框为true时,如果用户点击此状态下的第一个复选框,则矩形消失!另外,如何只查看垂直视图中的矩形而不是Checkbox。

谢谢

2 个答案:

答案 0 :(得分:2)

您可以通过分离两个属性来降低代码的复杂性。这样,在修改CheckBox状态时,您不必考虑超过2种情况。

只需使用2 Rectangle,其中一个总是左/上矩形。这允许您通过简单地替换stroke来交换rects。你也可以修改布局而不需要处理颜色......

此外,您可以使用GridPane,它允许水平和垂直布局,无需交换rects的父级:

private static Rectangle createRect(Color stroke) {
    Rectangle result = new Rectangle(200, 200, null);
    result.setStroke(stroke);
    return result;
}

@Override
public void start(Stage primaryStage) {
    // Displaying all the functions in Scene
    StackPane border = new StackPane();
    Scene scene = new Scene(border, 750, 500);
    primaryStage.setTitle("BorderPane");
    primaryStage.setScene(scene);
    primaryStage.show();

    CheckBox orderBox = new CheckBox("Switch Places");
    CheckBox orientationBox = new CheckBox("Switch");
    HBox h2 = new HBox(20, orderBox, orientationBox);

    Rectangle rect1 = createRect(Color.RED);
    Rectangle rect2 = createRect(Color.BLUE);

    GridPane gridPane = new GridPane();
    gridPane.setPadding(new Insets(20));
    gridPane.setHgap(20);
    gridPane.setVgap(20);
    gridPane.setAlignment(Pos.TOP_LEFT);

    // add checkboxes to first row
    gridPane.add(h2, 0, 0, 2, 1);

    // add rects to the second row
    gridPane.addRow(1, rect1, rect2);

    orderBox.selectedProperty().addListener((observable, oldValue, newValue) -> {
        // assign colors according to order
        if (newValue) {
            rect1.setStroke(Color.BLUE);
            rect2.setStroke(Color.RED);
        } else {
            rect1.setStroke(Color.RED);
            rect2.setStroke(Color.BLUE);
        }
    });

    orientationBox.selectedProperty().addListener((observable, oldValue, newValue) -> {
        // assign locations depending on orientation
        GridPane.setConstraints(rect1, 1, 1);

        if (newValue) {
            GridPane.setConstraints(rect2, 1, 2);
        } else {
            GridPane.setConstraints(rect2, 2, 1);
        }
    });

    border.getChildren().add(gridPane);
}

答案 1 :(得分:0)

您的box1将场景根更改为p。在box处理程序中,您将它们全部添加到h1。 JavaFX场景元素只能有一个父元素。因此,它们会从p中删除(暂时可见)并添加到h1,这是不可见的。