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

Question

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

我希望button.setSelected(false);我记得 Swing 曾经有这个，但在 JavaFx 中没有这样的调用。本文讨论了投影，但我想简单地使用单击按钮时使用的相同外观，这并不是真正的投影。setEffect(new DropShadow()) 使用setStyle()没问题，但要使用什么值？

Answer 1

我认为对于您的描述，您实际上想要一个ToggleButton而不是标准Button。

ToggleButtons上有一个很好的 Oracle 教程。

---

解决问题中的项目

深蓝色光晕似乎表明它已被点击

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

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

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

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

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

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

阴影效果的 css 样式值在JavaFX CSS 参考指南中定义。

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

---

有关的

请注意，还有一个额外的相关属性 - armed：

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

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

---

样式选定状态的示例

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

.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;
}

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

未选中

已选中

相关的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 的网站中所做的一样）