如何在JavaFX中实现元素内联布局？

你当前使用的VBox是垂直布局容器，所有子元素会自动垂直排列，因此Label、TextField和Button会分别显示在不同行。要让它们处于同一行，只需用HBox（水平布局容器）包裹需要同行的元素，同时可以调整布局参数优化显示效果。

修改后的FXML代码如下：

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

<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.layout.VBox?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.Priority?>

<VBox alignment="CENTER" spacing="20.0" xmlns:fx="http://javafx.com/fxml"
      fx:controller="com.example.HelloController">
    <padding>
        <Insets bottom="20.0" left="20.0" right="20.0" top="20.0"/>
    </padding>
    
    <!-- Input 行：用 HBox 包裹同行元素 -->
    <HBox spacing="10.0" alignment="CENTER_LEFT">
        <Label text="Input file" />
        <TextField fx:id="inputName" maxWidth="333" />
        <!-- 让 TextField 占满 HBox 剩余空间 -->
        <HBox.hgrow>
            <Priority value="ALWAYS" />
        </HBox.hgrow>
        <Button text="Choose" onAction="#chooseInputFile"/>
    </HBox>
    
    <!-- Output 行：同样用 HBox 包裹 -->
    <HBox spacing="10.0" alignment="CENTER_LEFT">
        <Label text="Output file" />
        <TextField fx:id="outputName" maxWidth="333" />
        <HBox.hgrow>
            <Priority value="ALWAYS" />
        </HBox.hgrow>
        <Button text="Choose" onAction="#chooseOutputFile"/>
    </HBox>
</VBox>

关键说明：

• HBox的spacing属性控制同行元素之间的间距，避免元素挤在一起
• 添加HBox.hgrow并设置Priority.ALWAYS，让TextField自动填充HBox的剩余水平空间，布局更自适应
• HBox的alignment="CENTER_LEFT"让元素在垂直方向居中对齐，视觉效果更协调

内容的提问来源于stack exchange，提问作者thealtofwar