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