使用JavaFX寫一個計算器的圖形交互界面（超級詳細！）

先給大家看看效果圖：

下面教大家如何一步一步寫出這個界面。

整個界面是定義大小

		primaryStage.setScene(scene);//設置初始的場景
		primaryStage.setHeight(520);//設置初始的高度
		primaryStage.setWidth(750);//設置初始的寬度
		primaryStage.setTitle("計算器");//設置標題
		primaryStage.setResizable(false);//不可放大
		primaryStage.show();//展示整個舞臺

		Button View = new Button("查看(V)");//設置按鈕的文本
		Button Eidt = new Button("編輯(E)");
		Button Help = new Button("幫助(H)");
		HBox hBox = new HBox();
		hBox.getChildren().addAll(View,Eidt,Help);//將三個按鈕添加到一個HBoxH中
		HBox.setMargin(View, new Insets(0,0,0,5));//設置在HBox中水平位置
		HBox.setMargin(Eidt, new Insets(0,0,0,5));//設置該按鈕距離上面的距離，右邊，底部，左邊的距離
		HBox.setMargin(Help, new Insets(0,0,0,5));//例如我設置的左邊的5，表示距離左邊的一個東西有5像素單位距離
		//這五個像素的單位的距離就相當於一個間隙

整個就是一個VBOX

TextArea text = new TextArea(experssion);
text.setPrefColumnCount(10);
text.setPrefRowCount(5);
text.setWrapText(true);
text.setFont(Font.font(15));//設置字體大小
text.setEditable(false);//設置文本是否可編輯
text.setLayoutX(5);//設置文本在VBOX裏面的位置
text.setLayoutY(10);
text.setPrefSize(270, 120);//設置文本的大小
TextArea answer = new TextArea();
answer.setEditable(false);
answer.setLayoutY(295);
answer.setLayoutX(5);
answer.setPrefSize(270, 60);
//按鈕的設置過於繁瑣而且十分簡單，所以我這裏就介紹一個數字按鈕的。
//將全部按鈕設置完後添加到一個GridPane中，GridPane是一個網格佈局
keyButton[i] = new Button(String.valueOf(i+1));//i表示按鈕裏面的數字
keyButton[i].setPrefSize(69, 54);	//按鈕的大小
if(i%3 == 0)
	GridPane.setMargin(keyButton[i], new Insets(0,0,0,10));//設置按鈕在GridPane的按鈕之間的間隙
//添加到特定的行列
keyBorad.add(keyButton[i], i-(i/3)*3, 3-i/3);
VBox vBox1 = new VBox(text,answer,keyboard,keylastHBox);

計算日期又可以設置是一個pane

		Label label = new Label("選擇所需的日期計算");//設置標籤裏面的內容
		label.setFont(Font.font(15));//設置標籤裏面字體的大小
		label.setLayoutY(5);//設置標籤的位置
		ComboBox<String> comboBox = new ComboBox<String>();//Combobox是一種下拉式的框
		comboBox.getItems().add("計算兩個日期之差");//添加子框裏面的內容
		comboBox.setValue("計算兩個日期之差");//設置combox初始顯示的內容
		comboBox.setMinWidth(425);//設置最小的寬度和高度
		comboBox.setMinHeight(30);
		Label label2 = new Label("從");
		label2.setFont(Font.font(15));
		ComboBox<String> comboBox1 = new ComboBox<String>();
		comboBox1.getItems().add("2016/8/27");
		comboBox1.setEditable(true);
		comboBox1.setValue("2016/8/27");
		Label label3 = new Label("到");
		label3.setFont(Font.font(15));
		ComboBox<String> comboBox2 = new ComboBox<String>();
		comboBox2.getItems().add("2019/6/23");
		comboBox2.getItems().add("2016/5/10");
		comboBox2.setEditable(true);
		comboBox2.setValue("2019/6/23");
		HBox hBox = new HBox(label2,comboBox1,label3,comboBox2);
		HBox.setMargin(label2, new Insets(5,10,0,10));
		HBox.setMargin(label3, new Insets(5,10,0,10));
		Label label4 = new Label("差(年、月、周、天)");
		TextArea difference = new TextArea("");
		difference.setEditable(false);
		difference.setMaxSize(425, 10);
		Label label5 = new Label("差(天)");
		TextArea differeTextArea = new TextArea("");
		differeTextArea.setEditable(false);
		differeTextArea.setMaxSize(425, 10);
		Button calButton = new Button("計算");
		//有一些東西是重複的這裏就不介紹了。

整體的佈局就已經介紹完，還有事件驅動本文章這裏就先不介紹。