如何使按钮看起来已被单击或选择？ (JavaFX2)

Question

当用户在我的 JavaFX2.2 UI 中按下按钮时，会出现一个深蓝色光环，表明它已被单击。在事件过程中，我的程序可能想要“取消单击”它以显示它不再被选中。

我期待一个 button.setSelected(false); 我记得 Swing 曾经有这个，但在 JavaFx 中没有这样的调用。 这个article 讨论了阴影，但我想简单地使用单击按钮时使用的相同外观，这并不是真正的阴影。 setEffect(new DropShadow()) 使用setStyle() 是可以的，但是使用什么值呢？

Answer 1

我认为根据您的描述，您实际上想要的是 ToggleButton 而不是标准的 Button。

ToggleButtons 上有一个不错的 Oracle 教程。

---

解决问题中的项目

出现深蓝色光晕表明它已被点击

蓝色光环实际上是一个焦点环，表示控件具有焦点。 要聚焦一个控件，您可以调用requestFocus 方法。

在事件过程中，我的程序可能想要“取消单击”它以显示它不再被选中。

要从控件中移除焦点，您可以在另一个控件上调用 requestFocus 以改为关注该控件。

我期待一个 button.setSelected(false);

要拥有一个可以在选中和未选中状态之间切换的按钮，请使用ToggleButton。 ToggleButton 有一个 setSelected 方法。

setEffect(new DropShadow()) 使用 setStyle() 是可以的，但是要使用什么值

阴影效果的 css 样式值在 JavaFX CSS Reference Guide 中定义。

在代码中通过setEffect 或通过setStyle 的css 或应用样式表中的样式类来定义投影效果在视觉上是等效的。在这三种方法中，我绝不会推荐setStyle 方法，而只推荐样式表中的css 或代码方法中的setEffect。

---

相关

注意还有一个额外的相关属性 - armed:

表示按钮已被“武装”，因此鼠标释放将导致按钮的动作被调用。这与压制略有不同。 Pressed 表示鼠标已经在某个 Node 上被按下并且还没有被释放。然而 arm 也会考虑鼠标是否真的在按钮上方并被按下。

处于待命状态的按钮与未处于待命状态的按钮的外观略有不同。大多数程序从不需要与按钮的武装状态进行交互。

---

选定状态样式的示例

区分选中的切换按钮和未选中的切换按钮的标准方法是将其变暗以赋予其深度样式效果，并使其在被按下时显得更远。这是标准的toggle button css for JavaFX 2.2：

.toggle-button:selected {
    -fx-background-color:
        -fx-shadow-highlight-color,
        linear-gradient(to bottom, derive(-fx-color,-90%) 0%, derive(-fx-color,-60%) 100%),
        linear-gradient(to bottom, derive(-fx-color,-60%) 0%, derive(-fx-color,-35%) 50%, derive(-fx-color,-30%) 98%, derive(-fx-color,-50%) 100%),
        linear-gradient(to right, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 10%, rgba(0,0,0,0) 90%, rgba(0,0,0,0.3) 100%);
    -fx-background-insets: 0 0 -1 0, 0, 1, 1;
    /* TODO: -fx-text-fill should be derived */
    -fx-text-fill: -fx-light-text-color;
}

您可以通过defining your own stylesheet 覆盖此默认行为，它为选定状态提供替代定义。下面的示例将确保所选状态显示比标准更微妙，仅将所选状态颜色变暗一小部分而不是很多。

未选中

已选中

关联的css：

/**
 * file: colored-toggle.css
 *   Place in same directory as ColoredToggle.java.
 *   Have your build system copy this file to your build output directory.
 **/

.root {
  -fx-background-color: cornsilk; 
  -fx-padding: 10;
}

.toggle-button {
  -fx-color: paleturquoise;
}

.toggle-button:selected {
    -fx-background-color:
        -fx-shadow-highlight-color,
        linear-gradient(to bottom, derive(-fx-color,-22%) 0%, derive(-fx-color,-15%) 100%),
        linear-gradient(to bottom, derive(-fx-color,-15%) 0%, derive(-fx-color,-10%) 50%, derive(-fx-color,-8%) 98%, derive(-fx-color,-12%) 100%);
}

.toggle-button:selected:focused {
    -fx-background-color:
        -fx-focus-color,
        linear-gradient(to bottom, derive(-fx-color,-22%) 0%, derive(-fx-color,-15%) 100%),
        linear-gradient(to bottom, derive(-fx-color,-15%) 0%, derive(-fx-color,-10%) 50%, derive(-fx-color,-8%) 98%, derive(-fx-color,-12%) 100%);
}

源文件：

import javafx.application.Application;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.*;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class ColoredToggle extends Application {
  public static void main(String[] args) { Application.launch(ColoredToggle.class, args); }

  @Override public void start(Stage stage) {
    ToggleButton visibilityControl = new ToggleButton("Winterfell");

    VBox layout = new VBox(10);
    layout.setAlignment(Pos.CENTER);
    layout.getChildren().setAll(visibilityControl);

    layout.getStylesheets().add(getClass().getResource("colored-toggle.css").toExternalForm());

    stage.setScene(new Scene(layout));
    stage.show();
  }
}

Answer 2

从 css 样式表中，此命令也有效。不需要切换按钮。按下其他按钮后，焦点将切换到新按钮。

.button:focused{
    -fx-background-color: gray;

Answer 3

我正在使用 JavaFx13，我使用 css 来实现我的活动按钮状态。这是我的代码（只有一部分）。

控制器：

@FXML
private BorderPane bp;

@FXML
private Button mnu_list;

@FXML
private Button mnu_address;

private Button activeMenu;

// This is my Constructor
public DashboardController() {
    this.activeMenu = null;
}

public void initialize() {

    mnu_list.setOnMouseClicked(
            actionEvent -> this.setActiveMenu(mnu_list, ListController.class)
    );

    mnu_address.setOnMouseClicked(
            actionEvent -> this.setActiveMenu(mnu_address, AddressController.class)
    );
}

private void setActiveMenu(Button s, Class c) {
    if (c != null) {
        // I'm using FXWeaver. Here I'm setting a new fxml to borderpane.
        bp.setCenter(this.fxWeaver.loadView(c));
    }
    if (this.activeMenu != null) {
        this.activeMenu.getStyleClass().removeAll("active");
    }
    s.getStyleClass().add("active");
    this.activeMenu = s;
}

CSS：

.btn_menu{
    -fx-background-radius: 0px;
    -fx-cursor: hand;
    -fx-alignment: center-left;
}
.btn_accent_color{
    -fx-background-color: #7c4dff;
    -fx-text-fill: #FFFFFF;
}
.btn_accent_color.active{
    -fx-background-color: #aa3bfe;
    -fx-text-fill: #FFFFFF;
}

注意：在 .fxml 文件中 - 我已将所有菜单按钮类设置为 btn_menu、btn_accent_color。

信息：在这里，我将 css 类切换（添加和删除）到按钮。 （和我们在使用 js 的网站中所做的一样）