使用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("计算");
//有一些东西是重复的这里就不介绍了。