JavaFX - UI 控件-头球世界杯-02年世界杯中国队_1930年乌拉圭世界杯

2025-11-24 00:59:41

admin

头球世界杯

❮ 上一节

下一节 ❯

JavaFX - UI 控件

每个用户界面都会考虑以下三个主要方面 −

UI 元素 − 这些是用户最终看到并与之交互的核心视觉元素。JavaFX 提供了从基本到复杂的广泛使用和常见元素的庞大列表，我们将在本教程中介绍这些元素。

布局 − 它们定义应如何在屏幕上组织 UI 元素，并为 GUI(图形用户界面)提供最终的外观和感觉。这部分将在布局章节中介绍。

行为 − 这些是用户与 UI 元素交互时发生的事件。这部分将在事件处理章节中介绍。

JavaFX 在包 javafx.scene.control 中提供了几个类。为了创建各种 GUI 组件(控件)，JavaFX 支持多种控件，例如日期选择器、按钮文本字段等。

每个控件都由一个类表示;您可以通过实例化其各自的类来创建控件。

以下是使用 JavaFX 设计 GUI 时常用控件的列表。

S.No

控制 &描述

Label

标签对象是用于放置文本的组件。

Button

此类创建一个带标签的按钮。

ColorPicker

颜色选择器提供了一个控件窗格，旨在允许用户操作和选择颜色。

CheckBox

复选框是一个图形组件，可以处于开启(true)或关闭(false)状态。

RadioButton

RadioButton 类是一个图形组件，在组中可以处于开启(true)或关闭(false)状态。

ListView

ListView 组件向用户显示一个滚动的文本项列表。

TextField

TextField 对象是一个文本组件，允许编辑一行文本文本。

PasswordField

PasswordField 对象是专门用于输入密码的文本组件。

Scrollbar

Scrollbar 控件表示滚动条组件，以便用户从一系列值中进行选择。

FileChooser

FileChooser 控件表示一个对话框窗口，用户可以从中选择文件。

ProgressBar

随着任务接近完成，进度条将显示任务的完成百分比。

Slider

滑块允许用户通过在有界间隔内滑动旋钮以图形方式选择值。

示例

以下程序是一个在 JavaFX 中显示登录页面的示例。在这里，我们使用控件标签、文本字段、密码字段和按钮。

将此代码保存在名为 LoginPage.java 的文件中。

import javafx.application.Application;

import static javafx.application.Application.launch;

import javafx.geometry.Insets;

import javafx.geometry.Pos;

import javafx.scene.Scene;

import javafx.scene.control.Button;

import javafx.scene.control.PasswordField;

import javafx.scene.layout.GridPane;

import javafx.scene.text.Text;

import javafx.scene.control.TextField;

import javafx.stage.Stage;

