在 javafx 的 gridpane 中的窗格上放置标签

Question

我想以编程方式在我的窗格中放置标签。我有一个 11x12 的网格窗格。这些字段位于外部字段中。我需要实现的是将我的 MonopolyConstants.FIELD_NAMES[I] 添加到必须位于窗格中的标签中。

到目前为止，我的代码如下所示：

package gui;
import java.net.URL;
import java.util.ResourceBundle;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.Label;
import javafx.scene.layout.GridPane;
import monopoly_import.MonopolyConstants;

/**
* FXML Controller class
*
* @author nj
*/

public class GUIController implements Initializable {

@FXML private GridPane grindPane;
@FXML private Label field0;

/**
 * Initializes the controller class.
 *
 * @param url
 */
@Override
public void initialize(URL url, ResourceBundle rb) {
    GridPane gridPane = new GridPane();
    gridPane.add(new Label("Item listing"), 0, 0);

    for (int i = 0; i < 1; i++) {
        Label field0 = new Label(MonopolyConstants.FIELD_NAMES[i]);
        gridPane.add(field0, i + 1, 0);
    }
}

}

这是 FXML。

    <GridPane fx:id="grindPane" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="600.0" prefWidth="900.0" style="-fx-background-color: #E04134; -fx-background-repeat: stretch; -fx-background-position: center center;" xmlns="http://javafx.com/javafx/9" xmlns:fx="http://javafx.com/fxml/1" fx:controller="gui.GUIController">
  <columnConstraints>
    <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 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 hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
    <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
      <ColumnConstraints />
  </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 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 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>
      <Pane prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: white;">
         <children>
            <Label fx:id="field0" layoutX="24.0" layoutY="17.0" text="START" />
         </children></Pane>
      <Pane prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: f1f1f1;" GridPane.columnIndex="1" />
      <Pane prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: white;" GridPane.columnIndex="2" />
      <Pane prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: f1f1f1;" GridPane.columnIndex="3" />
      <Pane prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: white;" GridPane.columnIndex="4" />
      <Pane prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: f1f1f1;" GridPane.columnIndex="5" />
      <Pane prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: white;" GridPane.columnIndex="6" />
      <Pane prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: f1f1f1;" GridPane.columnIndex="7" />
      <Pane prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: white;" GridPane.columnIndex="8" />
      <Pane prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: f1f1f1;" GridPane.columnIndex="9" />
      <Pane prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: white;" GridPane.columnIndex="9" GridPane.rowIndex="1" />
      <Pane prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: f1f1f1;" GridPane.columnIndex="9" GridPane.rowIndex="2" />
      <Pane prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: white;" GridPane.columnIndex="9" GridPane.rowIndex="3" />
      <Pane prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: f1f1f1;" GridPane.columnIndex="9" GridPane.rowIndex="4" />
      <Pane prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: white;" GridPane.columnIndex="9" GridPane.rowIndex="5" />
      <Pane prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: f1f1f1;" GridPane.columnIndex="9" GridPane.rowIndex="6" />
      <Pane prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: white;" GridPane.columnIndex="9" GridPane.rowIndex="7" />
      <Pane prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: f1f1f1;" GridPane.columnIndex="9" GridPane.rowIndex="8" />
      <Pane prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: white;" GridPane.columnIndex="9" GridPane.rowIndex="9" />
      <Pane prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: white;" GridPane.columnIndex="9" GridPane.rowIndex="11" />
      <Pane prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: f1f1f1;" GridPane.columnIndex="8" GridPane.rowIndex="11" />
      <Pane prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: white;" GridPane.columnIndex="7" GridPane.rowIndex="11" />
      <Pane prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: f1f1f1;" GridPane.columnIndex="6" GridPane.rowIndex="11" />
      <Pane prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: white;" GridPane.columnIndex="5" GridPane.rowIndex="11" />
      <Pane prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: f1f1f1;" GridPane.columnIndex="4" GridPane.rowIndex="11" />
      <Pane prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: white;" GridPane.columnIndex="3" GridPane.rowIndex="11" />
      <Pane prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: f1f1f1;" GridPane.columnIndex="2" GridPane.rowIndex="11" />
      <Pane prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: white;" GridPane.columnIndex="1" GridPane.rowIndex="11" />
      <Pane prefHeight="33.0" prefWidth="60.0" style="-fx-background-color: f1f1f1;" GridPane.rowIndex="11" />
      <Pane prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: f1f1f1;" GridPane.rowIndex="9" />
      <Pane prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: white;" GridPane.rowIndex="8" />
      <Pane prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: f1f1f1;" GridPane.rowIndex="7" />
      <Pane prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: white;" GridPane.rowIndex="6" />
      <Pane prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: f1f1f1;" GridPane.rowIndex="5" />
      <Pane prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: white;" GridPane.rowIndex="4" />
      <Pane prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: f1f1f1;" GridPane.rowIndex="3" />
      <Pane prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: white;" GridPane.rowIndex="2" />
      <Pane prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: f1f1f1;" GridPane.rowIndex="1" />
      <Pane prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: f1f1f1;" GridPane.columnIndex="9" GridPane.rowIndex="10" />
      <Pane prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: white;" GridPane.rowIndex="10" />
      <ImageView fitHeight="161.0" fitWidth="400.0" pickOnBounds="true" preserveRatio="true" GridPane.columnIndex="1" GridPane.columnSpan="8" GridPane.halignment="CENTER" GridPane.rowIndex="1" GridPane.rowSpan="10" GridPane.valignment="CENTER">
         <image>
            <Image url="@../MonopolyLogo.png" />
         </image>
      </ImageView>
   </children>
