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

Question

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

我原以为button.setSelected(false);我记得Swing曾经有过这个,但是在JavaFx中没有这样的调用.该文章讨论了阴影,但我想简单地用一个按钮被点击时使用的相同的外观,这是不是一个真正的阴影.setEffect(new DropShadow()) 使用setStyle()还可以,但要使用什么值？

Answer 1

我认为,对于您的描述,您实际上需要ToggleButton而不是标准Button.

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

解决问题中的项目

深蓝色光环似乎表明它被点击了

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

在活动过程中,我的程序可能想要"取消"它以显示它已不再被选中.

要从控件中删除焦点,可以在另一个控件上调用requestFocus,以便专注于该控件.

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

要有一个可以在选定和未选定状态之间切换的按钮,请使用ToggleButton.A ToggleButton有一个setSelected方法.

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

"投影效果"的css样式值在" JavaFX CSS参考指南"中定义.

它在视觉上等效于通过setEffect或通过css 在代码中定义阴影效果,或者setStyle从样式表中应用样式类.在这三种方法中,我绝不会推荐这种setStyle方法,而只推荐使用样式表或setEffect代码方法中的css .

有关

请注意,还有一个相关的属性 - 武装:

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

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

用于样式化所选状态的样本

将选定的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();
  }
}