登录
当前位置： 首页 > 知识库问答 >
问题：

如何在JavaFx中使用CSS设置GridPane的样式

祁博涛
2023-03-14

我是JavaFx新手。我在FXML中创建了一个网格窗格。我想将该网格窗格设置为下图。我尝试了以下答案，并尝试了更多的CSS元素。但这些都没有帮助我做到这一点。

用于GridPane、VBox、VBox的JavaFX CSS类

使用CSS在GridPane中居中显示子项

向GridPane JavaFX添加边框

我是否也使用了错误的方法？我可以使用GridPane实现这一点，还是TableView很容易实现这一点？

共有1个答案

惠泳
2023-03-14

我认为您可以使用TableView控件。您可以使用以下代码开始：

控制器类：

package sample;

import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.TableCell;
import javafx.scene.control.TableColumn;
import javafx.scene.control.TableView;
import javafx.scene.control.cell.PropertyValueFactory;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;

import java.net.URL;
import java.time.Duration;
import java.time.LocalDate;
import java.time.LocalTime;
import java.time.format.DateTimeFormatter;
import java.util.ResourceBundle;

public class Controller implements Initializable {

    @FXML
    private TableView<Project>
            projectTableView;
    @FXML
    private TableColumn<Project, String>
            projeNameColumn;
    @FXML
    private TableColumn<Project, LocalDate>
            dateColumn;
    @FXML
    private TableColumn<Project, LocalTime>
            startTimeColumn,
            stopTimeColumn;
    @FXML
    private TableColumn<Project, Duration>
            durationColumn;

    private ObservableList<Project> projectList = FXCollections.observableArrayList();

    @Override
    public void initialize(URL location, ResourceBundle resources) {

        projectList.addAll(
                new Project("Landing page Design",
                        LocalDate.of(2019, 5, 21),
                        LocalTime.of(13, 10),
                        LocalTime.of(21, 20, 37)),
                new Project("Mobile App",
                        LocalDate.of(2019, 5, 21),
                        LocalTime.of(12, 0),
                        LocalTime.of(20, 0)),
                new Project("UI/UX",
                        LocalDate.of(2019, 5, 21),
                        LocalTime.of(13, 10),
                        LocalTime.of(13, 20, 37)),
                new Project("Website/apps",
                        LocalDate.of(2019, 5, 21),
                        LocalTime.of(13, 11),
                        LocalTime.of(21, 0, 37)),
                new Project("Branding",
                        LocalDate.of(2019, 5, 21),
                        LocalTime.of(13, 10),
                        LocalTime.of(13, 20, 37))
        );

        projectTableView.setItems(projectList);

        projeNameColumn.setCellValueFactory(new PropertyValueFactory<>("name"));
        projeNameColumn.setCellFactory(tc -> {
            final Image image = new Image(getClass().getResource("image.png").toString());
            return new TableCell<Project, String>() {
                private ImageView imageView = new ImageView();

                @Override
                protected void updateItem(String item, boolean empty) {
                    super.updateItem(item, empty);
                    if (item == null || empty)
                        setGraphic(null);
                    else {
                        imageView.setImage(image);
                        imageView.setPreserveRatio(true);
                        imageView.setFitHeight(35);
                        setGraphic(imageView);
                        setText(item);
                    }
                }
            };
        });

        dateColumn.setCellValueFactory(new PropertyValueFactory("date"));
        dateColumn.setCellFactory((TableColumn<Project, LocalDate> column) -> new TableCell<Project, LocalDate>() {
            protected void updateItem(LocalDate item, boolean empty) {
                super.updateItem(item, empty);
                if (item == null || empty)
                    setText(null);
                else
                    setText(DateTimeFormatter.ofPattern("MMM dd, yyyy").format(item));
            }
        });

        startTimeColumn.setCellValueFactory(new PropertyValueFactory("startTime"));
        startTimeColumn.setCellFactory((TableColumn<Project, LocalTime> column) -> new TableCell<Project, LocalTime>() {
            protected void updateItem(LocalTime item, boolean empty) {
                super.updateItem(item, empty);
                if (item == null || empty)
                    setText(null);
                else
                    setText(DateTimeFormatter.ofPattern("hh:mm a").format(item));
            }
        });

        stopTimeColumn.setCellValueFactory(new PropertyValueFactory("stopTime"));
        stopTimeColumn.setCellFactory((TableColumn<Project, LocalTime> column) -> new TableCell<Project, LocalTime>() {
            protected void updateItem(LocalTime item, boolean empty) {
                super.updateItem(item, empty);
                if (item == null || empty)
                    setText(null);
                else
                    setText(DateTimeFormatter.ofPattern("hh:mm a").format(item));
            }
        });

        durationColumn.setCellValueFactory(new PropertyValueFactory("duration"));
        durationColumn.setCellFactory((TableColumn<Project, Duration> column) -> new TableCell<Project, Duration>() {
            protected void updateItem(Duration item, boolean empty) {
                super.updateItem(item, empty);
                if (item == null || empty) {
                    setText(null);
                } else {
                    int s = (int) item.getSeconds();
                    int hours = s / 3600;
                    int minutes = (s % 3600) / 60;
                    int seconds = (s % 60);
                    setText(String.format("%02d:%02d:%02d", hours, minutes, seconds));
                }
            }
        });
    }
}

