问题描述
当用户在我的JavaFX2.2 UI中按下按钮时，会出现一个深蓝色的光环，表明它已被单击.在活动过程中，我的程序可能想要取消单击"它以表明它不再被选中.
我希望有一个button.setSelected(false);，我记得Swing曾经有过，但是JavaFx中没有这样的调用.该文章讨论了阴影，但是我只想使用相同的阴影单击按钮时使用的外观，它实际上并不是投影. setEffect(new DropShadow())可以使用setStyle()，但是要使用什么值?
为您的描述，我认为您实际上想要的是 ToggleButton 而不是标准的按钮.
在 ToggleButtons 上有一个不错的Oracle教程. /p>
解决问题中的项目
蓝色光环实际上是一个聚焦环，指示控件具有聚焦.要集中控制，您可以调用 requestFocus 方法.
要从某个控件上移开焦点，可以在另一个控件上调用requestFocus使其专注于该控件.
要具有一个可以在选定状态和未选定状态之间切换的按钮，请使用切换按钮. ToggleButton具有 setSelected 方法.
投影效果的
css样式值在《 JavaFX CSS参考指南》 .
在视觉上等效于通过setEffect或通过css与setStyle定义代码中的阴影效果，或应用样式表中的样式类.在这三种方法中，我永远不会推荐setStyle方法，而只会推荐样式表中的css或代码方法中的setEffect.
相关
请注意，还有一个附加的相关属性-武装:
处于待命状态的按钮与未处于待命状态的按钮外观略有不同.大多数程序都不需要与按钮的布防状态进行交互.
用于设置所选状态样式的示例
将选定的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();
}
}
When user presses a button in my JavaFX2.2 UI, a dark blue halo appears to show it was clicked. During the course of events, my program may want to 'unclick' it to show it is no longer selected.
I expected a button.setSelected(false); I remember Swing used to have this, but there isn't such a call in JavaFx.This article discusses drop shadows but I want to simply use the same appearance used when a button is clicked which isn't really a drop shadow. setEffect(new DropShadow())Using setStyle() is ok, but what values to use?
I think for your description, that you actually want a ToggleButton rather than a standard Button.
There is a nice Oracle tutorial on ToggleButtons.
Addressing Items from the Question
The blue halo is actually a focus ring indicating that a control has focus.To focus a control, you can invoke the requestFocus method.
To remove focus from a control, you can call requestFocus on another control to focus on that control instead.
To have a button which can toggle between a selected and unselected state, use a ToggleButton. A ToggleButton has a setSelected method.
css style values for drop shadow effects are define in the JavaFX CSS Reference Guide.
It is visually equivalent to define the drop shadow effect in code via setEffect or via css with setStyle or applying a style class from a stylesheet. Of the three approaches, I would never recommend the setStyle approach, but only the css from stylesheet or the setEffect from code approach.
Related
Note there is an additional related property - armed:
A button in an armed state has a slightly different look than one which is not in an armed state. Most programs never need to interact with the armed state of buttons.
Sample for styling the selected state
The standard way to differentiate a selected ToggleButton from one which is not Selected is to darken it to give it a depth style effect and make it appear further away when it has been pushed. Here is the standard 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;
}
You can override this default behavior by defining your own stylesheet that provides an alternate definition for the selected state. The sample below will ensure that the selected state display is much more subtle than the standard, only darkening the selected state color a small fraction rather than a lot.
Unselected
Selected
Associated 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%);
}
Source file:
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();
}
}
这篇关于如何使按钮看起来像已被单击或选中? (JavaFX2)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！