具有多行、背景颜色和居中文本的 JavaFX 表

Question

在 JavaFX TableView 中，我该怎么做

• 创建多行列？
• 将其内容居中？
• 并为每条（整条）行设置背景颜色？

我设法使用自定义 CellFactory 创建了一个多行列。我也知道setAlignment(Pos.CENTER) 和setTextAlignment(TextAlignment.CENTER) 使文本居中。但是，我的示例应用程序中的文本没有正确地每行居中。此外，我没有设法在Text 对象上设置背景颜色。现在我的方法是为每一行添加一个Pane，效果很好。但是如何让Pane 填满列的整个宽度和高度的 1/3？

作为一个起点，这就是我期望的代码（虽然，我知道它没有做我想要的）：

    multiCol.setCellFactory(new Callback<TableColumn<Person, Person>, TableCell<Person, Person>>() {
      @Override public TableCell<Person, Person> call(TableColumn<Person, Person> multiCol) {
        return new TableCell<Person, Person>() {
           private Group grp = null;

           @Override public void updateItem(final Person person, boolean empty) {
              super.updateItem(person, empty);

              this.setAlignment(Pos.CENTER);

              if (!isEmpty()) {
                 Text text = new Text(person.getFirstName());
                 text.setX(0);
                 text.setY(0);
                 text.setTextAlignment(TextAlignment.CENTER); // Center text?

                 Pane pane = new Pane();
                 pane.setStyle("-fx-background-color: #66BB66;");
                 pane.setLayoutX(0);
                 pane.setLayoutY(0);
                 pane.setPrefHeight(20);
                 pane.setPrefWidth(this.prefWidth(-1)); // Column width?

                 // -----

                 Text text2 = new Text(person.getLastName());
                 text2.setX(0);
                 text2.setY(20);
                 text2.setTextAlignment(TextAlignment.CENTER); // Center text?

                 Pane pane2 = new Pane();
                 pane2.setStyle("-fx-background-color: #79A8D8;");
                 pane2.setLayoutX(0);
                 pane2.setLayoutY(20);
                 pane2.setPrefHeight(20);
                 pane2.setPrefWidth(this.prefWidth(-1)); // Column width?

                 // -----

                 Text text3 = new Text(person.getEmail());
                 text3.setX(0);
                 text3.setY(40);
                 text3.setTextAlignment(TextAlignment.CENTER); // Center text?

                 Pane pane3 = new Pane();
                 pane3.setStyle("-fx-background-color: #FF8888;");
                 pane3.setLayoutX(0);
                 pane3.setLayoutY(40);
                 pane3.setPrefHeight(20);
                 pane3.setPrefWidth(this.prefWidth(-1)); // Column width?

                 // -----

                 Group grp = new Group();

                 grp.getChildren().add(pane);
                 grp.getChildren().add(text);

                 grp.getChildren().add(pane2);
                 grp.getChildren().add(text2);

                 grp.getChildren().add(pane3);
                 grp.getChildren().add(text3);

                 setGraphic(grp);

                 setStyle("-fx-padding: 0 0 0 0;");
              }
            }
          };
        }
      });

我期待这样的输出：

如需完整的可编译代码示例，请查看this pastebin。

Answer 1

使用合适的布局窗格（例如VBox），并将Labels 添加到其中。您可以使用VBox.setHgrow(...) 配置标签以填充VBox 的宽度。您还需要设置标签的最大宽度以允许其增长。

顺便说一句，每次调用updateItem(...) 方法时都重新创建控件并不是一个好习惯。创建一次，然后使用所需数据在 updateItem(...) 方法中配置它们。

例子：

    TableColumn<Person, Person> multiCol = new TableColumn<>("Multiline");
    multiCol.setCellValueFactory(cellData -> 
        new ReadOnlyObjectWrapper<Person>(cellData.getValue()));
    multiCol.setCellFactory(column -> new TableCell<Person, Person>() {

        private VBox graphic ;
        private Label firstNameLabel ;
        private Label lastNameLabel ;
        private Label emailLabel ;

        // Anonymous constructor:
        {
            graphic = new VBox();
            firstNameLabel = createLabel("#66BB66");
            lastNameLabel = createLabel("#79A8D8");
            emailLabel = createLabel("#FF8888");
            graphic.getChildren().addAll(firstNameLabel, 
                    lastNameLabel, emailLabel);
            setContentDisplay(ContentDisplay.GRAPHIC_ONLY);
        }

        private final Label createLabel(String color) {
            Label label = new Label();
            VBox.setVgrow(label, Priority.ALWAYS);
            label.setMaxWidth(Double.MAX_VALUE);
            label.setStyle("-fx-background-color: "+color+" ;");
            label.setAlignment(Pos.CENTER);
            return label ;
        }

        @Override
        public void updateItem(Person person, boolean empty) {
            if (person == null) {
                setGraphic(null);
            } else {
                firstNameLabel.setText(person.getFirstName());
                lastNameLabel.setText(person.getLastName());
                emailLabel.setText(person.getEmail());
                setGraphic(graphic);
            }
        }
    });