flutter 显示较少项目时收缩列表视图

kb5ga3dv 于 2023-02-05 发布在 Flutter

关注(0)|答案(1)|浏览(142)

我尝试做一个小部件，显示两个列表视图（一个在组标题下，另一个在警报标题下），具有最小和最大高度。
我已经通过一个ConstrainedBox Package 了所有的东西，但是我一直无法得到一个最小的高度工作。理想的是，我希望列表喜欢所有的东西都收缩，如果有更少的项目在两个列表。
例如，在下面的屏幕截图中，一个列表中只有两个项目，而另一个列表中没有任何项目，因此我希望将整个小部件缩小到大约当前大小的一半

从我在小部件检查器中看到的情况来看，列表本身并没有占用比它所需要的更多的空间，但是列似乎占用了父约束允许的所有空间。我试过扰乱mainAxisSize: MainAxisSize.min,，但这似乎没有任何效果。
我怎样才能避免这个列占用所有额外的空间？

return ConstrainedBox(
  constraints: const BoxConstraints(maxHeight: 300, minHeight: 50),
  child: Row(
    crossAxisAlignment: CrossAxisAlignment.stretch,
    children: [
      Flexible(
        flex: 1,
        child: Card(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              const Padding(padding: EdgeInsets.all(10), child: Text("Groups")),
              const Divider(),
              ListView.builder(
                  shrinkWrap: true,
                  itemCount: 2,
                  itemBuilder: (context, index) => ListTile(
                        ...
                      ))
            ],
          ),
        ),
      ),
      Flexible(
        flex: 1,
        child: Card(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              const Padding(padding: EdgeInsets.all(10), child: Text("Alerts")),
              const Divider(),
              ListView.builder(
                  shrinkWrap: true,
                  itemCount: 2,
                  itemBuilder: (context, index) => ListTile(
                        ...
                      ))
            ],
          ),
        ),
      ),
    ],
  ),
);

建议后编辑：

flutter

来源：https://stackoverflow.com/questions/75322505/shrink-list-view-when-less-items-are-present

1条答案

按热度按时间

juud5qan1#

试试这个

从行中删除crossAxisAlignment: CrossAxisAlignment.stretch
将mainAxisSize: MainAxisSize.min添加到列中
编辑（回应评论）：*

使列表大小相同。不确定是否有直接的方法。
我能想到的一个方法是将两个列表的itemCount设置为包含最多项的列表的长度，并且在itemBuilder中，当索引中没有可显示的项时，返回一个空的ListTile。

import 'dart:math';

const groupsCount = 2;
const alertsCount = 4;
final biggestCount = max(groupsCount, alertsCount);

Row(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    Expanded(
      child: Card(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            const Padding(padding: EdgeInsets.all(10), child: Text("Groups")),
            const Divider(),
            ListView.builder(
              shrinkWrap: true,
              itemCount: biggestCount,
              itemBuilder: (_, index) {
                if (index < groupsCount) {
                  return ListTile(title: Text('Group $index'));
                } else {
                  return const ListTile();
                }
              },
            )
          ],
        ),
      ),
    ),
    Expanded(
      child: Card(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            const Padding(padding: EdgeInsets.all(10), child: Text("Alerts")),
            const Divider(),
            ListView.builder(
              shrinkWrap: true,
              itemCount: biggestCount,
              itemBuilder: (_, index) {
                if (index < alertsCount) {
                  return ListTile(title: Text('Alert $index'));
                } else {
                  return const ListTile();
                }
              },
            )
          ],
        ),
      ),
    ),
  ],
);

赞(0）回复(0）举报 2023-02-05

我来回答

flutter 显示较少项目时收缩列表视图

1条答案

相关问题

热门标签

最新问答