JavaFX表格列使用CSS设置不同字体

3

我希望在JavaFX表格的一列中设置不同的字体(实际上只是斜体)。
我曾经看到过通过调用setCellFactory方法并在其中设置字体来回答这个问题。 在我的看法中(在JavaFX中我经常是错误的;-)),这是一种非常繁琐和混乱的方法 - 如果你想要处理单元格编辑等,那么你最终会得到一个很大的类,而不是只使用像下面这样的东西:

col.setCellFactory(TextFieldTableCell.<TableRow>forTableColumn());

那么,我的问题是这样的 - 有人成功地在列上设置了一个id或样式类,并在css中引用它吗?

我的尝试是这样的(尝试使用class和id):

col.getStyleClass().add(colDef.isItalic()? "italic-cell" : null);
col.setId(colDef.isItalic()? "italic-cell" : null);

并且使用一些组合的方式来
#italic-cell
.italic-cell
#special-table .italic-cell

等等,等等相关的IT技术内容

-fx-font-style: italic;

作为ID / class的样式
1个回答

8

CSS表格列的样式

为您的列添加适当的样式类:

nameColumn.getStyleClass().add("italic");

在您的场景中添加一个样式表,定义表格单元格的斜体样式:
.italic.table-cell { -fx-font-style: italic; }

注意1:

根据T-and-M Mike的评论,我再次尝试了这个示例,在搭载Java 8的OS X 10.9上并没有完全正常工作。在Windows上,仅将-fx-font-style设置为italic即可使文本显示为斜体。但是在Mac上,这会将字体设置为System Italic,这是一种似乎不存在的字体,所以文本只能显示为非斜体。如果你还将字体族设置为已定义斜体的某种字体,那么列中的文本将按预期显示为斜体。例如,使用Times New Roman字体的斜体:

.italic.table-cell { 
  -fx-font-family: "Times New Roman"; 
  -fx-font-style: italic; 
}

注意事项2

在OS X 10.9上的Java 8b132中,当表格首次显示时存在轻微的渲染错误,表格内容与表头略微不对齐。

在表格显示在屏幕上后调用 table.requestLayout(); 似乎可以修复表格的对齐渲染错误,但如果一切正常,此调用是不必要的。

可执行示例

在Win7 + Java 8b91上的测试输出结果:

payees

CellShadedTable.java

import javafx.application.Application;
import javafx.scene.*;
import javafx.scene.control.*;
import javafx.scene.control.cell.PropertyValueFactory;
import javafx.stage.Stage;

// demonstrates styling column cells in a tableview.
public class CellShadedTable extends Application {
  public static void main(String[] args) throws Exception { launch(args); }
  @Override public void start(final Stage stage) throws Exception {
    stage.setTitle("So called friends . . .");

    // create a table.
    TableColumn<Friend, String> nameColumn = new TableColumn<>("Name");
    nameColumn.setCellValueFactory(new PropertyValueFactory<Friend, String>("name"));
    nameColumn.setPrefWidth(75);
    nameColumn.getStyleClass().add("italic");

    TableColumn<Friend, String> owesMeColumn = new TableColumn<>("Owes Me");
    owesMeColumn.setCellValueFactory(new PropertyValueFactory<Friend, String>("owesMe"));
    owesMeColumn.setPrefWidth(150);

    TableColumn<Friend, Boolean> willPayColumn = new TableColumn<>("Will Pay Up");
    willPayColumn.setCellValueFactory(new PropertyValueFactory<Friend, Boolean>("willPay"));
    willPayColumn.setPrefWidth(75);

    TableView<Friend> table = new TableView(Friend.data);
    table.getColumns().addAll(
      nameColumn,
      owesMeColumn,
      willPayColumn
    );
    table.setPrefHeight(200);
    table.setColumnResizePolicy(TableView.CONSTRAINED_RESIZE_POLICY);

    stage.setScene(new Scene(table));
    stage.getScene().getStylesheets().add(getClass().getResource("cell-shader.css").toExternalForm());
    stage.show();

    table.requestLayout();
  }
}

Friend.java

import javafx.collections.*;

/** Sample data for a table view */
public class Friend {
  final static public ObservableList data = FXCollections.observableArrayList(
    new Friend("George", "Movie Ticket", true),
    new Friend("Irene", "Pay Raise", false),
    new Friend("Ralph", "Return my Douglas Adams Books", false),
    new Friend("Otto", "Game of Golf", true),
    new Friend("Sally", "$12,045.98", false),
    new Friend("Antoine", "Latte", true)
  );

  final private String  name;
  final private String  owesMe;
  final private boolean willPay;
  public Friend(String name, String owesMe, boolean willPay) {
    this.name = name; this.owesMe = owesMe; this.willPay = willPay;
  }
  public String  getName()    { return name;    }
  public String  getOwesMe()  { return owesMe;  }
  public boolean getWillPay() { return willPay; }
}

cell-shader.css

/** file: cell-shader.css
place in same directory as CellShadedTable.java */

.italic.table-cell { 
  -fx-font-family: "Times New Roman";
  -fx-font-style: italic; 
}

基于单元格工厂的方法

关于自定义表格行颜色的 TableCell 方法,可以参考以下链接(对于简单的样式操作不是必需的):


首先,感谢您的回复和完整的应用程序示例!但是不知何故,我无法使其工作-首先我尝试在我的应用程序中使用它,然后我认为可能是Java版本的问题,所以我下载并配置了1.8b92。最后,我将您的代码复制到一个新项目中,但它仍然拒绝像您的屏幕截图一样显示,即所有列都不使用斜体字。我检查它在1.8平台上运行(在XP和Win7上都是如此),还尝试在.italic和.table-cell之间加入空格(显示我对css语法的无知)。 - T-and-M Mike
我尝试了使用.table-cell,所有单元格都显示为斜体;我尝试在CSS中使用setID和#italic,只有标题行是斜体的。我似乎已经没有可检查的东西了。有任何想法吗?顺便说一句,我喜欢你在表格内容中的幽默感;-) - T-and-M Mike
又一次在NetBeans中需要jre7的4个jar文件(jfxrt.jar、deploy.jar、javaws.jar和plugin.jar)时遇到了困难!显然,这些在jre8中不需要添加。将它们删除后,问题得到解决! - T-and-M Mike
还有一件事情需要注意,如果你使用JDK8b92,在Win7上可以运行,但在XP上不行。 - T-and-M Mike
根据T-and-M Mike的评论和进一步测试更新了内容。 - jewelsea

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接