JavaFx笔记三: UI组件（Label）

UI组件（一）

一、Label标签

Label用于展示文本元素，可设定效果，或添加图形元素。Mac OS下效果如下：

图 1：标签静态效果图

以上静态布局基于fxml文件设置，具体属性如下：

<AnchorPane prefHeight="500.0" prefWidth="300.0" styleClass="context-back" xmlns="http://javafx.com/javafx/10.0.2-internal" xmlns:fx="http://javafx.com/fxml/1" fx:controller="cn.sunyog.controller.TextController">
   <children>
      <VBox fx:id="root" layoutX="69.0" layoutY="50.0" prefHeight="500.0" prefWidth="300.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
         <children>
            <Label fx:id="label0" text="默认标签" />
            <Label fx:id="label1" text="设定自动换行标签" />
            <Label fx:id="label2" text="增加CSS效果的标签" />
            <Label fx:id="label3" text="带旋转效果的标签" />
            <Label fx:id="label4" text="带图形的标签" />
         children>
      VBox>
   children>
AnchorPane>

Controller代码：

@FXML
public VBox root;
@FXML
public Label label0;
@FXML
public Label label1;
@FXML
public Label label2;
@FXML
public Label label3;
@FXML
public Label label4;

@FXML
public void initialize() throws IOException {
    this.testLabel();
}

private void testLabel() throws IOException {
    this.label1.setWrapText(true);
    this.label2.getStyleClass().add("label-class");
    this.label3.setOnMouseClicked(e->{
        double rotate = this.label3.getRotate();
        this.label3.setRotate(rotate+90);
    });
    Label label = this.label4;
    ImageView view = getImageView();
    label.setGraphic(view);
}

/**
 * 获取图片Node
 */
private ImageView getImageView() throws IOException {
    ImageView view = new ImageView();
    try (InputStream in = this.getClass().getResourceAsStream("/view/img/zcfg.png")) {
        Image img = new Image(in);
        view.setImage(img);
    }
    return view;
}

显示效果：

图 2：标签动态效果

二、Button按钮、RadioButton单选按钮、ToggleButton切换按钮

FXML文件：

<Button fx:id="button">旋转按钮Button>
<RadioButton fx:id="rb1">红色RadioButton>
<RadioButton fx:id="rb2">绿色RadioButton>
<RadioButton fx:id="rb3">蓝色RadioButton>
<ToggleButton fx:id="tb1">正常ToggleButton>
<ToggleButton fx:id="tb2">0.5倍ToggleButton>
<ToggleButton fx:id="tb3">1.5倍ToggleButton>

Controller按钮代码：

@FXML
public Button button;

private void testButton() throws IOException {
    Button btn = this.button;
    //按钮点击事件
    btn.setOnAction(e -> {
        Label label = this.label2;
        double rotate = label.getRotate();
        label.setRotate(rotate+30.0);
    });
    //鼠标拖入
    btn.setOnMouseDragEntered(e -> this.label.setText("MouseDragEvent"));
    //鼠标拖出
    btn.setOnMouseDragExited(e -> this.label.setText("MouseDragExited"));
    //鼠标移动
    //btn.setOnMouseMoved(e -> this.label.setText("MouseMoved"));
    //鼠标点击
    //btn.setOnMouseClicked(e -> this.label.setText("MouseClicked"));
    //鼠标移入
    btn.setOnMouseEntered(e -> this.label.setText("MouseEntered"));
    //鼠标移出
    btn.setOnMouseExited(e -> this.label.setText("MouseExited"));
    //鼠标按压
    btn.setOnMousePressed(e -> this.label.setText("MousePressed"));
    //鼠标释放
    btn.setOnMouseReleased(t -> this.label.setText("MouseRelease"));

    //鼠标进入增加阴影效果
    btn.addEventHandler(MouseEvent.MOUSE_ENTERED,e->btn.setEffect(new DropShadow()));
    //鼠标移出取消效果
    btn.addEventHandler(MouseEvent.MOUSE_EXITED,e->btn.setEffect(null));
}

单选按钮处理代码：

@FXML
public RadioButton rb1;
@FXML
public RadioButton rb2;
@FXML
public RadioButton rb3;

private void testRadioButton() {
    ToggleGroup group=new ToggleGroup();
    rb1.setToggleGroup(group);
    rb1.setUserData("red");
    rb2.setToggleGroup(group);
    rb2.setUserData("green");
    rb3.setToggleGroup(group);
    rb3.setUserData("blue");
		
  	//选中事件
    group.selectedToggleProperty().addListener(new ChangeListener<Toggle>() {
        @Override
        public void changed(ObservableValue<? extends Toggle> observable, Toggle oldValue, Toggle newValue) {
            if (group.getSelectedToggle()!=null){
                Object color = group.getSelectedToggle().getUserData();
                label2.setStyle("-fx-background-color: "+color);
            }
        }
    });
    //初始化选中
    rb3.setSelected(true);
    //设置请求焦点
    rb2.requestFocus();
}

切换按钮代码：

@FXML
public ToggleButton tb1;
@FXML
public ToggleButton tb2;
@FXML
public ToggleButton tb3;

private void testToggleButton() {
    ToggleGroup group=new ToggleGroup();
    tb1.setToggleGroup(group);
    tb1.setUserData(1.0);
    tb2.setToggleGroup(group);
    tb2.setUserData(0.5);
    tb3.setToggleGroup(group);
    tb3.setUserData(1.5);

    HBox hbox=new HBox();
    hbox.getChildren().addAll(tb1,tb2,tb3);
    root.getChildren().add(hbox);

    //选中事件
    group.selectedToggleProperty().addListener((list,t1,t2)->{
        if (group.getSelectedToggle()!=null){
            Object scale = group.getSelectedToggle().getUserData();
            double scalInt = (double) scale;
            this.label2.setScaleX(scalInt);
            this.label2.setScaleY(scalInt);
        }
    });
    tb1.setSelected(true);
    tb1.requestFocus();
}

最终效果如下：

三、总结

JavaFx提供了一种基于FXML文件的静态页面设计方式，结合JavaFXScenceBuilder工具可以实现快速、直观的静态交互界面设计，简化了开发流程。通过 @FXML 注解，在Controller层对界面元素进行控制，从而带来更少量代码实现更丰富功能的效果。