</GridPane>

在这里您可以看到它在场景生成器中的外观。 Monopoly game

Answer 1

好的，所以首先，如果您在控制器中使用 initialize，则不需要实例化小部件。只需通过 @FXML 使用它们或使用 public 使小部件可访问。如果这些小部件设置了适当的 fx:id，FXMLLoader 将进行实例化。因此，这个 GridPane gridPane = new GridPane(); 将不再是必需的。

作为第二个技巧，以样式表的形式使用 JavaFX 样式概率，避免使用内联样式使 FXML 文件膨胀。我更喜欢为布局的根容器提供样式表引用，例如 stylesheets="@../style.css"。之后，您可以为所需的小部件提供适当的 styleClass 属性。

针对您的问题：有几种可能性可以解决这个问题。

首先，您可以在 FXML 中为 GridPane 的每个单元格添加一个标签。 恕我直言，您不需要为每个单元格设置单独的窗格，尤其是因为您可以使用所需的背景颜色、宽度和高度定义标签。这样做的一个缺点是，您不能直接使用常量。相反，您可以使用 ResourceBundle 直接在 FXML 中访问其字符串。

要从 ResourceBundle 添加标签所需的样式和文本，您可以这样做：

<GridPane ...>
    ...
    <children>
        <Label styleClass="label-even" text="%00"/>
        <Label styleClass="label-odd" text="%01" GridPane.columnIndex="1"/>
        <Label styleClass="label-even" text="%10" GridPane.rowIndex="1"/>
    </children>
</GridPane>

要使捆绑文件（最好命名为 strings_en.properties）工作，您需要 FXMLLoader 告诉他在哪里可以找到它。这是在加载 FXML 文件时完成的，例如：

final FXMLLoader fxmlLoader = new FXMLLoader(getClass().getResource("sample.fxml"),
            ResourceBundle.getBundle("strings", Locale.getDefault()));

捆绑包可能包含这样的字符串（适合我的示例）：

00=START
01=Label of first row and second column
...
10=Label of second column and first row
...

其次，您可以像您已经尝试过的那样以编程方式添加这些内容。在这里您可以使用常量 MonopolyConstants.FIELD_NAMES。

为方便起见，您可以在以下内容上进行剪辑：

public class GUIController implements Initializable {
    @FXML 
    private GridPane gridPane;

    @Override
    public void initialize(URL url, ResourceBundle rb) {
        gridPane.add(new Label(MonopolyConstants.FIELD_NAMES[0]), 0, 0);
        gridPane.add(new Label(MonopolyConstants.FIELD_NAMES[1]), 1, 0);
        gridPane.add(new Label(MonopolyConstants.FIELD_NAMES[2]), 2, 0);
        ...
        gridPane.add(new Label(MonopolyConstants.FIELD_NAMES[39]), 11, 11);
    }
}

我敢肯定，有一种更动态地执行此操作的巧妙方法，但我没有那么多空闲时间；）

在 javafx 的 gridpane 中的窗格上放置标签

Put labels on panes in gridpane in javafx

java

javafx

gridpane