61、JavaFX GUI开发：单选按钮、复选框与图像显示

最新推荐文章于 2025-11-24 09:19:02 发布

dapp9builder

最新推荐文章于 2025-11-24 09:19:02 发布

阅读量80

点赞数

CC 4.0 BY-SA版权

分类专栏： Java编程入门：从控制结构到面向对象文章标签： JavaFX 单选按钮复选框

本文链接：https://blog.youkuaiyun.com/dapp9builder/article/details/150522335

Java编程入门：从控制结构到面向对象专栏收录该内容

69 篇文章 ¥499.90

订阅专栏¥69.90

会员秒杀 ¥9.9 重磅福利

超级会员免费看

JavaFX GUI开发：单选按钮、复选框与图像显示

1. 单选按钮（RadioButtons）和复选框（CheckBoxes）概述

在JavaFX应用程序中，单选按钮和复选框是常用的用户交互组件。单选按钮通常以两个或更多为一组，允许用户从多个选项中选择一个；而复选框可以单独出现或成组显示，允许用户进行“是/否”或“开/关”的选择。

2. 单选按钮（RadioButtons）

创建与文本设置 ：
- 从库面板（Library panel）的控件部分（Controls section）拖动单选按钮到内容面板（Content panel）即可创建。
- 更改单选按钮的文本属性有两种方式：
  - 选择组件，然后在检查器面板（Inspector panel）的属性部分（Properties section）更改文本属性。
  - 在内容面板中双击单选按钮，编辑其显示的文本。
切换组（Toggle Group） ：
- 单选按钮通常位于切换组中，同一切换组中任何时候只能选择一个单选按钮。当点击一个单选按钮时，它会被选中，同时同一切换组中其他已选中的单选按钮会自动取消选中。
- 添加单选按钮到切换组的步骤如下：
  1. 在内容面板中创建第一个单选按钮组件。
  2. 打开检查器面板的属性部分，找到“Toggle Group”属性，输入要给切换组起的名称。
  3. 创建下一个单选按钮，对于其“Toggle Group”属性，点击向下箭头并选择为第一个单选按钮创建的切换组。对要添加到同一切换组的每个后续单选按钮重复此操作。
代码中判断单选按钮是否选中 ：在控制器类中，可以使用单选按钮的 isSelected 方法来确定单选按钮是否被选中。该方法返回一个布尔值，如果单选按钮被选中，方法返回 true ，否则返回 false 。示例代码如下：

if (radio.isSelected()) {
    // 单选按钮被选中时执行的代码
}

单选按钮事件响应 ：在许多情况下，当用户点击单选按钮时需要执行某个操作。此时，需要在控制器类中为每个单选按钮编写事件监听器方法，然后在Scene Builder中选择相应的方法作为事件监听器。以下是一个示例应用 RadioButtonEvent 的代码：

// RadioButtonEvent.java
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class RadioButtonEvent extends Application {
    public void start(Stage stage) throws Exception {
        // 加载FXML文件
        Parent parent = FXMLLoader.load(getClass().getResource("RadioButtonEvent.fxml"));
        // 构建场景图
        Scene scene = new Scene(parent);
        // 显示窗口
        stage.setTitle("RadioButtons");
        stage.setScene(scene);
        stage.show();
    }

    public static void main(String[] args) {
        // 启动应用程序
        launch(args);
    }
}

// RadioButtonEventController.java
import javafx.fxml.FXML;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.control.RadioButton;
import javafx.scene.control.ToggleGroup;

public class RadioButtonEventController {
    @FXML
    private RadioButton carnivoreRadioButton;
    @FXML
    private ToggleGroup myToggleGroup;
    @FXML
    private Label outputLabel;
    @FXML
    private Button showChoiceButton;
    @FXML
    private RadioButton veganRadioButton;
    @FXML
    private RadioButton vegetarianRadioButton;

    // 素食主义者单选按钮的事件监听器
    public void veganListener() {
        if (veganRadioButton.isSelected()) {
            outputLabel.setText("Vegan");
        }
    }

    // 素食者单选按钮的事件监听器
    public void vegetarianListener() {
        if (vegetarianRadioButton.isSelected()) {
            outputLabel.setText("Vegetarian");
        }
    }

