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