Javafx：如何将单元格宽度限制为 ListView 的宽度

Question

一直在努力解决这个问题。

我希望将列表单元格限制为父 ListView 的宽度，并且如果文本被剪裁/溢出，则包含的文本显示省略号。

但无论我做什么，所有单元格的宽度都会增长到这些单元格中最长文本的长度。超出单元格中的文本被“剪辑”，而不是我想要的省略号。

我的 ListView 是在 fxml 中定义的：

<BorderPane fx:id="listViewResultsParentPane">
    <center>
        <ListView fx:id="listViewResults"/>
    </center>
</BorderPane>

我有一个列表单元类：

public class ResultsListCell extends ListCell<ResultsListItem> {
    @Override
    public void updateItem(final ResultsListItem item, final boolean empty) {
        super.updateItem(item, empty);
        if(empty || item == null){
            setText("");
        } else {
            setText(item.title);
            setTextOverrun(OverrunStyle.ELLIPSIS);
            setEllipsisString("...");
        }
    }
}

为了摆脱水平滚动条，我正在使用这个 css：

.list-view#listViewResults .scroll-bar:horizontal .increment-arrow,
.list-view#listViewResults .scroll-bar:horizontal .decrement-arrow,
.list-view#listViewResults .scroll-bar:horizontal .increment-button,
.list-view#listViewResults .scroll-bar:horizontal .decrement-button {
    -fx-padding:0;
}

设置/限制我尝试过的单元格的宽度：

• 将每个单元格的宽度设置为父单元格的宽度，在 updateCell 调用。
• 绑定 prefHeight 和 maxHeight 属性 每个单元格到父单元格
• 将单元格 css 属性的 maxHeight 和 prefHeight 设置为 100%

任何帮助将不胜感激。

Answer 1

解决方案

将每个单元格的宽度绑定到列表的首选宽度，减去几个像素以允许列表边框。并将每个单元格的最大宽度设置为其首选大小：

prefWidthProperty().bind(list.widthProperty().subtract(2));
setMaxWidth(Control.USE_PREF_SIZE);

您不需要任何自定义 CSS 即可移除水平滚动条。仅当显示的列表单元格超出 ListView 的宽度并且上面指定的约束确保永远不会发生时，才会显示水平滚动条。您也不需要为单元格设置文本溢出样式和省略号字符串，因为它们已经默认设置为您想要的值。

完整的示例程序

import javafx.application.Application;
import javafx.collections.*;
import javafx.scene.Scene;
import javafx.scene.control.*;
import javafx.stage.Stage;

public class ElidedListView extends Application {
    @Override
    public void start(Stage stage) {
        ListView<String> list = new ListView<>();
        ObservableList<String> items = FXCollections.observableArrayList(
                "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
                "Aenean nibh ipsum, semper nec ipsum quis, dignissim gravida arcu.",
                "Sed posuere auctor magna vel suscipit.",
                "Aenean eu diam at dolor auctor porta.",
                "Integer tincidunt ex metus, in euismod velit facilisis in.",
                "Praesent purus mi, mattis rutrum egestas vitae, elementum vel dolo"
        );
        list.setItems(items);
        list.setCellFactory(param -> new ListCell<String>() {
            {
                prefWidthProperty().bind(list.widthProperty().subtract(2));
                setMaxWidth(Control.USE_PREF_SIZE);
            }
            @Override
            protected void updateItem(String item, boolean empty) {
                super.updateItem(item, empty);

                if (item != null && !empty) {
                    setText(item);
                } else {
                    setText(null);
                }
            }
        });

        stage.setScene(new Scene(list));
        stage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}

Answer 2

一种更简单更好的解决方案是将列表单元格的首选宽度设置为 0。无论如何，列表单元格的大小都会调整为列表的视口宽度，但不会比可用空间宽。这有效地隐藏了水平滚动条，在有/没有垂直滚动条的情况下正确反应，并且不需要任何绑定。 （唯一的例外是计算出的最小宽度高于列表视图宽度的列表单元格）

list.setCellFactory(l -> new ListCell<String>() {
    { // constructor
        setPrefWidth(0); // avoids the issues
    }

    @Override
    protected void updateItem(String item, boolean empty) {
        super.updateItem(item, empty);
        // do whatever you like
    }
});