    // 肉食者单选按钮的事件监听器
    public void carnivoreListener() {
        if (carnivoreRadioButton.isSelected()) {
            outputLabel.setText("Carnivore");
        }
    }
}

3. 复选框（CheckBoxes）

创建与文本设置 ：
- 从库面板的控件部分拖动复选框到内容面板即可创建。
- 更改复选框的文本属性的方法与单选按钮相同：
  - 选择组件，然后在检查器面板的属性部分更改文本属性。
  - 在内容面板中双击复选框，编辑其显示的文本。
代码中判断复选框是否选中 ：在控制器类中，可以使用复选框的 isSelected 方法来确定复选框是否被选中。示例代码如下：

if (checkbox.isSelected()) {
    // 复选框被选中时执行的代码
}

复选框事件响应 ：当用户点击复选框时需要执行某个操作，需要在控制器类中为复选框编写事件监听器方法，然后在Scene Builder中选择该方法作为事件监听器。以下是一个示例应用 CheckBoxEvent 的代码：

// CheckBoxEvent.java
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class CheckBoxEvent extends Application {
    public void start(Stage stage) throws Exception {
        // 加载FXML文件
        Parent parent = FXMLLoader.load(getClass().getResource("CheckBoxEvent.fxml"));
        // 构建场景图
        Scene scene = new Scene(parent);
        // 显示窗口
        stage.setTitle("CheckBoxes");
        stage.setScene(scene);
        stage.show();
    }

    public static void main(String[] args) {
        // 启动应用程序
        launch(args);
    }
}

// CheckBoxEventController.java
import javafx.fxml.FXML;
import javafx.scene.control.Label;
import javafx.scene.control.CheckBox;

public class CheckBoxEventController {
    @FXML
    private CheckBox myCheckBox;
    @FXML
    private Label outputLabel;

    // 复选框的事件监听器
    public void myCheckBoxListener() {
        if (myCheckBox.isSelected()) {
            outputLabel.setText("The CheckBox is selected.");
        } else {
            outputLabel.setText("The CheckBox is not selected.");
        }
    }
}

4. 单选按钮和复选框的选择决策

需求	组件选择
用户只能从一组项目中选择一个	单选按钮（RadioButtons）
用户可以从一组项目中选择任意数量的项目	复选框（CheckBoxes）

5. 图像显示（Displaying Images）

在JavaFX应用程序中，可以使用 ImageView 组件来显示图像。
- 创建与图像设置 ：
- 从库面板的控件部分拖动 ImageView 组件到内容面板，创建一个空的 ImageView 组件。
- 创建 ImageView 控件后，使用其 Image 属性指定要显示的图像。在检查器面板的属性部分找到 Image 属性，点击省略号按钮（ ... ）浏览文件系统以选择要显示的图像文件。
- 代码中显示图像 ：有时在应用程序运行时需要编写代码来更改 ImageView 组件显示的图像。在控制器类中，可以调用 ImageView 组件的 setImage 方法来实现。示例代码如下：

import javafx.scene.image.Image;
import javafx.scene.image.ImageView;

// 创建Image对象
Image myImage = new Image("Dog.jpg");
// 假设myImageView引用一个ImageView组件
myImageView.setImage(myImage);

以下是一个示例应用 ImageViewDemo 的代码：

// ImageViewDemo.java
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class ImageViewDemo extends Application {
    public void start(Stage stage) throws Exception {
        // 加载FXML文件
        Parent parent = FXMLLoader.load(getClass().getResource("ImageViewDemo.fxml"));
        // 构建场景图
        Scene scene = new Scene(parent);
        // 显示窗口
        stage.setTitle("ImageViewDemo");
        stage.setScene(scene);
        stage.show();
    }

    public static void main(String[] args) {
        // 启动应用程序
        launch(args);
    }
}

// ImageViewDemoController.java
import javafx.fxml.FXML;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.control.RadioButton;
import javafx.scene.control.ToggleGroup;

public class ImageViewDemoController {
    @FXML
    private ImageView myImage;
    @FXML
    private ToggleGroup myToggleGroup;
    @FXML
    private RadioButton dogRadioButton;
    @FXML
    private RadioButton catRadioButton;
    private Image dogImage;
    private Image catImage;