项目类别：

package sample;

import javafx.beans.property.ObjectProperty;
import javafx.beans.property.SimpleObjectProperty;
import javafx.beans.property.SimpleStringProperty;

import java.time.Duration;
import java.time.LocalDate;
import java.time.LocalTime;

public class Project {

    private final SimpleStringProperty name;
    private final ObjectProperty<LocalDate> date;
    private final ObjectProperty<LocalTime> startTime, stopTime;
    private final ObjectProperty<Duration> duration;

    public Project(String name, LocalDate date, LocalTime startTime, LocalTime stopTime) {
        this.name = new SimpleStringProperty(name);
        this.date = new SimpleObjectProperty<>(date);
        this.startTime = new SimpleObjectProperty<>(startTime);
        this.stopTime = new SimpleObjectProperty<>(stopTime);
        this.duration = new SimpleObjectProperty<>(Duration.between(startTime, stopTime));
    }

    public String getName() {
        return name.get();
    }

    public SimpleStringProperty nameProperty() {
        return name;
    }

    public void setName(String name) {
        this.name.set(name);
    }

    public LocalDate getDate() {
        return date.get();
    }

    public ObjectProperty<LocalDate> dateProperty() {
        return date;
    }

    public void setDate(LocalDate date) {
        this.date.set(date);
    }

    public LocalTime getStartTime() {
        return startTime.get();
    }

    public ObjectProperty<LocalTime> startTimeProperty() {
        return startTime;
    }

    public void setStartTime(LocalTime startTime) {
        this.startTime.set(startTime);
    }

    public LocalTime getStopTime() {
        return stopTime.get();
    }

    public ObjectProperty<LocalTime> stopTimeProperty() {
        return stopTime;
    }

    public void setStopTime(LocalTime stopTime) {
        this.stopTime.set(stopTime);
    }

    public Duration getDuration() {
        return duration.get();
    }

    public ObjectProperty<Duration> durationProperty() {
        return duration;
    }

    public void setDuration(Duration duration) {
        this.duration.set(duration);
    }
}

FXML文件：

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.TableColumn?>
<?import javafx.scene.control.TableView?>

<TableView fx:id="projectTableView" stylesheets="@styling.css" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/11.0.1" fx:controller="sample.Controller">
  <columns>
    <TableColumn id="first-column" fx:id="projeNameColumn" prefWidth="144.0" style="-fx-alignment: center-left;" text="Project" />
    <TableColumn fx:id="dateColumn" prefWidth="96.0" style="-fx-alignment: center;" text="Date" />
      <TableColumn fx:id="startTimeColumn" prefWidth="75.0" style="-fx-alignment: center;" text="Start Time" />
      <TableColumn fx:id="stopTimeColumn" prefWidth="75.0" style="-fx-alignment: center;" text="Stop Time" />
      <TableColumn fx:id="durationColumn" prefWidth="75.0" style="-fx-alignment: center;" text="Duration" />
  </columns>
   <columnResizePolicy>
      <TableView fx:constant="CONSTRAINED_RESIZE_POLICY" />
   </columnResizePolicy>
</TableView>

CSS文件：

.table-view .column-header,
.table-view .column-header-background .filler {
    -fx-background-color: #F9F9F9;
}

.table-view .column-header {
    -fx-cell-size: 35;
    -fx-border-width: 0.25 0.25 1 0.25;
    -fx-border-color: #EDEDED;
}

.table-view .column-header .label{
   -fx-padding: 10 0 10 0;
}

.table-view .cell{
    -fx-cell-size: 35;
}

