JavaFX 图形界面设计

电玩女神 2023-10-05 21:11 76阅读 0赞

### **JavaFx 组件分类** ###

构成图片用户界面的各个元素称为节点（node）  
构成图形用户界面的类主要分为三类：面板类（pane class）、控件类（control class）和辅助类（helper class）。

1.面板是一种类型，用来包含各种控件和形状的类  
2.控制类对象与与面板不同，里面不能包含其他控制件。控制件主要负责用户之间的交互。  
3.辅助类则是用来描述属性的，例如，颜色类、字体类、图像类等等

**JavaFx的基本概念**  
舞台Stage：是用于显示场景的窗口，它是JavaFX程序用户界面的顶层容器。  
场景Scene：是摆放在舞台中的对象，也是一个容器，其中可放置面板和节点等对象。  
节点Node：是可视化的组件，可以是面板、控件、图像视图、形状等。  
面板Pane：面板中可以摆放各种节点。JavaFX提供了多种面板供用户在窗口中组织  
节点。  
控件Control：包括标签、按钮、复选框、单选按钮、文本框、文本区等。  
形状Shape：是指文本、直线、圆、椭圆、矩形、弧、多边形、折线等。

**JavaFx 窗口结构**  
任何JavaFx程序至少有一个舞台和一个场景。  
一个程序中只能有一个主舞台。  
![在这里插入图片描述][20210306143036182.png]  
Scence中可以包含Pane或者Control，但不能包含Shape和ImageView  
Pane可以包含任何子节点

### **JavaFx 的布局面板** ###

构建窗口时，虽然可以直接将节点置于场景中，但更好的办法是将节点放入面板中，然后再将面板放入场景中。

**Pane**  
Pane定义了一个getChildren()，该方法是返回面板的用于存放节点的列表，实际上是添加到ObservabList上。  
一个节点只能添加到一个Pane中

**JavaFX CSS**  
`pane.setStyle(-fx-border-color: red, -fx-background:lightgray);`

**StackPane**  
其布局是将所有节点都摆放在面板中央，后加入的节点添加到前一个节点之上，多个节点以叠加的形式加入到栈面板中。  
这个布局方便在与形状和图像上显示文字

**FlowPane**  
其布局就是将节点按水平或者垂直方式摆列

**BorderPane**  
边界面 板是由类javafx.scene.layout.BorderPane 实现的，边界面板将显示区域分为上(top)、下(bottom)、左（left)、右（right)、中（(center)五个区域，每个区域可以放置一个控件.  
边界面板适合于设计成“顶部有一工具条，底部有状态栏，左部有导航菜单，右部显示其他信息，中部是工作区域”这种应用界面。

**GirdPane**  
类似于表格，由行和列组成的单元格用来放置节点。

**HBox和Vbox**  
单行面板和单列面板

### **JavaFX 的辅助类** ###

辅助类不都是Node的子类

**Image ImageView**  
（2)一个Image对象可以被多个ImageView 对象所共享，但ImageView对象是不可以共享的，即不能将一个ImageView多次放入到一个面板或者场景中。  
（3）由于ImageView类也是Node类的子类，因此也可以对它进行变换、缩放和模糊等  
特效操作。在应用这些特效时，并不是在原来图像的像素上操作，而是复制一份到  
Image View对象，因此可能有多个ImageView对象都指向同一个Image对象。

### **JavaFX 属性绑定和绑定属性** ###

属性绑定是IavaFX引人的新概念，可以将一个目标对象与一个源对象绑定，如果源  
对象中的值改变了，目标对象的值也将自动改变。  
`target.bind( source)//源对象 source相当于自变量，目标对象 target 相当于因变量`  
其中，目标对象target是javafx.beans.property.Property 接口的一个对象。源对象source是javafx.beans.value.ObservableValue 接口的一个对象。  
基本类型double的绑定类型上DoubleProperty。

通过上面的讨论可知，绑定属性和属性绑定是两个不同的概念。(绑定属性是指在类中声明为一种特殊数据类型的成员变量：而属性绑定则是指在两不绑定属性之间建立起一种绑定关系，这样当源对象的绑定属性值发生变化时，目标对象的绑定属性值就会随之变化。

c.centerXProperty().bind(pane.widthProperty().divide(2));
    c.centerYProperty().bind(pane.heightProperty().divide(2));

对于数值类型的绑定属性(如DoubleProperty)都具有`add()、substract()、multiply()、divide()`方法）用于对一个绑定属性中的值进行加、减、乘、除运算，并返回一个新的源属性。因此，pane.widthProperty().divide(2)返回一个代表面板 pane的一半宽度的新源属性，所以目  
标属性圆c的centerX坐标会随着面板pane宽度的改变而改变。

利用`bind()`方法进行属性绑定时，只是目标对象随着源对象的变化而变化，这种  
绑定称为单向绑定。有时候需要同步两个属性，即目标和源双方都既是绑定对象也是可观察对象，这时可使用`bindBidirectional()`方法进行属性的双向绑定。属性双向绑定后，两者中不管哪一个发生变化，另一方也会被相应地更新。

### JavaFX 常用组件 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01hb3hpbQ_size_16_color_FFFFFF_t_70]  
**Label**  
用来显示文字、图片的控件，标签上的内容只能显示不可编辑

**TextField PasswordField TextArea Scrollpane**  
功能包括修改、删除、复制、粘贴等。  
文本编辑控件分为三种：  
第一种是单行文本编辑控件，简称文本框，也称文本行，是通过TextField类实现的；  
第二种是密码文本框控件，是通过PasswordField类实现的：  
第三种是多行文本编辑控件，简称文本区，是通过TextArea 类实现的。  
单行文本框控件中只有一行文本，即使文本内容超出了文本框的宽度也不会换行；密码文本框控件具有文本框的所有功能，但与文本框不同的是，当在其中输入字符时，所输入的字符被显示成\*号，这样可以避免将输入的实际内容显示在屏幕上；而文本区可以实现多行文本的输人，且可以设置是否自动换行。  
TextField类和TextArea类是javafx.scene.control.TextlnputControl类的子类，而PasswordField类是TextField 的子类。类TextField、PasswordField 和TextArea 所使用的方法大多继承自其父类，表14.33列出了其父类javafx.scene.control.TextlnputControl的常用方法。

**CheckBox RadioButton**  
复选框和单选按钮

**TabPane Tab**  
选项卡面板和选项卡

### 课设代码 ###

[https://blog.csdn.net/Maoxim/article/details/114953994?spm=1001.2014.3001.5501][https_blog.csdn.net_Maoxim_article_details_114953994_spm_1001.2014.3001.5501]

[20210306143036182.png]: https://img-blog.csdnimg.cn/20210306143036182.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01hb3hpbQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210306154331466.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01hb3hpbQ==,size_16,color_FFFFFF,t_70
[https_blog.csdn.net_Maoxim_article_details_114953994_spm_1001.2014.3001.5501]: https://blog.csdn.net/Maoxim/article/details/114953994?spm=1001.2014.3001.5501