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

Question

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

用于GridPane、VBox、VBox的JavaFX CSS类

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

向GridPane JavaFX添加边框

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

Answer 1

我认为您可以使用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;
}

预览：