Javafx GUI编程

Question

所以我试着在顶板上做3个按钮，在底部面板上做3个单选按钮，但是当我运行它的时候，它会变得很奇怪，如果有人能帮我的话，我会很喜欢的。我对GUI还很陌生，所以我的代码可能是完全错误的。

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.control.RadioButton;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.HBox;
import javafx.scene.paint.Color;


public class ColorFactory extends Application {
    @Override
    public void start(Stage stage)
    {
        BorderPane pane = new BorderPane();
        // sets the width and height
        stage.setHeight(300);
        stage.setWidth(500);

        //calls the mainpanel constructor
        pane.setCenter(new MainPanel());
        //make the mainpanel visible using the setVisible(true)

        //call the stage.setScene
        stage.setScene(new Scene(pane));
        // set title to Color Factory
        stage.setTitle("Color Factory");
        //call stage.show
        stage.show();
    }
    private class MainPanel extends BorderPane
    {

        public MainPanel()
        {
            HBox Tpanel = new HBox(25);
            Tpanel = new HBox(25);
            Tpanel.setPrefWidth(500);
            Tpanel.setPrefHeight(50);
            Tpanel.setAlignment(Pos.TOP_CENTER);
            Button red = new Button("Red");
            red.setStyle("-fx-background-color: red");
            Button yellow = new Button("Yellow");
            yellow.setStyle("-fx-background-color: yellow;");
            Button orange = new Button("Orange");
            orange.setStyle("-fx-background-color: orange;");
            Tpanel.setStyle("-fx-background-color: white;");
            Tpanel.getChildren().addAll(red,yellow,orange);

            HBox Bpanel = new HBox(15);
            Bpanel.setPrefWidth(500);
            Bpanel.setPrefHeight(75);
            RadioButton green = new RadioButton("Green");
            RadioButton  blue = new RadioButton("Blue");
            RadioButton cyan = new RadioButton("Cyan"); 
            green.setStyle("-fx-background-color: green;");
            blue.setStyle("-fx-background-color: blue;");
            cyan.setStyle("-fx-background-color: cyan;");
            Bpanel.setAlignment(Pos.BOTTOM_CENTER);
            Bpanel.getChildren().addAll(green,blue,cyan);

            Label label = new Label("Top buttons change the panel color and bottom radio buttons change the text color");
            label.setAlignment(Pos.CENTER_LEFT);
            label.setTextFill(Color.BLUE);

            getChildren().addAll(Tpanel,Bpanel,label);
            HBox.setMargin(Tpanel, new Insets(5,10,5,10));
            HBox.setMargin(Bpanel, new Insets(5,10,5,10));
            HBox.setMargin(label, new Insets(150,10,5,10));

        }

    }

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

Answer 1

您的MainPanel是一个BorderPane：简单地向其中添加节点将在默认情况下将它们全部放在左上角(因此它们都在彼此之上)。使用BorderPane时，需要调用setCenter(...)、setTop(...)、setLeft(...)等来定位节点。

例如：

    //  getChildren().addAll(Tpanel,Bpanel,label);
    setTop(Tpanel);
    setBottom(Bpanel);
    setCenter(label);