Question

我想在一个问题上寻求帮助。我想在一列中移动两个单选按钮，这样它们将只占用上面文本框所需的空间。我怎样才能做到这一点？以下是当前不正确版本的代码和屏幕截图：

如果您不是100％确定，请不要将我的问题标记为重复，好吗？将你的问题标记作为其他问题的副本并不好，转到另一个问题并发现只有普通的事情是它们都是关于编程的。

 GridPane formGrid = new GridPane();
    formGrid.setPadding(new Insets(5,5,5,5));
    formGrid.setVgap(6);
    formGrid.setHgap(4);

    //first row
    Label nameLabel = new Label("Name");
    GridPane.setConstraints(nameLabel, 0, 0);

    TextField nameInput = new TextField();
    GridPane.setConstraints(nameInput, 1, 0);

    Label ageLabel = new Label("Age");
    GridPane.setConstraints(ageLabel, 2, 0);

    TextField ageInput = new TextField();
    GridPane.setConstraints(ageInput, 3, 0);

    //secondRow
    Label colourLabel = new Label("Colour");
    GridPane.setConstraints(colourLabel, 0, 1);

    TextField colourInput = new TextField();
    GridPane.setConstraints(colourInput, 1, 1);

    Label genderLabel = new Label("Gender");
    GridPane.setConstraints(genderLabel, 2, 1);

    ToggleGroup pickGender = new ToggleGroup();

    RadioButton pickMale = new RadioButton("Male");
    pickMale.setToggleGroup(pickGender);
    pickMale.setSelected(true);
    GridPane.setConstraints(pickMale, 3, 1, 1, 1);

    RadioButton pickFemale = new RadioButton("Female");
    pickFemale.setToggleGroup(pickGender);
    GridPane.setConstraints(pickFemale, 4, 1, 1, 1);


    //third row
    Label typeLabel = new Label("Type");
    GridPane.setConstraints(typeLabel, 0, 2);
    //combobox
    ComboBox<String> typeBox = new ComboBox<>();
    GridPane.setConstraints(typeBox, 1, 2);

    Label breedLabel = new Label("Breed");
    GridPane.setConstraints(breedLabel, 2, 2);

    TextField breedInput = new TextField();
    GridPane.setConstraints(breedInput, 3, 2);

    //fourth row
    Label categoryLabel = new Label("Category: ");
    GridPane.setConstraints(categoryLabel, 0, 3);

    ToggleGroup pickCategory = new ToggleGroup();

    RadioButton pickLost = new RadioButton("Lost");
    pickLost.setToggleGroup(pickCategory);
    pickLost.setSelected(true);
    GridPane.setConstraints(pickLost, 1, 3);

    RadioButton pickFound = new RadioButton("Found");
    pickLost.setToggleGroup(pickCategory);
    GridPane.setConstraints(pickFound, 2, 3);

    RadioButton pickAdoption = new RadioButton("Adoption");
    pickLost.setToggleGroup(pickCategory);
    GridPane.setConstraints(pickAdoption, 3, 3);

    //fifth row
    Label descriptionLabel = new Label("Description");
    GridPane.setConstraints(descriptionLabel, 0, 4);

    TextArea descriptionInput = new TextArea();
    GridPane.setConstraints(descriptionInput, 1, 4, 2, 1);



    formGrid.getChildren().addAll(nameLabel, nameInput, ageLabel, ageInput);
    formGrid.getChildren().addAll(colourLabel, colourInput, genderLabel, pickMale, pickFemale);
    formGrid.getChildren().addAll(typeLabel, typeBox, breedLabel, breedInput, categoryLabel);
    formGrid.getChildren().addAll(pickLost, pickFound, pickAdoption, descriptionLabel, descriptionInput);

Answer 1

反过来想想它。＆＃34;女性＆＃34;单选按钮位于第4列，因此它位于第3列中任何内容的右侧。第3列被强制为足以容纳两个文本字段，这就是迫使该单选按钮向右移动的原因。如果您希望文本字段跨越与两个单选按钮相同的水平空间，请让它们同时使用单选按钮占据的列：即让文本字段跨越第3列和第4列。

TextField ageInput = new TextField();
GridPane.setConstraints(ageInput, 3, 0, 2, 1);

TextField breedInput = new TextField();
GridPane.setConstraints(breedInput, 3, 2, 2, 1);

现在第3列和第4列包含这两个文本字段，第3列包含＆＃34;男性＆＃34;单选按钮，第4列包含＆＃34;女性＆＃34;单选按钮。

我不确定您发布的所有内容是否都是整个表单，但您可能还希望增加文本区域的列范围以使其正常工作：

GridPane.setConstraints(descriptionInput, 1, 4, 4, 1);

我得到了这些改变

（如果它对您很重要，您可以通过设置＆＃34;采用＆＃34;的列扩展来避免将＃34; Female＆＃34;复选框推向右侧。复选框为2。）

另一个选项是（从原始代码开始）将两个单选按钮包裹在HBox中，并将HBox放在网格窗格而不是单选按钮中：

RadioButton pickMale = new RadioButton("Male");
pickMale.setToggleGroup(pickGender);
pickMale.setSelected(true);

RadioButton pickFemale = new RadioButton("Female");
pickFemale.setToggleGroup(pickGender);

HBox genderButtons = new HBox(4, pickMale, pickFemale);
GridPane.setConstraints(genderButtons, 3, 1);

// ...

formGrid.getChildren().addAll(colourLabel, colourInput, genderLabel, genderButtons);

但是，我更喜欢以前的方法。（您的里程可能会有所不同。）

将2个radiobutton放在一列而不重叠JavaFX

1 个答案: