JavaFx：选项卡项未填充内容

Question

我有一个 TabPane 声明如下：

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.TabPane?>

<TabPane fx:id="rootNode" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" stylesheets="@dark_theme.css" tabClosingPolicy="UNAVAILABLE" xmlns="http://javafx.com/javafx/19" xmlns:fx="http://javafx.com/fxml/1" fx:controller="controllers.AppController" />

我想从我的控制器添加标签。所以我这样做：

    jsonConfig.getAvailableChannelIds().forEach( chId -> {
        try {
            FXMLLoader fxmlLoader = new FXMLLoader(getClass().getResource("tab_item.fxml"));
            Tab item = fxmlLoader.load();
            item.setText(String.format("%d", chId));
            rootNode.getTabs().add(item);
        }catch (Exception e) {
            e.printStackTrace();
        }
    });

“tab_item.fxml”看起来如下：

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.Tab?>

<?import javafx.scene.layout.VBox?>
<Tab xmlns:fx="http://www.w3.org/1999/XSL/Transform">
   <VBox>
         <fx:include source="test.fxml"/>
   </VBox>
</Tab>

最后是“test.fxml”：

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.layout.AnchorPane?>

<AnchorPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" style="-fx-background-color: red;" xmlns="http://javafx.com/javafx/19" xmlns:fx="http://javafx.com/fxml/1" />

这就是我所拥有的：

我缺少什么来用红色方块填充 Tab 内容？

Answer 1

大多数布局窗格，例如VBox，默认情况下会尝试将其内容调整为首选大小，并会尽一切努力将大小保持在指定为最小和最大的约束范围内。

我推荐阅读旧的 Oracle layout tutorial。它是很久以前（Java 8 之前）编写的，所以代码风格有点过时，但布局概念仍然相关。另请阅读 layout package 的 Javadocs，并且大概您已经阅读了您正在使用的任何布局组件的 Javadocs（如果没有，您应该始终阅读您使用的类的文档）。

你有

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.layout.AnchorPane?>

<AnchorPane maxHeight="-Infinity" maxWidth="-Infinity" 
            minHeight="-Infinity" minWidth="-Infinity" 
            prefHeight="400.0" prefWidth="600.0" 
            style="-fx-background-color: red;"
            xmlns="http://javafx.com/javafx/19" 
            xmlns:fx="http://javafx.com/fxml/1" />

它明确地将首选大小设置为 600x400 像素，并将最小和最大大小设置为 -Infinity，这是标记值 Region.USE_PREF_SIZE。因此，VBox 将始终将内容调整为 600x400 像素（只要 VBox 中有足够的空间即可）。

删除所有这些设置（我也更正了名称空间，尽管您在这里并不真正需要它）：

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.layout.AnchorPane?>

<AnchorPane style="-fx-background-color: red;"
            xmlns:fx="http://javafx.com/fxml" />

现在 VBox 仍会尝试将内容设置为其首选大小，默认情况下，该大小是根据其自己的内容计算得出的。由于锚窗格为空，因此首选大小将计算为 0x0。但是，由于现在最大尺寸不受限制，您可以告诉 VBox 让它增长：

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.Tab?>

<?import javafx.scene.layout.VBox?>
<Tab xmlns:fx="http://javafx.com/fxml/">
        <VBox fillWidth="true">
        <fx:include source="test.fxml" VBox.vgrow="ALWAYS" />
        </VBox>
</Tab>

现在test.fxml中定义的内容将填充VBox。 Tab 的行为是让它的内容填充选项卡的整个区域，因此 VBox 将填充选项卡。

当然，一开始为什么要将 test.fxml 包装在 VBox 中并不是很清楚。由于默认情况下选项卡将由其内容填充，为什么不简化为

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.Tab?>

<Tab xmlns:fx="http://javafx.com/fxml/">
        <fx:include source="test.fxml" />
</Tab>

这是一个完整的示例，删除了所有不必要的硬编码大小和冗余布局窗格：

HelloApplication.java:

package org.jamesd.examples.tab;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Scene;
import javafx.stage.Stage;

import java.io.IOException;

public class HelloApplication extends Application {
    @Override
    public void start(Stage stage) throws IOException {
        FXMLLoader fxmlLoader = new FXMLLoader(HelloApplication.class.getResource("hello-view.fxml"));
        Scene scene = new Scene(fxmlLoader.load(), 320, 240);
        stage.setTitle("Hello!");
        stage.setScene(scene);
        stage.show();
    }

    public static void main(String[] args) {
        launch();
    }
}

hello-view.fxml:

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.TabPane?>

<TabPane fx:id="rootNode"
         tabClosingPolicy="UNAVAILABLE"
         xmlns:fx="http://javafx.com/fxml/"
         fx:controller="org.jamesd.examples.tab.AppController" />

AppController.java:

package org.jamesd.examples.tab;

import javafx.fxml.FXML;
import javafx.fxml.FXMLLoader;
import javafx.scene.control.Tab;
import javafx.scene.control.TabPane;

public class AppController {

    @FXML
    private TabPane rootNode ;

    public void initialize() {
        try {
            FXMLLoader fxmlLoader = new FXMLLoader(getClass().getResource("tab_item.fxml"));
            Tab item = fxmlLoader.load();
            item.setText(String.format("%d", 42));
            rootNode.getTabs().add(item);
        }catch (Exception e) {
            e.printStackTrace();
        }
    }
}

tab-item.fxml:

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.Tab?>

<Tab xmlns:fx="http://javafx.com/fxml/">
        <fx:include source="test.fxml" />
</Tab>

和test.fxml：

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.layout.AnchorPane?>

<AnchorPane style="-fx-background-color: red;"/>

Answer 2

好的，所以我在这里至少找到了一个解决方法 -> 只需将 fx:include 与 AnchorsPane 包装起来就可以了：

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.Tab?>

<?import javafx.scene.layout.AnchorPane?>
<Tab xmlns:fx="http://www.w3.org/1999/XSL/Transform">
   <content>
       <AnchorPane>
            <fx:include source="test.fxml" AnchorPane.topAnchor="0" AnchorPane.rightAnchor="0" AnchorPane.leftAnchor="0" AnchorPane.bottomAnchor="0"/>
       </AnchorPane>
   </content>
</Tab>