如何使用 javafx/fxml 在 HBox/VBox 中按比例放置元素

Question

我尝试将按钮和文本均匀地放置在窗口中。 我将 FXML 用于 javafx 项目：

<VBox>
  <HBox>
        <TextField promptText="Text1" prefWidth="60" alignment="CENTER_LEFT">
            <padding>
                <Insets left="10" right="30"/>
            </padding>
        </TextField>
        <Label text="Some text"/>
        <TextField promptText="Text2" prefWidth="60" alignment="CENTER_RIGHT">
            <padding>
                <Insets left="30" right="10"/>
            </padding>
        </TextField>
    </HBox>
</VBox>

我使用padding ， 'alignment' 属性但没有任何帮助，元素是偏移的：

如何在窗口中正确放置元素？

Answer 1

你需要：

1. 确保VBox填充窗口的宽度
   • （您的代码片段不指示它是否在另一个容器中）。
2. 确保HBox填充VBox的宽度
   • 将fillWidth=“true”添加到VBox元素。
3. 让每个组件在HBox中成长
   • 将HBox.hgrow = “ALWAYS”和maxWidth = “Infinity”添加到文本字段和标签。
   • 删除填充和插图，以及现有的首选宽度。

这是一个例子：

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

<?import javafx.scene.control.Label?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.layout.*?>
<VBox fillWidth="true" xmlns:fx="http://javafx.com/fxml">
    <HBox>
        <TextField promptText="Text1" maxWidth="Infinity" HBox.hgrow="ALWAYS"/>
        <Label alignment="CENTER" text="Some text" maxWidth="Infinity" HBox.hgrow="ALWAYS"/>
        <TextField promptText="Text2" maxWidth="Infinity" HBox.hgrow="ALWAYS"/>
    </HBox>
</VBox>

和申请文件：

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(), 600, 400);
        stage.setTitle("Hello!");
        stage.setScene(scene);
        stage.show();
    }

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