JavaFX TilePane不包装文本或显示省略号字符串

I am using a TilePane which contains a GridPane inside it and i have created it using SceneBuilder and FXML.The problem is that TilePane works very strange as the title is saying:

我正在使用一个TilePane,里面包含一个GridPane,我使用SceneBuilder和FXML创建它。问题是TilePane工作非常奇怪,标题是:

When the text is too big i have serious problems with the layouts cause the TilePane isn't wrapping the text or showing Ellipsis String so when i resize the window all the layouts are failing into the app.

当文本太大时,布局会出现严重问题导致TilePane没有包装文本或显示省略号字符串,因此当我调整窗口大小时,所有布局都无法进入应用程序。

Why this is happening with TilePane and is not working as expected inside a BorderPane?

为什么TilePane会发生这种情况,并且在BorderPane中没有按预期工作?

ScreenShot:

Here is the fxml code:

这是fxml代码:

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

<?import javafx.scene.control.ContextMenu?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.control.TitledPane?>
<?import javafx.scene.control.Tooltip?>
<?import javafx.scene.layout.BorderPane?>
<?import javafx.scene.layout.ColumnConstraints?>
<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.layout.RowConstraints?>
<?import javafx.scene.layout.StackPane?>

<fx:root styleClass="smartController" type="StackPane" xmlns="http://javafx.com/javafx/8.0.60" xmlns:fx="http://javafx.com/fxml/1">
   <children>
      <BorderPane fx:id="mainBorder" style="-fx-background-color: transparent; -fx-border-color: red;">
         <top>
            <TitledPane fx:id="titledPane" alignment="CENTER" contentDisplay="CENTER" graphicTextGap="0.0" text="I am The TilePane and i don't like wrapping the text!" wrapText="true" BorderPane.alignment="CENTER">
               <content>
                  <GridPane fx:id="topGrid" gridLinesVisible="true" hgap="5.0" style="-fx-background-color: rgb(0,0,0,0.85);;">
                    <columnConstraints>
                      <ColumnConstraints hgrow="SOMETIMES" percentWidth="70.0" />
                      <ColumnConstraints hgrow="SOMETIMES" minWidth="40.0" percentWidth="15.0" />
                        <ColumnConstraints hgrow="SOMETIMES" percentWidth="15.0" />
                    </columnConstraints>
                    <rowConstraints>
                      <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
                    </rowConstraints>
                     <children>
                        <TextField fx:id="pageField" alignment="CENTER" maxHeight="-Infinity" maxWidth="65.0" minHeight="-Infinity" minWidth="-Infinity" prefHeight="25.0" prefWidth="50.0" GridPane.columnIndex="1" GridPane.halignment="CENTER" GridPane.valignment="CENTER">
                           <tooltip>
                              <Tooltip text="current page" />
                           </tooltip>
                           <contextMenu>
                              <ContextMenu />
                           </contextMenu>
                        </TextField>
                     </children>
                  </GridPane>
               </content>
            </TitledPane>
         </top>
      </BorderPane>
   </children>
</fx:root>

1 个解决方案

#1

By default TitledPane has a minWidth based on the text. For it's parent to resize the node to a smaller size, you have to manually assign a value:

默认情况下,TitledPane具有基于文本的minWidth。如果父级要将节点的大小调整为较小的大小,则必须手动分配值:

<TitledPane minWidth="0" fx:id="titledPane" alignment="CENTER" contentDisplay="CENTER" graphicTextGap="0.0" text="I am The TilePane and i don't like wrapping the text!" wrapText="true" BorderPane.alignment="CENTER">
   ...
</TitledPane>

This can be set in the Layout section of the inspector of the TitledPane (Min Width).

这可以在TitledPane(最小宽度)的检查器的“布局”部分中设置。

As for actually wrapping the text:

至于实际包装文本:

The title part of the TitledPane is simply not large enough to allow multiple lines by default. You could change this using a css style sheet:

TitledPane的标题部分根本不够大,默认情况下不允许多行。您可以使用css样式表更改此设置:

#titledPane>.title {
    -fx-pref-height: 50; /* increase available area */
    -fx-alignment: top-center;
    -fx-padding: 4 4 4 30; /* increase left padding to align text */
}

#titledPane>.title>.arrow-button {
    -fx-translate-x: -20; /* move back arrow, which is also subject to the padding */
}

#1