如何让ListTile高度为零

Question

我正在尝试用

ListView

 构建一个 

ListTile

代码在这里：

List<bool> isRed2 = [
   true,true,false,false,
   true,true,true,false,
   false,false,true,true,
   false,true,true,true,
   true,];

 return ListView.builder(
    padding: EdgeInsets.all(0),
    scrollDirection: Axis.vertical,
    shrinkWrap: true,
    itemCount: isRed2.length,
    itemBuilder: (context, i) => ListTile(
        dense: true,
        minVerticalPadding: 0,
        contentPadding: EdgeInsets.all(0),
        minLeadingWidth: 0,
        horizontalTitleGap: 0,
        title: isRed2[i]
            ? Container(
                height: 50,
                color: Colors.red,
              )
            : Container(
                height: 1,
                color: Colors.blue,
              )));

结果看起来像：

我设置了那些值为 false height = 1 的元素，但它们仍然有很多空间。

知道如何设置高度以匹配小部件或跳过这些值是错误的吗？

问题：

1. 无法添加Container或

   SizedBox

   “外部”

   ListTile

   ，显示长列表时会变慢。
需要

2. ListTile

   才能显示得更快，添加没有

   ListTile

   的小部件会减慢速度。
3. 将值为“true”的元素复制到新列表并通过它进行构建对于我的情况来说不是一个好主意。

Answer 1

尝试设置

visualDensity

了解更多关于

ListTile

Widget

ListTile(
    contentPadding: EdgeInsets.zero,
    dense: true,
    visualDensity: VisualDensity(vertical: -4),
    title: Text('ListTile'),
),

Answer 2

ListTiles

目视高度应最多为 32（密集：true）或 40（密集：false），

它将根据场景获取默认高度。如果需要，不要使用 ListTile，而是使用列和行。

return ListView.builder(
    padding: EdgeInsets.all(0),
    scrollDirection: Axis.vertical,
    itemCount: isRed2.length,
    itemBuilder: (context, i) => isRed2[i]
        ? Container(
            height: 50,
            color: Colors.red,
          )
        : Container(
            height: 1,
            color: Colors.blue,
          ));

据我所知，添加

SizedBox "outside" ListTile

不会造成任何性能问题，您可以删除

 shrinkWrap: true

，您可以在 SrinkWarp 上查看此 视频。

您可以用

ListTile

包裹

SizedBox

。

return ListView.builder(
    padding: EdgeInsets.all(0),
    scrollDirection: Axis.vertical,
    itemCount: isRed2.length,
    itemBuilder: (context, i) => SizedBox(
          height: isRed2[i] ? 50 : 1,
          child: ListTile(
            tileColor: isRed2[i] ? Colors.red : Colors.blue,
          ),
        ));

还要检查sliver的性能。

Answer 3

首先，VisualDensity 是设置列表图块的紧凑程度，它不会使高度为零。 您不能拥有高度为零的列表图块。

在list_tile.dart文件（列表tile的实现）的第1071行，你可以看到这个：

  double get _defaultTileHeight {
    final bool hasSubtitle = subtitle != null;
    final bool isTwoLine = !isThreeLine && hasSubtitle;
    final bool isOneLine = !isThreeLine && !hasSubtitle;

    final Offset baseDensity = visualDensity.baseSizeAdjustment;
    if (isOneLine)
      return (isDense ? 48.0 : 56.0) + baseDensity.dy;
    if (isTwoLine)
      return (isDense ? 64.0 : 72.0) + baseDensity.dy;
    return (isDense ? 76.0 : 88.0) + baseDensity.dy;
  }

如果你追踪它，你最终会看到这个：

size = constraints.constrain(Size(tileWidth, tileHeight));
assert(size.width == constraints.constrainWidth(tileWidth));
assert(size.height == constraints.constrainHeight(tileHeight));

这意味着它的高度不会为零 另外，here中的列表图块文档中的第一行是：

单个固定高度行，通常包含一些文本以及前导或尾随图标。