TabView：左侧有一些选项卡，右侧有一些选项卡（中间有空格）
Posted
技术标签:
【中文标题】TabView：左侧有一些选项卡，右侧有一些选项卡（中间有空格）【英文标题】：TabView: Have some of the tabs on the left side, and some of them on the right (Space in between) 【发布时间】：2019-10-08 15:50:17 【问题描述】：我正在尝试在 JavaFX 中创建 TabView。我想让一些选项卡与其他选项卡保持距离，因为它们的功能属于另一个类别。
这就是现在的样子：
如您所见，我希望将最后两个选项卡移到右侧而不影响其余选项卡。
这是我的 FXML 文件：
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.ChoiceBox?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.Tab?>
<?import javafx.scene.control.TabPane?>
<?import javafx.scene.control.TableColumn?>
<?import javafx.scene.control.TableView?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.BorderPane?>
<?import javafx.scene.layout.ColumnConstraints?>
<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.RowConstraints?>
<?import javafx.scene.layout.VBox?>
<?import javafx.scene.text.Font?>
<BorderPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="800.0" prefWidth="1000.0" xmlns="http://javafx.com/javafx/8.0.171" xmlns:fx="http://javafx.com/fxml/1" fx:controller="Application.MainController">
<center>
<VBox alignment="BOTTOM_CENTER" prefHeight="200.0" prefWidth="100.0" BorderPane.alignment="CENTER">
<children>a
<TabPane accessibleRole="BUTTON" nodeOrientation="LEFT_TO_RIGHT" prefHeight="651.0" prefWidth="1000.0" tabClosingPolicy="UNAVAILABLE">
<tabs>
<Tab text="Courses">
<content>
<TableView prefHeight="665.0" prefWidth="1000.0">
<columns>
<TableColumn prefWidth="75.0" text="C1" />
<TableColumn prefWidth="75.0" text="C2" />
</columns>
</TableView>
</content>
</Tab>
<Tab text="Education Matrix">
<content>
<TableView prefHeight="200.0" prefWidth="200.0">
<columns>
<TableColumn prefWidth="75.0" text="C1" />
<TableColumn prefWidth="75.0" text="C2" />
</columns>
</TableView>
</content>
</Tab>
<Tab text="Employee">
<content>
<AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="180.0" prefWidth="200.0" />
</content>
</Tab>
<Tab text="Calendar">
<content>
<AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="180.0" prefWidth="200.0" />
</content>
</Tab>
<Tab fx:id="companiesTab" text="Companies">
<content>
<AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="180.0" prefWidth="200.0" />
</content>
</Tab>
<Tab fx:id="providerTab" text="Provider">
<content>
<AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="180.0" prefWidth="200.0" />
</content>
</Tab>
</tabs>
<VBox.margin>
<Insets />
</VBox.margin>
</TabPane>
</children>
</VBox>
</center>
<bottom>
<GridPane prefHeight="105.0" prefWidth="1000.0" BorderPane.alignment="CENTER">
<columnConstraints>
<ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
<ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
<ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
</columnConstraints>
<rowConstraints>
<RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
</rowConstraints>
<children>
<HBox alignment="CENTER_LEFT" prefHeight="100.0" prefWidth="200.0" style="-fx-background-color: grey;">
<children>
<Button mnemonicParsing="false" text="Button" />
</children>
<padding>
<Insets left="20.0" />
</padding>
</HBox>
<HBox alignment="CENTER_RIGHT" prefHeight="100.0" prefWidth="200.0" style="-fx-background-color: grey;" GridPane.columnIndex="2">
<children>
<Button mnemonicParsing="false" text="Button" />
</children>
<opaqueInsets>
<Insets />
</opaqueInsets>
<padding>
<Insets right="20.0" />
</padding>
</HBox>
<HBox alignment="CENTER" prefHeight="100.0" prefWidth="200.0" style="-fx-background-color: grey;" GridPane.columnIndex="1">
<children>
<Button mnemonicParsing="false" text="Button" />
</children>
</HBox>
</children>
</GridPane>
</bottom>
<top>
<GridPane prefHeight="106.0" prefWidth="1000.0" BorderPane.alignment="CENTER">
<columnConstraints>
<ColumnConstraints hgrow="SOMETIMES" maxWidth="494.0" minWidth="10.0" prefWidth="289.0" />
<ColumnConstraints hgrow="SOMETIMES" maxWidth="711.0" minWidth="10.0" prefWidth="711.0" />
</columnConstraints>
<rowConstraints>
<RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
</rowConstraints>
<children>
<HBox alignment="CENTER_LEFT" prefHeight="100.0" prefWidth="200.0">
<children>
<ChoiceBox prefWidth="150.0" />
</children>
<padding>
<Insets left="20.0" />
</padding>
</HBox>
<HBox alignment="CENTER" prefHeight="100.0" prefWidth="200.0" GridPane.columnIndex="1">
<children>
<Label text="Smart Academy Manager">
<font>
<Font name="Arial" size="31.0" />
</font>
</Label>
</children>
</HBox>
</children>
</GridPane>
</top>
</BorderPane>`enter code here`
【问题讨论】：
标准控件有其局限性，这就是其中之一。您需要为TabView 创建自己的控件，或者为Skin 创建一个不同的TabView，这可能需要付出很多努力。
也许使用颜色编码的标签来区分类别而不是将它们分开。我觉得将标签放在右侧会使用户感到困惑......
【参考方案1】：
原TabPane 不提供自定义选项卡布局的工具。但是使用一些技巧可以获得类似的结果。
您可以将不可见的Tab 设置到需要的位置，并将其宽度与TabPane 的宽度绑定。
首先我们需要计算拆分器的宽度。这是TabPane 的宽度减去Tabs 的宽度之和，不包括拆分器。可以使用命令.lookup() 从TabPane 以Node 的形式获得Tab 对象。我们还需要考虑与样式相关的宽度（填充、间距）。对于这个例子，我将通过硬设置这个数字（对于默认主题）。在计算之后，我们使用.setStyle() 设置拆分器的大小：
private void autoSizeSplitter(TabPane tabPane, Tab splitter)
double width = tabPane.getWidth();
Set<Node> tabs = tabPane.lookupAll(".tab");
for (Node node : tabs)
if (node.getId() == null || !node.getId().equals(splitter.getId()))
width = width - node.getBoundsInParent().getWidth();
double PADDING = 20;
width = width - PADDING;
splitter.setStyle("-fx-background-color:transparent; -fx-pref-width: " + width + ";");
最后我们在TabPane宽度属性上设置了监听器，并在初始化时第一次自动调整大小：
tabPane.widthProperty().addListener(observable -> autoSizeSplitter(tabPane, splitter));
Platform.runLater(() -> autoSizeSplitter(tabPane, splitter));
完整示例：
import javafx.application.Application;
import javafx.application.Platform;
import javafx.scene.Node;
import javafx.scene.Scene;
import javafx.scene.control.Tab;
import javafx.scene.control.TabPane;
import javafx.stage.Stage;
import java.util.Set;
public class Sample extends Application
@Override
public void start(Stage primaryStage)
TabPane tabPane = new TabPane();
tabPane.setTabClosingPolicy(TabPane.TabClosingPolicy.UNAVAILABLE);
Tab splitter = new Tab();
splitter.setDisable(true);
splitter.setId("splitter");
tabPane.getTabs().add(new Tab("111"));
tabPane.getTabs().add(new Tab("222"));
tabPane.getTabs().add(splitter);
tabPane.getTabs().add(new Tab("333"));
tabPane.getTabs().add(new Tab("444"));
tabPane.getTabs().add(new Tab("555"));
Scene scene = new Scene(tabPane, 640, 480);
primaryStage.setScene(scene);
primaryStage.show();
tabPane.widthProperty().addListener(observable -> autoSizeSplitter(tabPane, splitter));
Platform.runLater(() -> autoSizeSplitter(tabPane, splitter));
private void autoSizeSplitter(TabPane tabPane, Tab splitter)
double width = tabPane.getWidth();
Set<Node> tabs = tabPane.lookupAll(".tab");
for (Node node : tabs)
if (node.getId() == null || !node.getId().equals(splitter.getId()))
width = width - node.getBoundsInParent().getWidth();
double PADDING = 20;
width = width - PADDING;
splitter.setStyle("-fx-background-color:transparent; -fx-pref-width: " + width + ";");
public static void main(String[] args)
launch(args);
【讨论】：
当我希望在初始化视图后使用代码时，我有时会使用 runlater。这有时很有用。 这是个坏习惯 ;)以上是关于TabView：左侧有一些选项卡，右侧有一些选项卡（中间有空格）的主要内容，如果未能解决你的问题，请参考以下文章
从一个选项卡滑动到另一个选项卡时，TabView 不保留状态