JavaFX表列与css的字体不同 [英] JavaFX table column different font with css

问题描述

我想在JavaFX表的一列中设置不同的字体（实际上只是斜体）。

我通过调用setCellFactory然后在其上设置字体来看到这个问题。在我看来（这与JavaFX一直是错误的;-)）这是一个相当混乱的工作方式 - 如果你想处理单元格上的编辑等，你最终会得到一个大类而不是只是使用类似

I want to set a different font ( well actually just italics ) in one column of a JavaFX table.
I've seen this answered by calling setCellFactory and then setting the font on that. In my view ( which with JavaFX has been regularly wrong ;-) ) this is quite an involved and messy way to do the job - if you want to deal with editing on the cell etc. you end up with a large class instead of just using something like

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

所以，我的问题是 - 有人设法在列上设置id或样式类在css中引用？

So, my question is this - has anyone managed to set an id or style class on the column and reference that in css?

我的尝试是这样的（尝试类和id）：

My attempt was something like this ( trying both class and id ):

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

然后使用某种组合

#italic-cell
.italic-cell
#special-table .italic-cell

等。等等

-fx-font-style: italic;

作为ID /类的样式

推荐答案

表格列的CSS样式

为列添加合适的样式类：

Add an appropriate style class to your column:

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

在场景中添加一个样式表，用于定义表格单元格的斜体样式：

Add a stylesheet to your scene which defines the italic style for table cells:

.italic.table-cell { -fx-font-style: italic; }

警告1

我再次根据T-and-M Mike的评论尝试了这个例子，事实上它在使用Java 8的OS X 10.9上运行不正常。我相信，在Windows上设置 - fx-font-style to italic允许文本以斜体显示。在Mac上，这会将字体设置为System Italic，这是一种似乎不存在的字体，因此文本只显示没有斜体。如果还将字体系列设置为某些定义了斜体的字体，则列中的文本将按预期显示为斜体。例如，使用Times New Roman，斜体：

I tried this example again based on T-and-M Mike's comments and indeed it didn't quite work right on OS X 10.9 with Java 8. I believe, on windows just setting the -fx-font-style to italic allowed the text to show in italic. On a Mac, this will set the font to System Italic, which is a font which does not seem to exist, so the text just displays without italics. If you also set the font family to some font for which italics are defined, then the text in the column will show in italic as expected. For example, use Times New Roman, italic:

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

警告2

在OS X 10.9上的Java 8b132上，当表格第一次显示表格内容与表格标题略有不同时，会出现轻微的渲染错误。

On Java 8b132 on OS X 10.9, there is a slight rendering bug when the table is first displayed where the table content is slightly out of line with the table headers.

在屏幕上显示表格之后调用 table.requestLayout（）; 似乎修复了表格的对齐渲染错误，但如果一切都是如果工作正常，则无需拨打电话。

Calling table.requestLayout(); after the table was shown on the screen seemed to fix the alignment rendering bug for the table, but if everything was working right, the call wouldn't be necessary.

可执行样本

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

Test output result on Win7 + Java 8b91:

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的行着色方法的信息在：

For reference (and as shown above, not necessary for simple styling operations), information on a custom TableCell based approach to row coloring is in:

• 更新TableView行外观


• JavaFX中有两种颜色的背景？

• Updating TableView row appearance
• Background with 2 colors in JavaFX?

这篇关于JavaFX表列与css的字体不同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！