public class LoginPage extends Application {

@Override

public void start(Stage stage) {

//creating label email

Text text1 = new Text("Email");

//creating label password

Text text2 = new Text("Password");

//Creating Text Filed for email

TextField textField1 = new TextField();

//Creating Text Filed for password

PasswordField textField2 = new PasswordField();

//Creating Buttons

Button button1 = new Button("Submit");

Button button2 = new Button("Clear");

//Creating a Grid Pane

GridPane gridPane = new GridPane();

//Setting size for the pane

gridPane.setMinSize(400, 200);

//Setting the padding

gridPane.setPadding(new Insets(10, 10, 10, 10));

//Setting the vertical and horizontal gaps between the columns

gridPane.setVgap(5);

gridPane.setHgap(5);

//Setting the Grid alignment

gridPane.setAlignment(Pos.CENTER);

//Arranging all the nodes in the grid

gridPane.add(text1, 0, 0);

gridPane.add(textField1, 1, 0);

gridPane.add(text2, 0, 1);

gridPane.add(textField2, 1, 1);

gridPane.add(button1, 0, 2);

gridPane.add(button2, 1, 2);

//Styling nodes

button1.setStyle("-fx-background-color: darkslateblue; -fx-text-fill: white;");

button2.setStyle("-fx-background-color: darkslateblue; -fx-text-fill: white;");

text1.setStyle("-fx-font: normal bold 20px 'serif' ");

text2.setStyle("-fx-font: normal bold 20px 'serif' ");

gridPane.setStyle("-fx-background-color: BEIGE;");

//Creating a scene object

Scene scene = new Scene(gridPane);

//Setting title to the Stage

stage.setTitle("CSS Example");

//Adding scene to the stage

stage.setScene(scene);

//Displaying the contents of the stage

stage.show();

}

public static void main(String args[]){

launch(args);

}

使用以下命令从命令提示符编译并执行保存的 java 文件。

javac LoginPage.java

java LoginPage

执行时，上述程序将生成一个 JavaFX 窗口，如下所示。

以下程序是注册表单的示例，它演示了 JavaFX 中的控件，例如日期选择器、单选按钮、切换按钮、复选框、列表视图、选择列表等。

将此代码保存在名为 Registration.java 的文件中。

import javafx.application.Application;

import javafx.collections.FXCollections;

import javafx.collections.ObservableList;

import javafx.geometry.Insets;

import javafx.geometry.Pos;

import javafx.scene.Scene;

import javafx.scene.control.Button;

import javafx.scene.control.CheckBox;

import javafx.scene.control.ChoiceBox;

import javafx.scene.control.DatePicker;

import javafx.scene.control.ListView;

import javafx.scene.control.RadioButton;

import javafx.scene.layout.GridPane;

import javafx.scene.text.Text;

import javafx.scene.control.TextField;

import javafx.scene.control.ToggleGroup;

import javafx.scene.control.ToggleButton;

import javafx.stage.Stage;

public class Registration extends Application {

@Override

public void start(Stage stage) {

//Label for name

Text nameLabel = new Text("Name");

//Text field for name

TextField nameText = new TextField();

//Label for date of birth

Text dobLabel = new Text("Date of birth");

//date picker to choose date

DatePicker datePicker = new DatePicker();

//Label for gender

Text genderLabel = new Text("gender");

//Toggle group of radio buttons

ToggleGroup groupGender = new ToggleGroup();

RadioButton maleRadio = new RadioButton("male");

maleRadio.setToggleGroup(groupGender);

RadioButton femaleRadio = new RadioButton("female");

femaleRadio.setToggleGroup(groupGender);

//Label for reservation

Text reservationLabel = new Text("Reservation");

//Toggle button for reservation

ToggleButton Reservation = new ToggleButton();

ToggleButton yes = new ToggleButton("Yes");

ToggleButton no = new ToggleButton("No");

ToggleGroup groupReservation = new ToggleGroup();

yes.setToggleGroup(groupReservation);

no.setToggleGroup(groupReservation);

//Label for technologies known

Text technologiesLabel = new Text("Technologies Known");

//check box for education

CheckBox javaCheckBox = new CheckBox("Java");

javaCheckBox.setIndeterminate(false);

//check box for education

CheckBox dotnetCheckBox = new CheckBox("DotNet");

javaCheckBox.setIndeterminate(false);

//Label for education

Text educationLabel = new Text("Educational qualification");

//list View for educational qualification

ObservableList names = FXCollections.observableArrayList(

"Engineering", "MCA", "MBA", "Graduation", "MTECH", "Mphil", "Phd");

ListView educationListView = new ListView(names);

//Label for location

Text locationLabel = new Text("location");

//Choice box for location

ChoiceBox locationchoiceBox = new ChoiceBox();

locationchoiceBox.getItems().addAll

("Hyderabad", "Chennai", "Delhi", "Mumbai", "Vishakhapatnam");

//Label for register

Button buttonRegister = new Button("Register");

//Creating a Grid Pane

GridPane gridPane = new GridPane();

//Setting size for the pane

gridPane.setMinSize(500, 500);

//Setting the padding

gridPane.setPadding(new Insets(10, 10, 10, 10));

//Setting the vertical and horizontal gaps between the columns

gridPane.setVgap(5);

gridPane.setHgap(5);

//Setting the Grid alignment

gridPane.setAlignment(Pos.CENTER);

//Arranging all the nodes in the grid

gridPane.add(nameLabel, 0, 0);

gridPane.add(nameText, 1, 0);

gridPane.add(dobLabel, 0, 1);

gridPane.add(datePicker, 1, 1);

gridPane.add(genderLabel, 0, 2);

gridPane.add(maleRadio, 1, 2);

gridPane.add(femaleRadio, 2, 2);

gridPane.add(reservationLabel, 0, 3);

gridPane.add(yes, 1, 3);

gridPane.add(no, 2, 3);

gridPane.add(technologiesLabel, 0, 4);

gridPane.add(javaCheckBox, 1, 4);

gridPane.add(dotnetCheckBox, 2, 4);

gridPane.add(educationLabel, 0, 5);

gridPane.add(educationListView, 1, 5);

gridPane.add(locationLabel, 0, 6);

gridPane.add(locationchoiceBox, 1, 6);

gridPane.add(buttonRegister, 2, 8);

//Styling nodes

buttonRegister.setStyle(

"-fx-background-color: darkslateblue; -fx-textfill: white;");

nameLabel.setStyle("-fx-font: normal bold 15px 'serif' ");

dobLabel.setStyle("-fx-font: normal bold 15px 'serif' ");

genderLabel.setStyle("-fx-font: normal bold 15px 'serif' ");

reservationLabel.setStyle("-fx-font: normal bold 15px 'serif' ");

technologiesLabel.setStyle("-fx-font: normal bold 15px 'serif' ");

educationLabel.setStyle("-fx-font: normal bold 15px 'serif' ");

locationLabel.setStyle("-fx-font: normal bold 15px 'serif' ");

//Setting the back ground color