多个按钮要突出选中按钮,可以增加Button被选中是css样式,且要对Button分组(分组的效果类似于),因此采用ToggleButton而非Button。
ToggleGroup group = new ToggleGroup();
ImageView imageView;
imageView = new ImageView("/ui/image/default.png");
imageView.setFitHeight(100);
imageView.setFitWidth(100);
ToggleButton button1 = new ToggleButton(type.getName(), imageView);
//使用css样式
button1 .getStylesheets().add("main.css");
//分组
button1.setToggleGroup(group);
ToggleButton button2 = new ToggleButton(type.getName(), imageView);
button2 .getStylesheets().add("main.css");
button2.setToggleGroup(group);
ToggleButton button3 = new ToggleButton(type.getName(), imageView);
button3 .getStylesheets().add("main.css");
button2.setToggleGroup(group);
Pane.getChildren().add(button);
Pane.getChildren().add(button2);
Pane.getChildren().add(button3);
css
.toggle-button: hover {
-fx-background-color: #454545;
}
.toggle-button {
-fx-background-color: #323232;
-fx-background-insets: 0 0 0 0;
-fx-border-color: #1B1B1B;
-fx-border-width: 2px;
-fx-font-size: 14;
-fx-text-fill: #CDCDCD;
}
.toggle-button: selected {
-fx-border-color: #297ECE;
}
效果如图,