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()TabPaneNode 的形式获得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:左侧有一些选项卡,右侧有一些选项卡(中间有空格)的主要内容,如果未能解决你的问题,请参考以下文章

重命名 p-tabview 中的选项卡

从一个选项卡滑动到另一个选项卡时,TabView 不保留状态

SwiftUI:Tabview,更改选项卡时保持状态

动态 TabView primefaces,选项卡渲染属性不起作用

左侧列表视图和右侧选项卡主机,屏幕共享比例为 20:80

Primefaces tabview 验证与动态选项卡