    // 初始化方法
    public void initialize() {
        // 加载狗和猫的图像
        dogImage = new Image("Dog.jpg");
        catImage = new Image("Cat.jpg");
    }

    // 狗单选按钮的事件监听器
    public void dogRadioButtonListener() {
        if (dogRadioButton.isSelected()) {
            myImage.setImage(dogImage);
        }
    }

    // 猫单选按钮的事件监听器
    public void catRadioButtonListener() {
        if (catRadioButton.isSelected()) {
            myImage.setImage(catImage);
        }
    }
}

6. 总结

通过上述内容，我们了解了JavaFX中单选按钮、复选框和图像显示的基本使用方法。单选按钮适用于用户只能选择一个选项的场景，而复选框适用于用户可以选择多个选项的场景。 ImageView 组件则为应用程序提供了图像显示的功能。在实际开发中，可以根据具体需求灵活运用这些组件，为用户提供更好的交互体验。

graph LR
    A[创建单选按钮或复选框] --> B[设置文本属性]
    B --> C{是否需要分组}
    C -- 单选按钮 --> D[创建切换组]
    C -- 复选框 --> E[无需切换组]
    D --> F[添加到切换组]
    F --> G[判断是否选中]
    E --> G
    G --> H[编写事件监听器]
    I[创建ImageView组件] --> J[设置图像属性]
    J --> K[代码中更改图像]

这个流程图展示了创建单选按钮、复选框和 ImageView 组件的基本流程，包括属性设置、分组、判断选中状态、编写事件监听器以及图像显示和更改等步骤。

JavaFX GUI开发：单选按钮、复选框与图像显示

7. 深入理解单选按钮和复选框的事件处理

在前面的内容中，我们已经介绍了如何为单选按钮和复选框编写事件监听器。下面我们进一步探讨事件处理的细节。

当为单选按钮或复选框编写事件监听器时，需要注意以下几点：
- 方法签名 ：事件监听器方法通常是无参数的公共方法。例如，在 RadioButtonEventController 和 CheckBoxEventController 中，事件监听器方法（如 veganListener 、 myCheckBoxListener ）都是无参数的公共方法。
- 状态判断 ：在事件监听器方法中，通常需要使用 isSelected 方法来判断组件的当前状态。例如，在 veganListener 方法中，通过 if (veganRadioButton.isSelected()) 来判断 veganRadioButton 是否被选中。
- 多组件处理 ：如果有多个单选按钮或复选框需要处理，可以为每个组件编写单独的事件监听器方法，也可以使用更通用的方法来处理。例如，可以使用 ToggleGroup 来处理一组单选按钮的事件。

以下是一个使用 ToggleGroup 处理单选按钮事件的示例：

import javafx.fxml.FXML;
import javafx.scene.control.Label;
import javafx.scene.control.RadioButton;
import javafx.scene.control.Toggle;
import javafx.scene.control.ToggleGroup;

public class RadioButtonGroupController {
    @FXML
    private ToggleGroup myToggleGroup;
    @FXML
    private Label outputLabel;

    public void initialize() {
        myToggleGroup.selectedToggleProperty().addListener((observable, oldValue, newValue) -> {
            if (newValue != null) {
                RadioButton selectedRadioButton = (RadioButton) newValue;
                outputLabel.setText(selectedRadioButton.getText());
            }
        });
    }
}

在这个示例中，我们使用 ToggleGroup 的 selectedToggleProperty 来监听单选按钮的选择变化。当选择发生变化时，会触发监听器，我们可以通过 newValue 获取当前选中的单选按钮，并更新 outputLabel 的文本。

8. 图像显示的高级应用

除了基本的图像显示功能， ImageView 组件还支持一些高级应用，如缩放、旋转和裁剪等。

缩放图像 ：可以使用 ImageView 的 setFitWidth 和 setFitHeight 方法来缩放图像。例如：

import javafx.scene.image.Image;
import javafx.scene.image.ImageView;

Image myImage = new Image("Dog.jpg");
ImageView myImageView = new ImageView(myImage);
myImageView.setFitWidth(200);
myImageView.setFitHeight(200);

在这个示例中，我们将 ImageView 的宽度和高度设置为200像素，从而缩放图像。

旋转图像 ：可以使用 ImageView 的 setRotate 方法来旋转图像。例如：

