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);