Как четко выровнять объекты в JavaFX

ProgramBox

Как четко выровнять объекты в JavaFX

Post author:admin
Запись опубликована:20 ноября, 2022
Post category:Вопросы по программированию

#java #css #javafx

Вопрос:

Я должен выполнить некоторую базовую работу с java FX, но у меня проблема, и я не могу с этим справиться. Во-первых, мой целевой макет:

и то, что я сделал, это создал 2 панели сетки и попытался выровнять их друг с другом. Сначала казалось, что все в порядке. Но когда я написал остальное, это стало казаться очень плохим, и я начал ничего не выравнивать. Было довольно просто создать меню нижней кнопки. Но я не мог выровнять текстовые поля и метки, несмотря на все, что я делал. Вот мой код `

 addButton = new Button("Add");
firstButton = new Button("First");
nextButton = new Button("Next");
previousButton = new Button("Previous");
lastButton = new Button("Last");
updateByIdButton = new Button("Update By Id");
searchByIdButton = new Button("Search By Id");
cleanButton = new Button("Clean textFields");

GridPane root = new GridPane();

HBox bottomMenu = new HBox();

bottomMenu.getChildren().addAll(addButton, firstButton, nextButton, previousButton, lastButton, updateByIdButton, searchByIdButton, cleanButton);
bottomMenu.setSpacing(10);
BorderPane border = new BorderPane();
bottomMenu.setPadding(new Insets(10, 10, 10, 20));
border.setBottom(bottomMenu);

GridPane labels = new GridPane();
border.setCenter(root);

labels.setVgap(8);
labels.setHgap(5);
labels.setPadding(new Insets(10, 10, 10, 80));
Label idLabel = new Label("ID : ");
GridPane.setConstraints(idLabel, 0, 4);
Label nameLabel = new Label("Name : ");
GridPane.setConstraints(nameLabel, 0, 6);
Label streetLabel = new Label("Street : ");
GridPane.setConstraints(streetLabel, 0, 10);
Label cityLabel = new Label("City : ");
GridPane.setConstraints(cityLabel, 0, 13);
Label searchUpdateLabel = new Label("Search/Update ID : ");
GridPane.setConstraints(searchUpdateLabel, 19, 3);
Label genderLabel = new Label("Gender : ");
GridPane.setConstraints(genderLabel, 20, 6);
Label zipLabel = new Label("Zip : ");
GridPane.setConstraints(zipLabel, 25, 6);
labels.getChildren().addAll(idLabel, nameLabel, streetLabel, cityLabel, searchUpdateLabel, genderLabel, zipLabel);
labels.getColumnConstraints().add(new ColumnConstraints(50));
labels.getColumnConstraints().add(new ColumnConstraints(400));
root.getChildren().add(labels);

GridPane fields = new GridPane();
fields.setPadding(new Insets(10, 10, 10, 80));
fields.setVgap(10);
TextField idField = new TextField();
idField.setDisable(true);
idField.setMaxWidth(50);
GridPane.setConstraints(idField, 1, 3);
TextField nameField = new TextField();
GridPane.setConstraints(nameField, 1, 5);
TextField streetField = new TextField();
GridPane.setConstraints(streetField, 1, 6);
TextField cityField = new TextField();
GridPane.setConstraints(cityField, 1, 7);
TextField zipField = new TextField();
GridPane.setConstraints(zipField, 16, 6);
TextField genderField = new TextField();
GridPane.setConstraints(genderField, 21, 6);
TextField searchUpdateField = new TextField();
GridPane.setConstraints(searchUpdateField, 21, 3);
fields.getChildren().addAll(idField, nameField, streetField, cityField, zipField, genderField, searchUpdateField);
fields.getColumnConstraints().add(new ColumnConstraints(50));
fields.getColumnConstraints().add(new ColumnConstraints(400));
root.getChildren().add(fields);

Кроме того, мои результаты выглядят так, когда я пытаюсь выровнять эти вещи, используя GridPane.setConstraints() или добавляя новые столбцы.

1. Используйте SceneBuilder и FXML . Это сэкономит много времени.

2. add(Node child, int columnIndex, int rowIndex, int colspan, int rowspan) станет вашим другом. Посмотрите здесь ;

3. Вы должны использовать единую панель сетки как для меток, так и для полей.

Ответ №1:

Похоже, вы рассматриваете панель сетки как одномерный объект, хотя на самом деле он двумерный. Все ваши элементы в вашей цели не выстраиваются в линию, как сетка, но можно получить что-то очень близкое к цели, используя только GridPane, и вам нужно настроить его с некоторыми элементами, охватывающими несколько столбцов:

 public class GridPaneSample extends GridPane {

public GridPaneSample() {
    add(new Label("ID"), 0, 0);
    Label searchIdLabel = new Label("Search/Update ID");
    TextField searchIdField = new TextField();
    TextField nameField = new TextField("Merve");
    TextField streetField = new TextField("Adnan Menderes");
    TextField cityField = new TextField("Ayden");
    add(searchIdLabel, 2, 0);
    add(new Label("Name"), 0, 1);
    add(new Label("Street"), 0, 2);
    add(new Label("City"), 0, 3);
    add(new Label("Gender"), 3, 3);
    add(new Label("Zip"), 5, 3);
    add(new TextField("1"), 1, 0);
    add(searchIdField, 3, 0);
    add(nameField, 1, 1);
    add(streetField, 1, 2);
    add(cityField, 1, 3);
    add(new TextField("F"), 4, 3);
    add(new TextField("1234"), 6, 3);
    setColumnSpan(searchIdLabel, 2);
    setColumnSpan(searchIdField, 4);
    setColumnSpan(nameField, 6);
    setColumnSpan(streetField, 6);
    setColumnSpan(cityField, 2);
    setVgap(4);
    setHgap(4);
    ColumnConstraints col50 = new ColumnConstraints(50);
    getColumnConstraints()
            .addAll(col50, new ColumnConstraints(70), new ColumnConstraints(100), col50, new ColumnConstraints(30),
                    new ColumnConstraints(20), col50);
    setPadding(new Insets(10, 0, 0, 60));
}
}

Это становится немного уродливым и не совсем подходит для использования GridPane. Вероятно, проще просто использовать VBox, а затем поместить каждую строку в HBox. Вы можете выровнять первое текстовое поле «столбец», поместив первую метку в каждой строке в отдельный HBox и установив минимальную ширину этого HBox одинаковой для каждой строки. Вот так:

 public class BoxesSample extends VBox {

public BoxesSample() {
    HBox row1 = new HBox(6, fixedSpaceLabel("ID"), sizedTextField("1", 60), new Label("Search/Update ID"),
                         sizedTextField("", 154));
    HBox row2 = new HBox(6, fixedSpaceLabel("Name"), sizedTextField("Merve", 320));
    HBox row3 = new HBox(6, fixedSpaceLabel("Street"), sizedTextField("Adnan Menderes", 320));
    HBox row4 = new HBox(6, fixedSpaceLabel("City"), sizedTextField("Aydin", 160), new Label("Gender"),
                         sizedTextField("F", 20), new Label("Zip"), sizedTextField("1234", 60));
    getChildren().addAll(row1, row2, row3, row4);
    setPadding(new Insets(10, 0, 0, 60));
    setSpacing(4);
}

private HBox fixedSpaceLabel(String labelText) {
    HBox results = new HBox(new Label(labelText));
    results.setMinWidth(50);
    results.setAlignment(Pos.CENTER_LEFT);
    return results;
}

private TextField sizedTextField(String initialValue, double width) {
    TextField results = new TextField(initialValue);
    results.setMinWidth(width);
    results.setMaxWidth(width);
    return results;
}
}

Ответ №2:

Вот FXML . Может быть, вы можете перевести это в чистый код. Он разбивается на a VBox как корень. VBox Имеет a GridPane и an HBox для дочерних элементов.

FXML

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

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


<VBox alignment="CENTER" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="168.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1">
   <children>
      <GridPane hgap="4.0" maxHeight="-Infinity" maxWidth="-Infinity" prefWidth="400.0">
        <columnConstraints>
            <ColumnConstraints hgrow="SOMETIMES" maxWidth="-Infinity" minWidth="-Infinity" />
            <ColumnConstraints hgrow="SOMETIMES" />
            <ColumnConstraints hgrow="SOMETIMES" />
          <ColumnConstraints hgrow="SOMETIMES" />
            <ColumnConstraints hgrow="SOMETIMES" maxWidth="-Infinity" minWidth="-Infinity" />
            <ColumnConstraints hgrow="SOMETIMES" minWidth="-Infinity" />
          <ColumnConstraints hgrow="SOMETIMES" />
            <ColumnConstraints hgrow="SOMETIMES" minWidth="-Infinity" />
            <ColumnConstraints hgrow="SOMETIMES" />
            <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
            <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
            <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
            <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
        </columnConstraints>
        <rowConstraints>
            <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
          <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
          <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
          <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
        </rowConstraints>
         <children>
            <Label text="ID" />
            <TextField GridPane.columnIndex="1" />
            <TextField GridPane.columnIndex="5" GridPane.columnSpan="2147483647" />
            <Label text="Search/Updated ID" GridPane.columnIndex="4" />
            <Label text="Name" GridPane.rowIndex="1" />
            <Label text="Street" GridPane.rowIndex="2" />
            <Label text="City" GridPane.rowIndex="3" />
            <TextField maxWidth="1.7976931348623157E308" GridPane.columnIndex="1" GridPane.columnSpan="2147483647" GridPane.rowIndex="1" />
            <TextField GridPane.columnIndex="1" GridPane.columnSpan="2147483647" GridPane.rowIndex="2" />
            <TextField GridPane.columnIndex="1" GridPane.columnSpan="4" GridPane.rowIndex="3" />
            <Label text="Gender" GridPane.columnIndex="5" GridPane.rowIndex="3" />
            <Label text="Zip" GridPane.columnIndex="7" GridPane.rowIndex="3" />
            <TextField GridPane.columnIndex="6" GridPane.rowIndex="3" />
            <TextField GridPane.columnIndex="8" GridPane.columnSpan="2147483647" GridPane.rowIndex="3" />
         </children>
         <VBox.margin>
            <Insets />
         </VBox.margin>
         <padding>
            <Insets bottom="20.0" />
         </padding>
      </GridPane>
      <HBox maxWidth="-Infinity" spacing="3.0">
         <children>
            <Button mnemonicParsing="false" text="Add" />
            <Button mnemonicParsing="false" text="First" />
            <Button mnemonicParsing="false" text="Next" />
            <Button mnemonicParsing="false" text="Previous" />
            <Button mnemonicParsing="false" text="Last" />
            <Button mnemonicParsing="false" text="UpdateByID" />
            <Button mnemonicParsing="false" text="SerachByID" />
            <Button mnemonicParsing="false" text="Cean textFields" />
         </children>
      </HBox>
   </children>
</VBox>