myImageView.setRotate(45);

这将使图像顺时针旋转45度。

裁剪图像 ：可以使用 ImageView 的 setViewport 方法来裁剪图像。例如：

import javafx.geometry.Rectangle2D;

Rectangle2D viewport = new Rectangle2D(10, 10, 100, 100);
myImageView.setViewport(viewport);

在这个示例中，我们从图像的(10, 10)位置开始，裁剪出一个宽度为100像素、高度为100像素的区域。

9. 综合应用示例

下面我们将结合单选按钮、复选框和图像显示，创建一个综合应用示例。该应用允许用户选择不同的选项，并根据选择显示相应的图像。

// MainApp.java
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class MainApp extends Application {
    public void start(Stage stage) throws Exception {
        Parent parent = FXMLLoader.load(getClass().getResource("MainApp.fxml"));
        Scene scene = new Scene(parent);
        stage.setTitle("综合应用示例");
        stage.setScene(scene);
        stage.show();
    }

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

// MainAppController.java
import javafx.fxml.FXML;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.control.CheckBox;
import javafx.scene.control.RadioButton;
import javafx.scene.control.ToggleGroup;

public class MainAppController {
    @FXML
    private ImageView myImage;
    @FXML
    private ToggleGroup myToggleGroup;
    @FXML
    private CheckBox showBorder;
    @FXML
    private RadioButton dogRadioButton;
    @FXML
    private RadioButton catRadioButton;

    private Image dogImage;
    private Image catImage;

    public void initialize() {
        dogImage = new Image("Dog.jpg");
        catImage = new Image("Cat.jpg");

        myToggleGroup.selectedToggleProperty().addListener((observable, oldValue, newValue) -> {
            if (newValue != null) {
                RadioButton selectedRadioButton = (RadioButton) newValue;
                if (selectedRadioButton == dogRadioButton) {
                    myImage.setImage(dogImage);
                } else if (selectedRadioButton == catRadioButton) {
                    myImage.setImage(catImage);
                }
            }
        });

        showBorder.selectedProperty().addListener((observable, oldValue, newValue) -> {
            if (newValue) {
                myImage.setStyle("-fx-border-color: black; -fx-border-width: 2px;");
            } else {
                myImage.setStyle("");
            }
        });
    }
}

在这个示例中，我们创建了一个包含单选按钮、复选框和 ImageView 组件的应用。用户可以通过单选按钮选择显示狗或猫的图像，通过复选框选择是否显示图像的边框。

10. 性能优化建议

在使用单选按钮、复选框和 ImageView 组件时，为了提高应用程序的性能，可以考虑以下几点建议：
| 优化点 | 建议 |
| ---- | ---- |
| 图像加载 | 尽量使用合适大小的图像，避免加载过大的图像。可以在加载图像时进行缩放处理，减少内存占用。 |
| 事件处理 | 避免在事件监听器方法中执行耗时的操作，以免影响用户体验。如果需要执行耗时操作，可以使用多线程来处理。 |
| 组件使用 | 合理使用组件，避免创建过多不必要的组件。例如，如果不需要动态更改图像，可以在FXML文件中直接设置图像属性。 |

11. 总结与展望

通过本文的介绍，我们详细了解了JavaFX中单选按钮、复选框和图像显示的使用方法，包括组件的创建、属性设置、事件处理以及性能优化等方面。这些组件为JavaFX应用程序的开发提供了丰富的交互和视觉效果。

在未来的开发中，可以进一步探索这些组件的更多功能，例如结合动画效果、与数据库交互等，以创建更加复杂和强大的应用程序。同时，还可以关注JavaFX的最新版本，了解其新特性和改进，不断提升开发效率和应用程序的质量。

graph LR
    A[综合应用开发] --> B[组件布局]
    B --> C[属性设置]
    C --> D[事件处理]
    D --> E[性能优化]
    F[图像加载] --> E
    G[组件使用] --> E

这个流程图展示了综合应用开发的主要步骤，包括组件布局、属性设置、事件处理和性能优化等方面。同时，图像加载和组件使用也会影响性能优化。通过合理的布局、属性设置和事件处理，并结合性能优化建议，可以开发出高质量的JavaFX应用程序。