如何使按钮看起来被点击或选中？ （JavaFX2）

Question

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

我期待一个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（）是可以的，但要使用什么值

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

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

---

相关

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

  

表示该按钮已“已布防”，因此鼠标释放将导致调用该按钮的操作。这与按下略有不同。 Pressed表示已在节点上按下鼠标但尚未释放。但是，手臂也会考虑鼠标是否实际位于按钮上并按下。

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

---

样式化所选状态的样本

将选定的ToggleButton与未选择的ToggleButton区分开的标准方法是使其变暗以使其具有深度样式效果，并使其在按下时显得更远。这是标准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 的网站中所做的一样）