css - 是否可以使 JavaFX TableColumn 的标题文本溢出到另一列?

标签 css layout javafx

我有一个带有两个 TableColumns 的 TableView。左侧是一个宽列,需要能够显示最多 30 个字符的条目。右侧是一个窄列,需要能够仅显示一个字符。但是右栏的标题需要是一个长字(必须)。但就空间而言,我没有奢侈的空间来拥有与所需标题文本一样大的列。如果我使右列与其标题文本一样宽,则左列中的数据将被截断。我希望右侧列的标题文本渗入左侧的列(不用担心它会碰到左侧列的标题文本)。这可以通过设置我的 TableView 和/或一个或两个 TableColumns 的一些 fx css 来实现吗?

最佳答案

这是一个示例,其中列标题“Long Last Name”渗透到其左侧的列标题中。

bleed

bleed.css

.column-header.left-header > .label {
    -fx-alignment: baseline-left;
}

.column-header.bleed-header > .label {
    -fx-alignment: baseline-right;
    -fx-padding: 0 3 0 0;
}

启用“流血”的代码片段

TableColumn<Person, String> lastNameCol = new TableColumn<>();
lastNameCol.setMinWidth(80);
lastNameCol.setCellValueFactory(
        new PropertyValueFactory<>("lastName"));
lastNameCol.getStyleClass().add("bleed-header");

Label headerLabel = new Label("Long Last Name");
headerLabel.setMinWidth(Control.USE_PREF_SIZE);
lastNameCol.setGraphic(headerLabel);

解决方案需要一些技巧:

  1. 使用 css 设置对齐属性。
  2. 为页眉使用标签图形。

提供标签图形可让您直接控制最小宽度(以防止标题标签在太长时被忽略的默认行为)。

可执行代码示例

import javafx.application.Application;
import javafx.beans.property.SimpleStringProperty;
import javafx.collections.*;
import javafx.geometry.Insets;
import javafx.scene.*;
import javafx.scene.control.*;
import javafx.scene.control.cell.PropertyValueFactory;
import javafx.scene.layout.VBox;
import javafx.scene.text.Font;
import javafx.stage.Stage;

public class TableViewHeaderBleed extends Application {

    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");

        table.setPrefHeight(200);

        final Label label = new Label("Address Book");
        label.setFont(new Font("Arial", 20));

        TableColumn<Person, String> firstNameCol = new TableColumn<>("First Name");
        firstNameCol.setMinWidth(100);
        firstNameCol.setCellValueFactory(
                new PropertyValueFactory<>("firstName"));
        firstNameCol.getStyleClass().add("left-header");

        TableColumn<Person, String> lastNameCol = new TableColumn<>();
        lastNameCol.setMinWidth(80);
        lastNameCol.setCellValueFactory(
                new PropertyValueFactory<>("lastName"));
        lastNameCol.getStyleClass().add("bleed-header");

        Label headerLabel = new Label("Long Last Name");
        headerLabel.setMinWidth(Control.USE_PREF_SIZE);
        lastNameCol.setGraphic(headerLabel);

        TableColumn<Person, String> emailCol = new TableColumn<>("Email");
        emailCol.setMinWidth(100);
        emailCol.setCellValueFactory(
                new PropertyValueFactory<>("email"));

        table.setItems(data);
        table.getColumns().addAll(firstNameCol, lastNameCol, emailCol);

        final VBox vbox = new VBox();
        vbox.setSpacing(5);
        vbox.setPadding(new Insets(10));
        vbox.getChildren().addAll(label, table);

        ((Group) scene.getRoot()).getChildren().addAll(vbox);

        scene.getStylesheets().add(getClass().getResource("bleed.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);
        }
   }
}

关于css - 是否可以使 JavaFX TableColumn 的标题文本溢出到另一列?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23116218/

相关文章:

c# - ASP.NET HTML - 文本框非常靠近,需要帮助在它们之间留出空间

html - 全宽显示子 div

combobox - JAVAFX可编辑组合框: refresh after changing a value

java - 在 JavaFX 构建中添加外部 jar 文件

javascript - 当悬停另一个元素时影响一个元素

css - Twitter Bootstrap 按钮 - 悬停时打破背景

html - <div> 标签在 float 元素下消失,但 <p> 标签或文本却没有?

html - 请帮助新手解决 IE7 布局 float 问题

css - 如何使用 CSS 对齐一个 div 容器内的 2 个 div(见图)

JavaFX TreeView setRoot 导致异常