- iOS/Objective-C 元类和类别
- objective-c - -1001 错误,当 NSURLSession 通过 httpproxy 和/etc/hosts
- java - 使用网络类获取 url 地址
- ios - 推送通知中不播放声音
我正在尝试为 JavaFX2 TableView
中的单个表格单元格设置样式(以指示表格单元格值已更改、包含错误等)。为此,我创建了一个自定义 TableCell
,它根据内容设置了正确的 CSS 类。
这在某种程度上有效,但问题是我现在失去了所有效果、悬停、选择颜色渐变等(即伪类)。
如何使用 CSS 设置表格单元格的样式,而不需要重新定义所有可能的伪类组合?
我读过 this answer但解决方案对我不起作用。如果我将 -fx-control-inner-background
设置为我想要的背景颜色,我会得到我想要的悬停和选择颜色,但初始颜色是透明的,这显然不是我想要的(我已经注释掉了下面CSS中的尝试,你可以取消注释并自己尝试)。如果您能解释原因并提供解决方案,我很乐意接受。
我也看过 this answer ,但我真的不想为所有伪类创建重复定义(此外,它似乎只适用于行选择)。
下面是演示该问题的 SSCCE。
屏幕截图(这看起来像我想要的,除了悬停和选择不起作用):
TableViewSample.java(基于 Table View tutorial code ):
import javafx.application.Application;
import javafx.beans.property.SimpleStringProperty;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.geometry.Insets;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.control.SelectionMode;
import javafx.scene.control.TableCell;
import javafx.scene.control.TableColumn;
import javafx.scene.control.TableView;
import javafx.scene.control.cell.PropertyValueFactory;
import javafx.scene.layout.VBox;
import javafx.scene.text.Font;
import javafx.stage.Stage;
import javafx.util.Callback;
public class TableViewSample extends Application {
public static final String CSS_ORIGINAL = "cell-renderer-original";
public static final String CSS_CHANGED = "cell-renderer-changed";
public static final String CSS_ERROR = "cell-renderer-error";
public static final String CSS_ERROR_AND_CHANGED = "cell-renderer-error-and-changed";
private TableView<Person> table = new TableView<>();
private final ObservableList<Person> data =
FXCollections.observableArrayList(
new Person("Jacob", "Smith", "jacob.smith@example.com"),
new Person("Isabella", "Johnson", "isabella.johnson@example.com"),
new Person("Ethan", "Williams", "ethan.williams@example.com"),
new Person("Emma", "Jones", "emma.jones@example.com"),
new Person("Michael", "Brown", "michael.brown@example.com")
);
public static void main(String[] args) {
launch(args);
}
@Override
public void start(Stage stage) {
Scene scene = new Scene(new Group());
stage.setTitle("Table View Sample");
stage.setWidth(450);
stage.setHeight(500);
Label label = new Label("Address Book");
label.setFont(new Font("Arial", 20));
table.setEditable(true);
// Cell selection only (I need this)
table.getSelectionModel().setCellSelectionEnabled(true);
table.getSelectionModel().setSelectionMode(SelectionMode.MULTIPLE);
TableColumn<Person, String> firstNameCol = new TableColumn<>("First Name");
firstNameCol.setMinWidth(100);
firstNameCol.setCellValueFactory(new PropertyValueFactory<Person, String>("firstName"));
TableColumn<Person, String> lastNameCol = new TableColumn<>("Last Name");
lastNameCol.setMinWidth(100);
lastNameCol.setCellValueFactory(new PropertyValueFactory<Person, String>("lastName"));
TableColumn<Person, String> emailCol = new TableColumn<>("Email");
emailCol.setMinWidth(200);
emailCol.setCellValueFactory(new PropertyValueFactory<Person, String>("email"));
// Install custom cell renderer
emailCol.setCellFactory(new Callback<TableColumn<Person, String>, TableCell<Person, String>>() {
@Override public TableCell<Person, String> call(final TableColumn<Person, String> personStringTableColumn) {
return new BackgroundTableCell();
}
});
table.setItems(data);
table.getColumns().addAll(firstNameCol, lastNameCol, emailCol);
VBox vbox = new VBox();
vbox.setSpacing(5);
vbox.setPadding(new Insets(10, 0, 0, 10));
vbox.getChildren().addAll(label, table);
((Group) scene.getRoot()).getChildren().addAll(vbox);
scene.getStylesheets().add(getClass().getResource("/my.css").toExternalForm());
stage.setScene(scene);
stage.show();
}
public static class Person {
private final SimpleStringProperty firstName;
private final SimpleStringProperty lastName;
private final SimpleStringProperty email;
private Person(String fName, String lName, String email) {
this.firstName = new SimpleStringProperty(fName);
this.lastName = new SimpleStringProperty(lName);
this.email = new SimpleStringProperty(email);
}
public String getFirstName() {
return firstName.get();
}
public void setFirstName(String fName) {
firstName.set(fName);
}
public String getLastName() {
return lastName.get();
}
public void setLastName(String fName) {
lastName.set(fName);
}
public String getEmail() {
return email.get();
}
public void setEmail(String fName) {
email.set(fName);
}
}
// My custom background cell renderer
private static class BackgroundTableCell extends TableCell<Person, String> {
@Override protected void updateItem(final String item, final boolean empty) {
super.updateItem(item, empty);
setText(empty ? "" : item);
getStyleClass().removeAll(CSS_ORIGINAL, CSS_CHANGED, CSS_ERROR, CSS_ERROR_AND_CHANGED);
updateStyles(empty ? null : item);
}
private void updateStyles(String item) {
if (item == null) {
return;
}
if (item.startsWith("i") || item.startsWith("j")) {
getStyleClass().add(CSS_CHANGED);
}
else if (item.startsWith("e")) {
getStyleClass().add(CSS_ERROR);
}
else if (item.startsWith("m")) {
getStyleClass().add(CSS_ERROR_AND_CHANGED);
}
}
}
}
我的.css:
.cell-renderer-changed {
-fx-background-color: rgba(255, 248, 33, .4);
/*-fx-control-inner-background: rgb(255, 248, 33);*/
-fx-accent: derive(-fx-control-inner-background, -40%);
-fx-cell-hover-color: #cce3f4;
-fx-cell-focus-inner-border: #85b9de;
}
.cell-renderer-error {
-fx-background-color: rgba(255, 159, 160, .4);
/*-fx-control-inner-background: rgb(255, 159, 160);*/
-fx-accent: derive(-fx-control-inner-background, -40%);
-fx-cell-hover-color: #cce3f4;
-fx-cell-focus-inner-border: #85b9de;
}
.cell-renderer-error-and-changed {
-fx-background-color: rgba(255, 205, 158, .4);
/*-fx-control-inner-background: rgb(255, 205, 158);*/
-fx-accent: derive(-fx-control-inner-background, -40%);
-fx-cell-hover-color: #cce3f4;
-fx-cell-focus-inner-border: #85b9de;
}
最佳答案
虽然不是完全我想要的,但我最终找到了一种创建不包含太多冗余的 CSS 的方法。
非常感谢@James_D 的帮助!
这是更新后的 my.css
:
.cell-renderer-changed {
my-bg: rgba(255, 248, 33, .5);
-fx-background-color: my-bg;
}
.cell-renderer-error {
my-bg: rgba(255, 159, 160, .5);
-fx-background-color: my-bg;
}
.cell-renderer-error-and-changed {
my-bg: rgba(255, 205, 158, .5);
-fx-background-color: my-bg;
}
/* Restore default behaviour from caspian.css */
.cell-renderer-changed:hover, .cell-renderer-error:hover, .cell-renderer-error-and-changed:hover {
-fx-background-color: -fx-table-cell-border-color, -fx-cell-hover-color;
-fx-background-insets: 0, 0 0 1 0;
}
.cell-renderer-changed:selected, .cell-renderer-error:selected, .cell-renderer-error-and-changed:selected {
-fx-background: -fx-accent;
-fx-background-color: -fx-selection-bar;
-fx-text-fill: -fx-selection-bar-text;
-fx-background-insets: 0 0 1 0;
}
.cell-renderer-changed:focused:selected, .cell-renderer-error:focused:selected, .cell-renderer-error-and-changed:focused:selected {
-fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-selection-bar;
-fx-background-insets: 0 1 0 0, 1 2 1 1, 2 3 2 2;
-fx-background: -fx-accent;
-fx-text-fill: -fx-selection-bar-text;
}
.cell-renderer-changed:focused, .cell-renderer-error:focused, .cell-renderer-error-and-changed:focused {
-fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, my-bg;
/*-fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, transparent;*/
-fx-background-insets: 0 1 0 0, 1 2 1 1, 2 3 2 2;
}
关于java - 如何使用 CSS 在 JavaFX2 中设置表格单元格的样式(不删除悬停/选择等),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21113253/
我有一个名为 main.css 的 css 文件和另一个名为 style.css 的文件。我怎样才能在 main.css 中做到这一点? .someClass { //apply rules to
在更新我的 css 之前,我在 Login.css 中有以下内容: body { background-image: url('./pictures/fond.png'); bac
我的 share point 2013 核心 css 和我的 css 之间存在 css 冲突。所以我想把我所有的类都放在 div #s4-workspace 下但是我搜索了一种方法来将所有类分组到这个
我知道您可以覆盖 jsp 页面从 jsp 包含 CSS 文件(即全局 CSS 文件)继承的 CSS 属性。 但是,如果元素中的某个属性弄乱了特定页面,而我不想只使用内联 CSS 在该页面中使用它怎么办
我刚刚发现了 initial-scale 元属性。 以前,我一直在使用 default.css 来定义我所有的样式和大小(用于字体和元素),以便它们在桌面计算机的屏幕上显示得很好。然后,如果您使用的是
我正在尝试使用 LESS CSS 来编写我的 CSS。我已经按顺序导入了 style.less 和 less.js 文件。 现在我想提取 LESS 生成的 CSS。有什么办法可以做到吗?我不想使用脚本
我想知道是否有任何一种软件可以读取大量内联样式中的 HTML 文档并将所有这些样式转换为外部 css 文件。如果只有一页,我可以手动完成。但是有100页。有人有想法吗? 最佳答案 就像有人说的那样,“
当我想从 Styled Components 迁移到 CSS Modules 时,出现了以下问题。 假设我有以下样式组件,它接受动态参数 offset和一个动态 CSS 字符串 theme : con
有没有办法将 CSS 类定义为与另一个类相等?例如,如果我有一个类: .myClass{ background-color: blue; } 有没有一种方法可以将第二个类定义为与 myClas
我正在尝试制作一组按钮,这些按钮贴在页面底部并且由固定的空间隔开。我正在使用 angularJS 的 ng-repeat 指令通过 ajax 请求获取数据,然后我用它来显示按钮。 我的问题在于让按
浏览器是否在加载 CSS 文件时解析 CSS?还是在整个 CSS 文件被浏览器下载后才进行解析?不同浏览器的做法有区别吗?我在哪里可以找到这种底层信息? 这个问题不是 Load and executi
这个问题在这里已经有了答案: Can a CSS class inherit one or more other classes? (29 个答案) 关闭 3 年前。 标题有点乱,我给大家看一下。假
我遇到了最奇怪的问题...... 在最简单的形式中,我有一个包含以下内容的 index.html 文件: (在尝试确定根本原因的过程中,我已经大大减少了它) 当我查看页面的源代码时,我得到以下信息:
我正在使用 Mindscape Workbench 来最小化我的 scss 文件。我的页面设置为使用 *.min.css 文件。在随机时间,min 文件不会与系统的其余部分一起发布。 我有很多 css
请告诉我 CSS 框架和 CSS 网格之间的区别。 最佳答案 CSS 框架也可以是 CSS 网格框架。 CSS 网格框架用于构建 CSS 布局。有一些框架除了构建布局还有其他用途,例如 Hartija
我有无法从页面中删除或更改的 original.css 文件。原始.css table { border-collapse: collapse; border-spacing: 0;
我以前使用 bootstrap css import 很好。 但是我正在尝试使用 CSS 模块,所以我添加了几行。 { test: /\.css$/, use:
有没有办法在 css 选择器中创建一个 css 组。 例如: .SectionHeader { include: .foo; include: .bar; include: .
今天我学习了 CSS 中的两个概念,一个是 CSS 定位(静态、相对、绝对、固定),另一个是 CSS Margin,它定义了元素之间的空间。 假设我想移动一个元素,这是最好的方法吗?因为这两个概念似乎
var paths = { css: './public/apps/user/**/*.css' } var dest = { css: './public/apps/user/css/' } /
我是一名优秀的程序员,十分优秀!