JavaFX TableView文本对齐方式

Mar*_*sen 40 css java javafx tableview

在此输入图像描述

正如您在图片中看到的那样,每个列的文本对齐方式设置为左对齐.有没有办法改变这个?到目前为止,我已经在我的CSS文件中尝试过:

#Cols{
    text-align: right;
}
Run Code Online (Sandbox Code Playgroud)

我也尝试过:

#Cols{
    -fx-text-alignment: right;
}
Run Code Online (Sandbox Code Playgroud)

有谁知道如何改变对齐方式?

Ulu*_*Biy 70

所有表列的对齐方式:

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

#my-table .table-column {
  -fx-alignment: CENTER-RIGHT;
}
Run Code Online (Sandbox Code Playgroud)

对于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;
}
Run Code Online (Sandbox Code Playgroud)

并设置tableview的id .

tableView.setId("my-table");
Run Code Online (Sandbox Code Playgroud)


单表列对齐:

从JavaFX-8开始,您可以直接应用样式TableColumn,

firstTextCol.setStyle( "-fx-alignment: CENTER-RIGHT;");
Run Code Online (Sandbox Code Playgroud)

或者用css,

firstTextCol.getStyleClass().add( "custom-align");
Run Code Online (Sandbox Code Playgroud)

哪里

.custom-align { 
  -fx-alignment: center-right; 
} 
Run Code Online (Sandbox Code Playgroud)

对于JavaFX-2,
要将不同的对齐应用于不同的列,您需要为该列设置单元格工厂.例如,假设表中的第1列应该与左对齐,而其他列使用表的默认对齐(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;
            }
        });
Run Code Online (Sandbox Code Playgroud)


小智 5

我用了

cell.setAlignment(Pos.CENTER_RIGHT);
Run Code Online (Sandbox Code Playgroud)

代替

cell.setStyle("-fx-alignment: CENTER-LEFT;");
Run Code Online (Sandbox Code Playgroud)

但是,如果有 CSS,我不能将 fx:id 放在列上,然后将其对齐方式放入 CSS 文件中吗?上面有很多代码只是为了设置列对齐。


aw-*_*ink 5

即使已经两岁了,这是另一个答案。对于每个表列都存在一个默认的CSS样式类.table-column,因此,如果您要更改整个表列以使居中对齐,则只需将其放在样式表或内联样式中:

.table-column {
  -fx-alignment: CENTER_RIGHT;
}
Run Code Online (Sandbox Code Playgroud)

并且如果您获得了应该以其他方式对齐的列(例如行标题),那完全没有问题,请向该列附加id(例如rowHeading),然后以样式表或内联样式编写:

#rowHeading {
  -fx-alignment: CENTER_LEFT;
}
Run Code Online (Sandbox Code Playgroud)

并且应该保持居中。无需庞大的编码。


小智 5

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

在此处输入图片说明