javafx

JavaFX 组件详解

1. 属性绑定

意义作用：自动同步两个属性的值（一个属性变化时，另一个自动更新）
头文件：import javafx.beans.binding.*;
创建要求：两个属性需实现Property接口（如SimpleIntegerProperty）
运用方法：bind()方法单向绑定，Bindings工具类创建复杂绑定

java
import javafx.application.Application;
import javafx.beans.property.SimpleIntegerProperty;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class BindingDemo extends Application {
@Override
public void start(Stage stage) {
// 创建两个可绑定属性
SimpleIntegerProperty num1 = new SimpleIntegerProperty(10);
SimpleIntegerProperty num2 = new SimpleIntegerProperty(20);

    // 创建标签显示值
    Label label1 = new Label();
    Label label2 = new Label();
    
    // 绑定标签文本到属性值（自动更新）
    label1.textProperty().bind(num1.asString("num1: %d"));
    label2.textProperty().bind(Bindings.add(num1, num2).asString("Sum: %d"));
    
    // 修改原始值（将自动更新标签）
    num1.set(30);
    
    VBox root = new VBox(10, label1, label2);
    Scene scene = new Scene(root, 300, 200);
    stage.setScene(scene);
    stage.show();
}

public static void main(String[] args) {
    launch(args);
}

}

2. 网格布局

意义作用：网格布局，按行/列排列组件
头文件：import javafx.scene.layout.GridPane;
创建要求：无特殊要求
运用方法：add(component, column, row)添加组件

java
`import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.GridPane;
import javafx.stage.Stage;

public class GridPaneDemo extends Application {
@Override
public void start(Stage stage) {
GridPane grid = new GridPane();
grid.setHgap(10); // 水平间距
grid.setVgap(10); // 垂直间距

    // 创建按钮并添加到网格
    Button btn1 = new Button("(0,0)");
    Button btn2 = new Button("(1,0)");
    Button btn3 = new Button("(0,1)");
    Button btn4 = new Button("(1,1)");
    
    // 添加组件：组件, 列索引, 行索引
    grid.add(btn1, 0, 0);
    grid.add(btn2, 1, 0);
    grid.add(btn3, 0, 1);
    grid.add(btn4, 1, 1);
    
    Scene scene = new Scene(grid, 300, 200);
    stage.setScene(scene);
    stage.show();
}

3. 文本字体与颜色

意义作用：

Color：定义颜色（RGB/HSB）

Font：设置文本字体样式
头文件：

java
import javafx.scene.paint.Color;
import javafx.scene.text.Font;
基础代码：

java
`import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.VBox;
import javafx.scene.paint.Color;
import javafx.scene.text.Font;
import javafx.scene.text.Text;
import javafx.stage.Stage;

