JavaFx - 文本换行不适用于 VBox 内的复选框

Question

我有几个 UI 元素，我想垂直堆叠在面板的中心，所有元素都在中心的左边缘对齐。我试着用 VBox 来做这件事，它一直有效，直到我添加了一个文本太长的项目；它总是用省略号截断文本，我无法让它将文本换行到下一行。我在复选框上将 wrapText 参数设置为 true，但它似乎不尊重它。我试过在复选框和它所在的 vbox 上设置 perfWidth 和 maxWidth，但似乎没有任何效果。谁能告诉我我做错了什么？

截图:

文本环绕.fxml

<?import java.net.*?>
<?import javafx.geometry.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.text.*?>
<?import javafx.scene.control.ToggleGroup?>


<VBox xmlns:fx="http://javafx.com/fxml" maxWidth="100"
    prefHeight="200" prefWidth="300" alignment="BASELINE_CENTER" spacing="30">
    
    <VBox alignment="CENTER" maxWidth="100" prefWidth="100">
    <VBox spacing="10" style=" -fx-border-color:black; -fx-border-width: 1; -fx-border-style: solid;" alignment="BASELINE_LEFT"
        >

        <padding>
            <Insets top="0" right="0" bottom="10" left="5"/>
        </padding>
        
        <RadioButton text="Option 1">
            <toggleGroup>
                <ToggleGroup fx:id="group"/>
            </toggleGroup>
            <selected>true</selected>
        </RadioButton>
    
        <RadioButton text="Option 2">
            <toggleGroup>
                <fx:reference source="group"/>
            </toggleGroup>    
        </RadioButton>
    </VBox>
    
    <CheckBox text="My Long Textbox Text" selected="true" wrapText="true">
    </CheckBox>
    
    </VBox>
     
</VBox>

TextWrap.java

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

public class TextWrap extends Application
{

    @Override
    public void start(Stage stage) throws Exception
    {
        Parent root = FXMLLoader.load(getClass().getResource("textwrap.fxml"));
        
        Scene scene = new Scene(root, 300, 275);
    
        stage.setTitle("Text Wrap");
        stage.setScene(scene);
        stage.show();
    }

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

}

编辑 - 正如@jewelsea 在下面指出的那样，问题是根 VBox 中的 BASELINE_CENTER；将其更改为居中消除了截断问题。这产生了意想不到的副作用，使 radio 盒周围的外部延伸得比我喜欢的更远:

通过添加

<maxWidth><Control fx:constant="USE_PREF_SIZE" /></maxWidth>

到内部 VBOX 我能够更正这个:

我还发现，如果由于某种原因我与 BASELINE_CENTER 结婚，我仍然可以通过添加

<minWidth><Control fx:constant="USE_PREF_SIZE" /></minWidth>

选中复选框以获得相同的效果。

Answer 1

这是我想出来的，试试吧，看看是不是你想要的。

您可能需要更改一些内容才能达到最终所需的布局，但希望这能解决您眼前的包装问题。

我认为外部 VBox 上的 BASELINE_CENTER 对齐令人困惑，但我更改了一些其他内容，所以它可能是其他内容。

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

<?import javafx.geometry.Insets?>
<?import javafx.scene.control.CheckBox?>
<?import javafx.scene.control.RadioButton?>
<?import javafx.scene.control.ToggleGroup?>
<?import javafx.scene.layout.VBox?>

<VBox alignment="CENTER" prefHeight="200.0" prefWidth="300.0" xmlns="http://javafx.com/javafx/17"
      xmlns:fx="http://javafx.com/fxml/1">
    <children>

        <VBox maxWidth="100.0" prefWidth="100.0">
            <VBox alignment="BASELINE_LEFT" spacing="10"
                  style=" -fx-border-color:black; -fx-border-width: 1; -fx-border-style: solid;">

                <padding>
                    <Insets bottom="10" left="5" right="0" top="0"/>
                </padding>

                <RadioButton text="Option 1">
                    <toggleGroup>
                        <ToggleGroup fx:id="group"/>
                    </toggleGroup>
                    <selected>true</selected>
                </RadioButton>

                <RadioButton text="Option 2">
                    <toggleGroup>
                        <fx:reference source="group"/>
                    </toggleGroup>
                </RadioButton>
            </VBox>

            <CheckBox selected="true" text="My Long Textbox Text" wrapText="true">
            </CheckBox>

        </VBox>
    </children>
</VBox>