JavaFX 8:在 table 行使用边框时移动 table 单元格
JavaFX 8: shifting table cells when using borders for table row
我想用红色边框标记 TreeTableView 中的一些行,但我 运行 遇到了 table 单元格从各自的列移开的问题.
视觉上看起来像这样:
http://i.imgur.com/KBK3hvM.png
style.css:
.style {
-fx-border-style: solid line-join round ;
-fx-border-color: ...;
}
对于树中的每一列,它似乎都从右边移动了一点,看起来是边框的宽度(默认为 1 像素)。只有 2 列不是问题,但最终应用程序应该包含一打列。
我可以将边框的插入设置在单元格的外部,这样可以修复偏移,但是你再也看不到侧边框了,这看起来也很奇怪。
我猜想为一行设置样式只是为了方便引擎为每个单元格设置它。
有没有办法阻止 TreeTableCells 移动?也许为单元格设置单独的样式而不是为整行设置样式?
假设 .style
应用于 TreeTableRow
s:
.style {
-fx-background-color: red, -fx-background ;
-fx-background-insets: 0, 1 ;
}
我通常发现我必须深入研究默认样式表的源代码才能弄清楚这些。您可能想弄乱插图并实现某种逻辑以防止应用样式 class 的相邻行出现双边框。
这是一个 SSCCE:
import javafx.application.Application;
import javafx.beans.property.IntegerProperty;
import javafx.beans.property.SimpleIntegerProperty;
import javafx.beans.property.SimpleStringProperty;
import javafx.beans.property.StringProperty;
import javafx.scene.Scene;
import javafx.scene.control.TreeItem;
import javafx.scene.control.TreeTableColumn;
import javafx.scene.control.TreeTableRow;
import javafx.scene.control.TreeTableView;
import javafx.scene.layout.BorderPane;
import javafx.stage.Stage;
public class StyledTreeTableView extends Application {
private static final int MAX_VALUE = 1000 ;
@Override
public void start(Stage primaryStage) {
TreeTableView<Item> treeTable = new TreeTableView<>();
treeTable.setRoot(createTreeItem(1));
treeTable.setRowFactory(ttv -> new TreeTableRow<Item>() {
@Override
public void updateItem(Item item, boolean empty) {
super.updateItem(item, empty);
if (empty) {
setText(null);
getStyleClass().remove("highlight");
} else {
setText(item.toString());
if (item.getValue() % 10 == 3 || item.getValue() % 10 == 4) {
if (! getStyleClass().contains("highlight")) {
getStyleClass().add("highlight");
}
} else {
getStyleClass().remove("highlight");
}
}
}
});
TreeTableColumn<Item, String> nameCol = new TreeTableColumn<>("Item");
nameCol.setCellValueFactory(cellData -> cellData.getValue().getValue().nameProperty());
treeTable.getColumns().add(nameCol);
for (int colIndex = 1 ; colIndex < 10 ; colIndex++) {
TreeTableColumn<Item, Number> valueCol = new TreeTableColumn<>("Value * "+colIndex);
final int multiplier = colIndex ;
valueCol.setCellValueFactory(cellData -> cellData.getValue().getValue().valueProperty().multiply(multiplier));
treeTable.getColumns().add(valueCol);
}
BorderPane root = new BorderPane(treeTable);
Scene scene = new Scene(root, 600, 600);
scene.getStylesheets().add("styled-tree-table.css");
primaryStage.setScene(scene);
primaryStage.show();
}
private TreeItem<Item> createTreeItem(int value) {
Item item = new Item("Item "+ value, value);
TreeItem<Item> treeItem = new TreeItem<>(item);
if (value < MAX_VALUE) {
for (int i = 0 ; i < 10; i++) {
treeItem.getChildren().add(createTreeItem(value * 10 + i));
}
}
return treeItem ;
}
public static class Item {
private final StringProperty name = new SimpleStringProperty();
private final IntegerProperty value = new SimpleIntegerProperty();
public Item(String name, int value) {
setName(name);
setValue(value);
}
public final StringProperty nameProperty() {
return this.name;
}
public final java.lang.String getName() {
return this.nameProperty().get();
}
public final void setName(final java.lang.String name) {
this.nameProperty().set(name);
}
public final IntegerProperty valueProperty() {
return this.value;
}
public final int getValue() {
return this.valueProperty().get();
}
public final void setValue(final int value) {
this.valueProperty().set(value);
}
}
public static void main(String[] args) {
launch(args);
}
}
使用样式表:
.highlight {
-fx-background-color: red, -fx-background ;
-fx-background-insets: 0, 1 ;
}
我想用红色边框标记 TreeTableView 中的一些行,但我 运行 遇到了 table 单元格从各自的列移开的问题.
视觉上看起来像这样:
http://i.imgur.com/KBK3hvM.png
style.css:
.style {
-fx-border-style: solid line-join round ;
-fx-border-color: ...;
}
对于树中的每一列,它似乎都从右边移动了一点,看起来是边框的宽度(默认为 1 像素)。只有 2 列不是问题,但最终应用程序应该包含一打列。
我可以将边框的插入设置在单元格的外部,这样可以修复偏移,但是你再也看不到侧边框了,这看起来也很奇怪。
我猜想为一行设置样式只是为了方便引擎为每个单元格设置它。
有没有办法阻止 TreeTableCells 移动?也许为单元格设置单独的样式而不是为整行设置样式?
假设 .style
应用于 TreeTableRow
s:
.style {
-fx-background-color: red, -fx-background ;
-fx-background-insets: 0, 1 ;
}
我通常发现我必须深入研究默认样式表的源代码才能弄清楚这些。您可能想弄乱插图并实现某种逻辑以防止应用样式 class 的相邻行出现双边框。
这是一个 SSCCE:
import javafx.application.Application;
import javafx.beans.property.IntegerProperty;
import javafx.beans.property.SimpleIntegerProperty;
import javafx.beans.property.SimpleStringProperty;
import javafx.beans.property.StringProperty;
import javafx.scene.Scene;
import javafx.scene.control.TreeItem;
import javafx.scene.control.TreeTableColumn;
import javafx.scene.control.TreeTableRow;
import javafx.scene.control.TreeTableView;
import javafx.scene.layout.BorderPane;
import javafx.stage.Stage;
public class StyledTreeTableView extends Application {
private static final int MAX_VALUE = 1000 ;
@Override
public void start(Stage primaryStage) {
TreeTableView<Item> treeTable = new TreeTableView<>();
treeTable.setRoot(createTreeItem(1));
treeTable.setRowFactory(ttv -> new TreeTableRow<Item>() {
@Override
public void updateItem(Item item, boolean empty) {
super.updateItem(item, empty);
if (empty) {
setText(null);
getStyleClass().remove("highlight");
} else {
setText(item.toString());
if (item.getValue() % 10 == 3 || item.getValue() % 10 == 4) {
if (! getStyleClass().contains("highlight")) {
getStyleClass().add("highlight");
}
} else {
getStyleClass().remove("highlight");
}
}
}
});
TreeTableColumn<Item, String> nameCol = new TreeTableColumn<>("Item");
nameCol.setCellValueFactory(cellData -> cellData.getValue().getValue().nameProperty());
treeTable.getColumns().add(nameCol);
for (int colIndex = 1 ; colIndex < 10 ; colIndex++) {
TreeTableColumn<Item, Number> valueCol = new TreeTableColumn<>("Value * "+colIndex);
final int multiplier = colIndex ;
valueCol.setCellValueFactory(cellData -> cellData.getValue().getValue().valueProperty().multiply(multiplier));
treeTable.getColumns().add(valueCol);
}
BorderPane root = new BorderPane(treeTable);
Scene scene = new Scene(root, 600, 600);
scene.getStylesheets().add("styled-tree-table.css");
primaryStage.setScene(scene);
primaryStage.show();
}
private TreeItem<Item> createTreeItem(int value) {
Item item = new Item("Item "+ value, value);
TreeItem<Item> treeItem = new TreeItem<>(item);
if (value < MAX_VALUE) {
for (int i = 0 ; i < 10; i++) {
treeItem.getChildren().add(createTreeItem(value * 10 + i));
}
}
return treeItem ;
}
public static class Item {
private final StringProperty name = new SimpleStringProperty();
private final IntegerProperty value = new SimpleIntegerProperty();
public Item(String name, int value) {
setName(name);
setValue(value);
}
public final StringProperty nameProperty() {
return this.name;
}
public final java.lang.String getName() {
return this.nameProperty().get();
}
public final void setName(final java.lang.String name) {
this.nameProperty().set(name);
}
public final IntegerProperty valueProperty() {
return this.value;
}
public final int getValue() {
return this.valueProperty().get();
}
public final void setValue(final int value) {
this.valueProperty().set(value);
}
}
public static void main(String[] args) {
launch(args);
}
}
使用样式表:
.highlight {
-fx-background-color: red, -fx-background ;
-fx-background-insets: 0, 1 ;
}