public class ColorFontDemo extends Application {
@Override
public void start(Stage stage) {
Text text = new Text("Hello JavaFX!");

    // 设置颜色（RGB值）
    text.setFill(Color.rgb(255, 0, 0)); // 红色
    
    // 设置字体（名称、大小）
    text.setFont(Font.font("Arial", 30));
    
    VBox root = new VBox(text);
    Scene scene = new Scene(root, 300, 200);
    stage.setScene(scene);
    stage.show();
}

4. 区域划分

意义作用：分五个区域布局（上/下/左/右/中）
头文件：import javafx.scene.layout.BorderPane;
运用方法：

java
BorderPane root = new BorderPane();
root.setTop(topNode); // 顶部组件
root.setCenter(centerNode); // 中央组件
完整代码：

java
`import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.BorderPane;
import javafx.stage.Stage;

public class BorderPaneDemo extends Application {
@Override
public void start(Stage stage) {
BorderPane root = new BorderPane();

    // 创建五个区域的按钮
    Button top = new Button("Top");
    Button left = new Button("Left");
    Button center = new Button("Center");
    Button right = new Button("Right");
    Button bottom = new Button("Bottom");
    
    // 将按钮放入对应区域
    root.setTop(top);
    root.setLeft(left);
    root.setCenter(center);
    root.setRight(right);
    root.setBottom(bottom);
    
    Scene scene = new Scene(root, 400, 300);
    stage.setScene(scene);
    stage.show();
}

5.水平与垂直组件

意义作用：

HBox：水平排列组件

VBox：垂直排列组件
头文件：

java
import javafx.scene.layout.HBox;
import javafx.scene.layout.VBox;
代码演示：

java
`import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.HBox;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class BoxDemo extends Application {
@Override
public void start(Stage stage) {
// HBox：水平排列
HBox hbox = new HBox(10); // 间距10像素
hbox.getChildren().addAll(
new Button("Button1"),
new Button("Button2")
);

    // VBox：垂直排列
    VBox vbox = new VBox(10);
    vbox.getChildren().addAll(
        new Button("Button3"),
        new Button("Button4")
    );
    
    // 将HBox和VBox放入另一个VBox
    VBox root = new VBox(20, hbox, vbox);
    Scene scene = new Scene(root, 300, 200);
    stage.setScene(scene);
    stage.show();
}

6. 加载和显示图片

意义作用：

Image：加载图像文件

ImageView：显示图像
头文件：

java
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
基础代码：

java
`import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;

import java.io.FileInputStream;

public class ImageDemo extends Application {
@Override
public void start(Stage stage) throws Exception {
// 从文件加载图像（替换为实际路径）
Image image = new Image(new FileInputStream("path/to/image.jpg"));

    // 创建图像视图
    ImageView imageView = new ImageView(image);
    imageView.setFitWidth(300); // 设置显示宽度
    imageView.setPreserveRatio(true); // 保持宽高比
    
    StackPane root = new StackPane(imageView);
    Scene scene = new Scene(root, 400, 300);
    stage.setScene(scene);
    stage.show();
}

7. 画直线

意义作用：

Text：显示文本

Line：绘制直线
头文件：

java
import javafx.scene.text.Text;
import javafx.scene.shape.Line;
代码演示：

java
`import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.Pane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Line;
import javafx.scene.text.Text;
import javafx.stage.Stage;

public class TextLineDemo extends Application {
@Override
public void start(Stage stage) {
Pane root = new Pane();

    // 创建文本（位置X/Y）
    Text text = new Text(50, 50, "Hello JavaFX!");
    text.setFill(Color.BLUE);
    
    // 创建直线（起点X/Y, 终点X/Y）
    Line line = new Line(20, 100, 280, 100);
    line.setStroke(Color.RED);
    line.setStrokeWidth(2);
    
    root.getChildren().addAll(text, line);
    Scene scene = new Scene(root, 300, 200);
    stage.setScene(scene);
    stage.show();
}

8.画矩形

意义作用：绘制矩形
头文件：import javafx.scene.shape.Rectangle;
基础代码：

public class RectangleDemo extends Application {
@Override
public void start(Stage stage) {
Rectangle rect = new Rectangle(50, 50, 200, 100); // (x, y, width, height)
rect.setFill(Color.LIGHTGREEN); // 填充色
rect.setStroke(Color.DARKGREEN); // 边框色
rect.setStrokeWidth(3); // 边框粗细

    Pane root = new Pane(rect);
    Scene scene = new Scene(root, 300, 200);
    stage.setScene(scene);
    stage.show();
}

9. 画圆形和椭圆

意义作用：

Circle：绘制圆形

Ellipse：绘制椭圆
头文件：

java
import javafx.scene.shape.Circle;
import javafx.scene.shape.Ellipse;
代码演示：

java
`import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.Pane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.scene.shape.Ellipse;
import javafx.stage.Stage;

public class CircleEllipseDemo extends Application {
@Override
public void start(Stage stage) {
// 圆形：圆心X/Y, 半径
Circle circle = new Circle(100, 80, 50);
circle.setFill(Color.RED);

    // 椭圆：圆心X/Y, 水平半径, 垂直半径
    Ellipse ellipse = new Ellipse(200, 80, 70, 40);
    ellipse.setFill(Color.BLUE);
    
    Pane root = new Pane(circle, ellipse);
    Scene scene = new Scene(root, 300, 200);
    stage.setScene(scene);
    stage.show();
}

10. 画圆弧，扇形

意义作用：绘制圆弧
头文件：import javafx.scene.shape.Arc;
关键参数：中心点、半径、起始角度、圆弧角度

java
`import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.Pane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Arc;
import javafx.scene.shape.ArcType;
import javafx.stage.Stage;

public class ArcDemo extends Application {
@Override
public void start(Stage stage) {
// 创建圆弧：中心X/Y, 水平半径, 垂直半径, 起始角度, 圆弧角度
Arc arc = new Arc(150, 100, 80, 60, 45, 90);
arc.setType(ArcType.ROUND); // 类型（OPEN/CHORD/ROUND）
arc.setFill(Color.YELLOW);
arc.setStroke(Color.BLACK);

    Pane root = new Pane(arc);
    Scene scene = new Scene(root, 300, 200);
    stage.setScene(scene);
    stage.show();
}

11. 绘制多边形和线段

意义作用：

Polygon：绘制封闭多边形

Polyline：绘制不封闭多段线
头文件：

java
import javafx.scene.shape.Polygon;
import javafx.scene.shape.Polyline;
代码演示：

java
`import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.Pane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Polygon;
import javafx.scene.shape.Polyline;
import javafx.stage.Stage;

public class PolygonDemo extends Application {
@Override
public void start(Stage stage) {
// 多边形（自动闭合）
Polygon triangle = new Polygon(
100, 20, // 点1 (x,y)
50, 80, // 点2
150, 80 // 点3
);
triangle.setFill(Color.LIGHTBLUE);

    // 多段线（不闭合）
    Polyline polyline = new Polyline(
        200, 20,
        180, 80,
        220, 80
    );
    polyline.setStroke(Color.RED);
    polyline.setStrokeWidth(2);
    
    Pane root = new Pane(triangle, polyline);
    Scene scene = new Scene(root, 300, 200);
    stage.setScene(scene);
    stage.show();
}

12. 沿路径移动的动画

意义作用：让节点沿路径移动的动画
头文件：import javafx.animation.PathTransition;
基础代码：

java
`import javafx.animation.PathTransition;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.Pane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.scene.shape.Rectangle;
import javafx.util.Duration;
import javafx.stage.Stage;

public class PathTransitionDemo extends Application {
@Override
public void start(Stage stage) {
// 创建移动目标（矩形）
Rectangle rect = new Rectangle(20, 20, 40, 40);
rect.setFill(Color.RED);

    // 创建路径（圆形路径）
    Circle path = new Circle(150, 100, 80);
    path.setFill(null);
    path.setStroke(Color.GRAY);
    
    // 创建路径动画
    PathTransition pt = new PathTransition();
    pt.setNode(rect);      // 要移动的节点
    pt.setPath(path);      // 移动路径
    pt.setDuration(Duration.seconds(3)); // 动画时长
    pt.setCycleCount(2);   // 循环次数（2次）
    pt.setAutoReverse(true); // 自动反向
    
    Pane root = new Pane(rect, path);
    Scene scene = new Scene(root, 300, 200);
    stage.setScene(scene);
    stage.show();
    
    pt.play(); // 播放动画
}

13. 淡入淡出动画

意义作用：淡入淡出动画效果
头文件：import javafx.animation.FadeTransition;
代码演示：

java
`import javafx.animation.FadeTransition;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.StackPane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import javafx.util.Duration;
import javafx.stage.Stage;

public class FadeDemo extends Application {
@Override
public void start(Stage stage) {
Rectangle rect = new Rectangle(200, 100, Color.BLUE);

    // 创建淡入淡出动画
    FadeTransition ft = new FadeTransition();
    ft.setNode(rect);            // 作用节点
    ft.setDuration(Duration.seconds(2)); // 动画时长
    ft.setFromValue(1.0);        // 起始透明度（1.0=不透明）
    ft.setToValue(0.2);          // 结束透明度
    ft.setCycleCount(4);         // 循环次数（4次）
    ft.setAutoReverse(true);     // 自动反向
    
    StackPane root = new StackPane(rect);
    Scene scene = new Scene(root, 300, 200);
    stage.setScene(scene);
    stage.show();
    
    ft.play(); // 播放动画
}

14.移动动画控制

意义作用：基于关键帧的动画控制
头文件：

java
import javafx.animation.KeyFrame;
import javafx.animation.Timeline;
import javafx.util.Duration;
代码演示（移动矩形）：

java
`import javafx.animation.KeyFrame;
import javafx.animation.Timeline;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.Pane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import javafx.util.Duration;
import javafx.stage.Stage;

public class TimelineDemo extends Application {
@Override
public void start(Stage stage) {
Rectangle rect = new Rectangle(50, 50, 60, 40);
rect.setFill(Color.GREEN);

    // 创建时间轴动画
    Timeline timeline = new Timeline(
        new KeyFrame(Duration.ZERO, e -> rect.setX(0)), // 初始位置
        new KeyFrame(Duration.seconds(2), e -> rect.setX(200)) // 2秒后位置
    );
    timeline.setAutoReverse(true);
    timeline.setCycleCount(Timeline.INDEFINITE); // 无限循环
    
    Pane root = new Pane(rect);
    Scene scene = new Scene(root, 300, 150);
    stage.setScene(scene);
    stage.show();
    
    timeline.play();
}

15. 文本标签样式

意义作用：

Labeled：可带文本的组件基类

Label：简单文本标签
头文件：import javafx.scene.control.Label;
基础代码：

java
`import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;

public class LabelDemo extends Application {
@Override
public void start(Stage stage) {
// 创建带样式的标签
Label label = new Label("Hello JavaFX!");
label.setStyle("-fx-font-size: 24; -fx-text-fill: red;");

    StackPane root = new StackPane(label);
    Scene scene = new Scene(root, 300, 200);
    stage.setScene(scene);
    stage.show();
}

16. checkbox复选框

意义作用：复选框（多选）
头文件：import javafx.scene.control.CheckBox;
事件处理：setOnAction()监听状态变化

java
`import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.CheckBox;
import javafx.scene.control.Label;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class CheckBoxDemo extends Application {
@Override
public void start(Stage stage) {
CheckBox checkBox = new CheckBox("同意协议");
Label label = new Label("状态：未选中");

    // 监听选择状态变化
    checkBox.setOnAction(e -> 
        label.setText("状态：" + (checkBox.isSelected() ? "选中" : "未选中"))
    );
    
    VBox root = new VBox(20, checkBox, label);
    Scene scene = new Scene(root, 300, 200);
    stage.setScene(scene);
    stage.show();
}

17. 下拉选择框

意义作用：下拉选择框
头文件：import javafx.scene.control.ComboBox;
基础用法：

java
`import javafx.application.Application;
import javafx.collections.FXCollections;
import javafx.scene.Scene;
import javafx.scene.control.ComboBox;
import javafx.scene.control.Label;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class ComboBoxDemo extends Application {
@Override
public void start(Stage stage) {
// 创建下拉框并添加选项
ComboBox comboBox = new ComboBox<>();
comboBox.getItems().addAll("Java", "Python", "C++", "JavaScript");
comboBox.setValue("Java"); // 默认选中项

    Label label = new Label("当前选择：Java");
    
    // 监听选择变化
    comboBox.setOnAction(e -> 
        label.setText("当前选择：" + comboBox.getValue())
    );
    
    VBox root = new VBox(20, comboBox, label);
    Scene scene = new Scene(root, 300, 200);
    stage.setScene(scene);
    stage.show();
}

18. 单选按钮

意义作用：单选按钮（需配合ToggleGroup）
头文件：

java
import javafx.scene.control.RadioButton;
import javafx.scene.control.ToggleGroup;
代码演示：

java
`import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.control.RadioButton;
import javafx.scene.control.ToggleGroup;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class RadioButtonDemo extends Application {
@Override
public void start(Stage stage) {
ToggleGroup group = new ToggleGroup(); // 单选组

    RadioButton rb1 = new RadioButton("选项1");
    rb1.setToggleGroup(group);
    rb1.setSelected(true); // 默认选中
    
    RadioButton rb2 = new RadioButton("选项2");
    rb2.setToggleGroup(group);
    
    Label label = new Label("当前选择：选项1");
    
    // 监听选择变化
    group.selectedToggleProperty().addListener((obs, oldVal, newVal) -> {
        if (newVal != null) {
            label.setText("当前选择：" + ((RadioButton)newVal).getText());
        }
    });
    
    VBox root = new VBox(10, rb1, rb2, label);
    Scene scene = new Scene(root, 300, 200);
    stage.setScene(scene);
    stage.show();
}

19. 单/多行输入

意义作用：

TextField：单行文本输入

TextArea：多行文本输入
头文件：

java
import javafx.scene.control.TextField;
import javafx.scene.control.TextArea;
代码演示：

java
`import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.TextArea;
import javafx.scene.control.TextField;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class TextInputDemo extends Application {
@Override
public void start(Stage stage) {
TextField textField = new TextField();
textField.setPromptText("输入单行文本");

    TextArea textArea = new TextArea();
    textArea.setPromptText("输入多行文本");
    
    Button button = new Button("显示内容");
    button.setOnAction(e -> 
        System.out.println("Field: " + textField.getText() + "\nArea: " + textArea.getText())
    );
    
    VBox root = new VBox(10, textField, textArea, button);
    Scene scene = new Scene(root, 300, 250);
    stage.setScene(scene);
    stage.show();
}

20. 键盘事件

意义作用：响应键盘操作（按键按下/释放）
头文件：import javafx.scene.input.KeyEvent;
监听方法：setOnKeyPressed() / setOnKeyReleased()

java
`import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.input.KeyEvent;
import javafx.scene.layout.StackPane;
import javafx.scene.text.Text;
import javafx.stage.Stage;

public class KeyEventDemo extends Application {
@Override
public void start(Stage stage) {
Text text = new Text("按任意键");

    StackPane root = new StackPane(text);
    Scene scene = new Scene(root, 300, 200);
    
    // 监听键盘按下事件
    scene.setOnKeyPressed(e -> 
        text.setText("按下: " + e.getCode())
    );
    
    // 监听键盘释放事件
    scene.setOnKeyReleased(e -> 
        text.setText("释放: " + e.getCode())
    );
    
    stage.setScene(scene);
    stage.show();
}

21. 滑动课选择列表

意义作用：显示可滚动列表
头文件：import javafx.scene.control.ListView;
基础用法：

java
`import javafx.application.Application;
import javafx.collections.FXCollections;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.control.ListView;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class ListViewDemo extends Application {
@Override
public void start(Stage stage) {
ListView listView = new ListView<>();
listView.getItems().addAll("苹果", "香蕉", "橘子", "西瓜");

    Label label = new Label("未选中");
    
    // 监听选中项变化
    listView.getSelectionModel().selectedItemProperty().addListener(
        (obs, oldVal, newVal) -> label.setText("选中: " + newVal)
    );
    
    VBox root = new VBox(10, listView, label);
    Scene scene = new Scene(root, 200, 250);
    stage.setScene(scene);
    stage.show();
}

22.滑动条

意义作用：滚动条控件
头文件：import javafx.scene.control.ScrollBar;
代码演示：

java
`import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.control.ScrollBar;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class ScrollBarDemo extends Application {
@Override
public void start(Stage stage) {
ScrollBar scrollBar = new ScrollBar();
scrollBar.setMin(0);
scrollBar.setMax(100);
scrollBar.setValue(50); // 初始值

    Label label = new Label("当前值: 50");
    
    // 绑定标签文本到滚动条值
    label.textProperty().bind(scrollBar.valueProperty().asString("当前值: %.1f"));
    
    VBox root = new VBox(20, scrollBar, label);
    Scene scene = new Scene(root, 300, 200);
    stage.setScene(scene);
    stage.show();
}

23.滑动条常用版（选择刻度显示）

意义作用：滑块控件（比ScrollBar更常用）
头文件：import javafx.scene.control.Slider;
基础代码：

java
`import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.control.Slider;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class SliderDemo extends Application {
@Override
public void start(Stage stage) {
Slider slider = new Slider(0, 100, 50); // 最小值, 最大值, 初始值
slider.setShowTickMarks(true); // 显示刻度
slider.setShowTickLabels(true);
slider.setMajorTickUnit(25); // 主刻度间隔

    Label label = new Label("当前值: 50");
    
    // 绑定标签文本到滑块值
    label.textProperty().bind(slider.valueProperty().asString("当前值: %.0f"));
    
    VBox root = new VBox(20, slider, label);
    Scene scene = new Scene(root, 300, 200);
    stage.setScene(scene);
    stage.show();
}

}
`

posted @ 2025-06-18 19:43 吴与思了~ 阅读(20) 评论(0) 收藏举报

刷新页面返回顶部

wuyu888

javafx

1. 属性绑定

2. 网格布局

3. 文本字体与颜色

4. 区域划分

5.水平与垂直组件

6. 加载和显示图片

7. 画直线

8.画矩形

9. 画圆形和椭圆

10. 画圆弧，扇形

11. 绘制多边形和线段

12. 沿路径移动的动画

13. 淡入淡出动画

14.移动动画控制

15. 文本标签样式

16. checkbox复选框

17. 下拉选择框

18. 单选按钮

19. 单/多行输入

20. 键盘事件

21. 滑动课选择列表

22.滑动条

23.滑动条常用版（选择刻度显示）

公告