预览：

 类似资料：
  • 如何在JavaFX中使用CSS设置分隔符的样式？

    本文向大家介绍如何在JavaFX中使用CSS设置分隔符的样式？，包括了如何在JavaFX中使用CSS设置分隔符的样式？的使用技巧和注意事项，需要的朋友参考一下 分隔符是水平或垂直线，用于分隔应用程序的UI元素。在JavaFX中，javafx.scene.control.Separator类代表一个分隔符，要创建一个分隔符，您需要实例化该类。您可以使用CSS控制分隔符的外观。 通过创建CSS文件并在

  • 如何在JavaFX GridPane的列之间设置填充？

    我试图在javaFx程序中显示一个2列网格。这就是我设置网格的方式： 问题是。我想展示一个小空间，在一列结束和另一列开始之间。然而，这些柱子却像胶水一样粘在一起。 以下是一个截图： 这里每一列都包含项目名称和处理、编辑、删除按钮。 你可以看到柱子是如何粘在一起的。我希望它们之间有一些空间。 我该怎么解决这个问题？ 我的整个UI的层次结构如下： 场景

  • 如何使用CSS设置asp.net菜单的样式

    问题内容： 我正在设置asp.net菜单的样式，并且试图了解StaticSelectedStyle-CssClass和StaticHoverStyle- CssClass参数的含义。 我的理解是，只要需要，使用这些参数定义的样式就会作为CSS类应用于相关元素。所以我创建菜单如下： 它适用于StaticMenuStyle-CssClass和StaticMenuStyle- CssClass（将这些类

  • 如何使用CSS设置外部SVG样式

    问题内容： 是否可以像使用文本一样使用CSS为外部.svg设置样式？我想念什么？我的标记和CSS看起来像这样： 问题答案： 如果像引用标签一样通过引用外部文件来包含svg图像，则svg图像中的元素将不包含在主文档DOM树中。他们组成了自己的树。因此，外部图像中的元素无法通过主文档中的CSS选择器进行匹配。 您可以像大多数其他元素一样设置元素的样式，例如为其设置边框。但是您不能（至少这样）访问外部图

  • 如何使用外部CSS设置SVG样式？

    问题内容： 我有几个SVG图形，我想通过我的外部样式表修改颜色，而不是直接在每个SVG文件中修改。我不是将图形插入行中，而是将它们存储在我的图像文件夹中并指向它们。 我以这种方式实现了它们，以使工具提示能够正常工作，并且我还将每个工具提示都包装在标签中以允许链接。 这是SVG图形的代码： 我将以下内容放入我的外部CSS文件（main.css）中： 但是，它对图形没有影响。我还尝试了.socIcon

  • 如何使用CSS设置复选框样式

    问题内容： 我正在尝试使用以下样式设置复选框： 但是没有应用样式。复选框仍显示其默认样式。如何给它指定的样式？ 问题答案： 更新： 以下答案引用了CSS 3广泛使用之前的状态。在现代浏览器（包括InternetExplorer9和更高版本）中，使用首选样式创建复选框替换更为简单，而无需使用JavaScript。 值得注意的是，基本问题没有改变。您仍然不能直接将样式（边框等）应用于复选框元素，并使这

相关问答

在Javafx中创建gridPane如何在SceneBuilder/JavaFX中为GridPane中的所有网格设置大小和各种属性如何在JavaFX中设置占位符？使用JavaFX可以在GridPane中拖动形状JavaFX：使用FXML在行中组织控件（在gridpane中）

相关文章

如何在JavaScript中设置多种CSS样式？如何在PHP中使用CSS样式如何仅使用CSS设置默认确认框样式？如何在JavaFX中设置WebView？如何在JavaFX CSS中将-fx-max-width设置为USE_PREF_SIZE？

相关阅读

像IDE一样使用VimjQuery 设置如何设计一个注册中心如何设计一个分布式架构的中间件系统？环境设置

相关工具

JavaFXJavaFX SnakeCSS TesterCSS PatcherCSS ToolTip

相关文档

像 IDE 样使用 VIMJavaFX 中文教程如何使用 Gitbook 来做笔记GitBook 安装配置使用ZUK Z2 (z2_plus) 设备配置
快捷导航： 新手教程 算法原理 架构设计 Java进阶 数据库进阶 大厂专栏 面试经验 编程笔记 编程问答 所有专题 文档资料 工具软件 电子书籍 小牛导航
在线工具： 房贷计算器 个税计算器 Linux命令查询 Json格式化 正则表达式 颜色转换 AES加解密 SHA1加密 MD5加密 毒鸡汤 字数统计 随机密码生成 进制转换 Base64编解码 励志句子
Copyright © 2019-2024 小牛知识库@xnip.cn. All Rights Reserved.