JavaFX TableView 文本对齐

Posted 2023-02-21

【中文标题】JavaFX TableView 文本对齐

【英文标题】：JavaFX TableView text alignment

【发布时间】：2012-11-07 11:09:30

【问题描述】：

正如您在图片中看到的，每个列的文本对齐方式设置为左对齐。有什么办法可以改变这个吗？到目前为止，我已经在我的 CSS 文件中尝试过：

#Cols
    text-align: right;

我也试过了：

#Cols
    -fx-text-alignment: right;

有谁知道如何将对齐方式更改为正确的？

【问题讨论】：

是 ID 还是 CLASS ？你也可以试试text-align: right !important;

@HamZaDzCyber​​DeV 应该是我使用的 id：col.setId("Cols");

【参考方案1】：

所有表格列的对齐方式：

从JavaFX-8开始，可以使用新定义的CSS选择器table-column，

#my-table .table-column 
  -fx-alignment: CENTER-RIGHT;

对于 JavaFX-2， 为此，定义一个 CSS 选择器：

#my-table .table-cell 
    -fx-alignment: CENTER-RIGHT;
     /* The rest is from caspian.css */

    -fx-skin: "com.sun.javafx.scene.control.skin.TableCellSkin";
    -fx-padding: 0.166667em; /* 2px, plus border adds 1px */

    -fx-background-color: transparent;
    -fx-border-color: transparent -fx-table-cell-border-color transparent transparent;
    -fx-border-width: 0.083333em; /* 1 */
    -fx-cell-size: 2.0em; /* 24 */
    -fx-text-fill: -fx-text-inner-color;

并设置 tableview 的 id。

tableView.setId("my-table");

单个表格列的对齐方式：

从JavaFX-8开始，可以直接将样式应用到TableColumn，

firstTextCol.setStyle( "-fx-alignment: CENTER-RIGHT;");

或者用css，

firstTextCol.getStyleClass().add( "custom-align");

在哪里

.custom-align  
  -fx-alignment: center-right; 
 

对于 JavaFX-2， 要将不同的对齐方式应用于不同的列，您需要为该列设置单元工厂。例如，假设表中的第一列应左对齐，而其他列使用表的默认对齐方式（在您的情况下为 CENTER-RIGHT）。

firstTextCol.setCellFactory(new Callback<TableColumn, TableCell>() 
            public TableCell call(TableColumn p) 
                TableCell cell = new TableCell<Person, String>() 
                    @Override
                    public void updateItem(String item, boolean empty) 
                        super.updateItem(item, empty);
                        setText(empty ? null : getString());
                        setGraphic(null);
                    

                    private String getString() 
                        return getItem() == null ? "" : getItem().toString();
                    
                ;

                cell.setStyle("-fx-alignment: CENTER-LEFT;");
                return cell;
            
        );

【讨论】：

遗憾的是这并没有改变它：S

这成功了！我将如何制作它以使图例（我图片中的测试）不动？

【参考方案2】：

我用过

cell.setAlignment(Pos.CENTER_RIGHT);

而不是

cell.setStyle("-fx-alignment: CENTER-LEFT;");

但是如果有这方面的 CSS，我不能将 fx:id 放在一个列上，然后将它的对齐方式放在一个 CSS 文件中吗？上面有很多代码只是为了设置列对齐。

【讨论】：

我同意您应该能够为列设置 css id 或类，然后使用适当的 css 选择器选择单元格进行样式设置 - 但它不起作用（我认为这是一个错误）。我为此创建了一个问题跟踪器条目：RT-29381 Style classes set on table columns are ignored

【参考方案3】：

我试过了，效果很好

@FXML private TableColumn<BookingData,String>colClientMobile;

//Some code
colClientMobile.setCellFactory(new Callback<TableColumn<BookingData, String>, TableCell<BookingData, String>>() 
        @Override
        public TableCell<BookingData, String> call(TableColumn<BookingData, String> param) 
            return new TableCellFormat();
        
    );

private class TableCellFormat extends TableCell<BookingData, String>
    @Override
    protected void updateItem(String item, boolean empty) 
        super.updateItem(item, empty); 
        this.setText(item);
        this.setAlignment(Pos.CENTER_RIGHT);
    

【讨论】：

如果我尝试将此代码与可编辑列一起使用，它不起作用。编辑作品或对齐。您能否提供一个代码示例以使可编辑列的文本与 pos.CENTER_RIGHT

对齐

【参考方案4】：

即使这已经两年了，这里还有另一个答案。对于每个表格列都存在一个默认的 css 样式类.table-column，因此如果您想更改整个表格列以对齐居右，只需将其放入样式表或内联样式中：

.table-column 
  -fx-alignment: CENTER_RIGHT;

如果你有一个应该以其他方式对齐的列，比如行标题，完全没有问题，在这个列上附加一个 id，比如 rowHeading 并写在你的样式表或内联样式中：

#rowHeading 
  -fx-alignment: CENTER_LEFT;

并且它应该居中。无需大量编码。

【讨论】：

根据specificity of your CSS selector，您可能需要使用-fx-alignment: CENTER_RIGHT !important; 才能使其收听。

【参考方案5】：

快速解决方法是在 SceneBuilder 中选择列，然后将属性添加到样式字段

【参考方案6】：

再简单不过了。

对于单个列（或任何选择）...

在你的 fxml 中声明一个 styleClass

<TableColumn  styleClass="centered-table-column" />

然后应用 css

.centered-table-column
    -fx-alignment: center;

或所有列

.table-column
    -fx-alignment: center;