java - 如何在 Javafx 中展开标签栏
问题描述
我正在尝试使用 Javafx 中的 TabPane 实现登录和注册菜单。标签栏的默认外观就像第一张图片。我想知道如何使标签栏看起来像第二张图片(我为第二张截图 xD 操作图像)。我的问题与这个问题类似,但在 Java 中。我很感激任何评论。谢谢。
解决方案
TabPane 并不容易。但是您可以使用自定义 CSS 轻松创建控件。
package control;
import javafx.event.ActionEvent;
import javafx.scene.Node;
import javafx.scene.control.Button;
import javafx.scene.control.ContentDisplay;
import javafx.scene.control.ToolBar;
import javafx.scene.layout.BorderPane;
public class ButtonBarPane extends BorderPane {
private static final String DEFAULT_STYLE_CLASS = "button-bar-pane";
private ToolBar buttonBar;
private Node currentPagePane;
public ButtonBarPane() {
buildView();
}
private void buildView() {
getStyleClass().setAll(DEFAULT_STYLE_CLASS);
buttonBar = new ToolBar();
setTop(buttonBar);
}
public void addPage(String title, Node pagePane) {
Button btn = new Button(title);
btn.setContentDisplay(ContentDisplay.TOP);
btn.setOnAction((ActionEvent event) -> {
setSelectedButton(btn);
showPage(pagePane);
});
buttonBar.getItems().add(btn);
btn.setPrefWidth(300);
if (buttonBar.getItems().size() == 1) {
setSelectedButton(btn);
showPage(pagePane);
}
}
private void setSelectedButton(Button btnSelected) {
buttonBar.getItems().forEach((node) -> {
node.getStyleClass().removeAll("selected");
});
btnSelected.getStyleClass().add("selected");
}
private void showPage(Node pagePane) {
if (currentPagePane != null) {
setCenter(null);
}
this.currentPagePane = pagePane;
setCenter(pagePane);
}
}
style.css 文件中 ButtonBarPane 的自定义 CSS:
.root {
/* ButtonBarPane Colors */
BUTTON_BAR_PANE_TOOLBAR: #e9e9e9;
BUTTON_BAR_PANE_BORDER: #c9c9c9;;
BUTTON_BAR_PANE_TEXT: #333333;
BUTTON_BAR_PANE_SELECTED: #c5c5c5;
}
/*******************************************************************************
* ButtonBarPane *
******************************************************************************/
.button-bar-pane {
-fx-padding: 0 0 0 0;
}
.button-bar-pane > .tool-bar {
-fx-background-color: BUTTON_BAR_PANE_TOOLBAR;
-fx-padding: 3 3 0 5;
-fx-border-color: transparent, BUTTON_BAR_PANE_BORDER;
-fx-border-width: 0 0 1 0;
-fx-border-style: solid;
}
.button-bar-pane > .tool-bar .button {
-fx-background-color: transparent;
-fx-text-fill: BUTTON_BAR_PANE_TEXT;
}
.button-bar-pane > .tool-bar .button:pressed {
-fx-background-color: BUTTON_BAR_PANE_SELECTED;
-fx-background-radius: 5 5 0 0;
}
.button-bar-pane > .tool-bar .button.selected {
-fx-background-color: BUTTON_BAR_PANE_SELECTED;
-fx-background-radius: 5 5 0 0;
}
演示应用:
import control.ButtonBarPane;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
public class HelloFX extends Application {
@Override
public void start(Stage stage) {
ButtonBarPane bbpPages = new ButtonBarPane();
// TODO Add here your login and register nodes as page node component.
bbpPages.addPage("Login", new Label("Login content here..."));
bbpPages.addPage("Register", new Label("Register content here..."));
bbpPages.setMinWidth(640);
bbpPages.setPrefWidth(640);
bbpPages.setMaxWidth(640);
VBox vbox = new VBox(bbpPages);
Scene scene = new Scene(vbox, 640, 480);
scene.getStylesheets().add("style.css");
stage.setScene(scene);
stage.setTitle("JavaFX App");
stage.show();
}
public static void main(String[] args) {
launch();
}
}
推荐阅读
- docker - 为什么 pure-ftpd docker 存储库没有最近的标记版本
- root-framework - 如何从根文件中提取直方图并打印它们但将它们写入宏中以运行
- python - 如何确定角度数据的相关值?
- angular - 在 Angular 中传递输入的问题
- java - 如何获取 S3 存储桶中特定文件的先前版本 ID?
- angular - 打字稿:创建方法时对象可能为空
- google-cloud-platform - GCP 权限块
- swift - SwiftUI Path 对象的字符串格式是标准的吗?
- python - 这是创建对象的好方法吗?
- excel - 如何使用图片的URL在excel中将图片作为图片插入