将按钮添加到选项卡和选项卡区域 JavaFX [英] Add Buttons to Tabs and Tab area JavaFX
问题描述
我正在寻找一种将 Button 添加到 JavaFX Tab
的方法.
在互联网上搜索它,但我找不到任何解决方案.
类似于下面屏幕截图中的按钮.
有人可以帮我吗?
要在 Tab
s 上有图标 Button
s:>
setGraphic
Tab
的方法可以用来添加任意Node
显示在Tab
.可以添加Button
,因为它是一个Node
.
此后会出现一个功能齐全的按钮,但不显示任何图标.Button
也有 setGraphic
方法的作用相同,因此可以添加一个 ImageView
来显示 Image
> 在 Button
上.
要在选项卡区域的右上角控制 Button
:
这些按钮可以放在TabPane
上,而不是放在TabPane
内.为此,您可以使用 AnchorPane
将 Button
锚定到右上角.
示例:
public class ButtonedTabPane extends Application {@覆盖公共无效开始(阶段primaryStage){BorderPane root = new BorderPane();TabPane tabPane = new TabPane();tabPane.setTabClosingPolicy(TabPane.TabClosingPolicy.UNAVAILABLE);//控制按钮的 HBoxHBox hbox = new HBox();hbox.getChildren().addAll(createTabButton("min.png"), createTabButton("max.png"));//锚定控件AnchorPane anchor = new AnchorPane();anchor.getChildren().addAll(tabPane, hbox);AnchorPane.setTopAnchor(hbox, 3.0);AnchorPane.setRightAnchor(hbox, 5.0);AnchorPane.setTopAnchor(tabPane, 1.0);AnchorPane.setRightAnchor(tabPane, 1.0);AnchorPane.setLeftAnchor(tabPane, 1.0);AnchorPane.setBottomAnchor(tabPane, 1.0);//创建一些标签Tab tab = new Tab("文件");tab.setGraphic(createTabButton("files.png"));((Button) tab.getGraphic()).setOnAction(e -> System.out.println("我会显示文件列表!"));tabPane.getTabs().add(tab);tab = new Tab("网络");tab.setGraphic(createTabButton("network.png"));((Button) tab.getGraphic()).setOnAction(e -> System.out.println("我会展示网络!"));tabPane.getTabs().add(tab);root.setCenter(锚点);场景场景 = 新场景(root, 400, 400);scene.getStylesheets().add(getClass().getResource("style.css").toExternalForm());primaryStage.setScene(场景);primaryStage.show();}私有按钮 createTabButton(String iconName) {按钮按钮 = new Button();ImageView imageView = new ImageView(new Image(getClass().getResource(iconName).toExternalForm(),16, 16, 假, 真));button.setGraphic(imageView);button.getStyleClass().add("tab-button");返回按钮;}公共静态无效主(字符串 [] args){发射(参数);}}
唯一剩下的就是从 Button
中删除默认背景和边框.这可以通过将以下 CSS 选择器插入到您的 CSS 样式表中来完成.
style.css
.tab-button {-fx-border-width: 0;-fx-背景-半径:0;-fx-background-color:透明;-fx-content-display:仅图形;}.tab 按钮:悬停 {-fx-background-color: 白色;}
结果:
<前>I'm searching a way to add a Button to a JavaFX Tab
.
Searched the internet for it but I can't find any solution for it.
Something like the buttons in the screenshot below.
Can someone help me with it?
To have iconed Button
s on the Tab
s:
The setGraphic
method of Tab
can be used to add any Node
to be displayed on the Tab
. A Button
can be added as it is a Node
.
After this a fully functional button is present, but it does not display any icon. Button
also has the setGraphic
method which works the same, therefore an ImageView
can be added to display an Image
on the Button
.
To have control Button
s on the top-right corner of the tab-area:
These buttons can be placed on the TabPane
, rather than inside the TabPane
. For this you can use an AnchorPane
to anchor the Button
s to the top-right corner.
Example:
public class ButtonedTabPane extends Application {
@Override
public void start(Stage primaryStage) {
BorderPane root = new BorderPane();
TabPane tabPane = new TabPane();
tabPane.setTabClosingPolicy(TabPane.TabClosingPolicy.UNAVAILABLE);
// HBox of control buttons
HBox hbox = new HBox();
hbox.getChildren().addAll(createTabButton("min.png"), createTabButton("max.png"));
// Anchor the controls
AnchorPane anchor = new AnchorPane();
anchor.getChildren().addAll(tabPane, hbox);
AnchorPane.setTopAnchor(hbox, 3.0);
AnchorPane.setRightAnchor(hbox, 5.0);
AnchorPane.setTopAnchor(tabPane, 1.0);
AnchorPane.setRightAnchor(tabPane, 1.0);
AnchorPane.setLeftAnchor(tabPane, 1.0);
AnchorPane.setBottomAnchor(tabPane, 1.0);
// Create some tabs
Tab tab = new Tab("Files");
tab.setGraphic(createTabButton("files.png"));
((Button) tab.getGraphic()).setOnAction(e -> System.out.println("I'll show the list of files!"));
tabPane.getTabs().add(tab);
tab = new Tab("Network");
tab.setGraphic(createTabButton("network.png"));
((Button) tab.getGraphic()).setOnAction(e -> System.out.println("I'll show the network!"));
tabPane.getTabs().add(tab);
root.setCenter(anchor);
Scene scene = new Scene(root, 400, 400);
scene.getStylesheets().add(getClass().getResource("style.css").toExternalForm());
primaryStage.setScene(scene);
primaryStage.show();
}
private Button createTabButton(String iconName) {
Button button = new Button();
ImageView imageView = new ImageView(new Image(getClass().getResource(iconName).toExternalForm(),
16, 16, false, true));
button.setGraphic(imageView);
button.getStyleClass().add("tab-button");
return button;
}
public static void main(String[] args) {
launch(args);
}
}
The only thing left to remove the default background and borders from the Button
s. This can be done by inserting the following CSS selectors into your CSS stylesheet.
style.css
.tab-button {
-fx-border-width: 0;
-fx-background-radius: 0;
-fx-background-color: transparent;
-fx-content-display: graphic-only;
}
.tab-button:hover {
-fx-background-color: white;
}
The result:
这篇关于将按钮添加到选项卡和选项卡区域 JavaFX的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!