删除 ListView.builder 后的多余空间答案

【问题标题】：Remove extra space after ListView.builder删除 ListView.builder 后的多余空间
【发布时间】：2023-01-31 03:34:00
【问题描述】：

我试图在 listview 生成器之后删除额外的空间，但我没有成功我尝试了不同的方法，比如我用 MediaQuery.removePadding 包装了我的 listview.builder 并将填充值设置为零我还将 listview.builder 的填充设置为零同样，但我没有得到所需的输出。我不知道我在哪里犯了错误。

这是代码：

SizedBox(
    width: widget.isDialog ? 600 : double.infinity,
    height: MediaQuery.of(context).size.height / 2.5,
    child: ThemeConfig.selectFilterAsCheckBox
        ? Column(
            crossAxisAlignment: CrossAxisAlignment.end,
            children: [
              Flexible(
                child: ListView.builder(
                    physics: const ScrollPhysics(),
                    itemCount: tags.length,
                    itemBuilder: (context, index) {
                      return CheckboxListTile(
                        value: tempSelectedTags.contains(tags[index].id),
                        onChanged: (e) {
                          setState(() {
                            if (tempSelectedTags.contains(tags[index].id)) {
                              tempSelectedTags.remove(tags[index].id);
                            } else {
                              tempSelectedTags.add(tags[index].id);
                            }
                          });
                        },
                        title: Text(
                          tags[index].name,
                          style: !tempSelectedTags.contains(tags[index].id)
                              ? textTheme.labelMedium?.copyWith(
                                  color: ThemeConfig.colorgreen)
                              : textTheme.titleSmall?.copyWith(
                                  color: ThemeConfig.colorgreen),
                        ),
                      );
                    }),
              ),
              Padding(
                padding: const EdgeInsets.only(bottom: 12),
                child: PrimaryButton(
                  title: Apply,
                  onPressed: () {
                    viewModel.setting(tempSelectedTags);
                    Navigator.pop(context);
                  },
                ),
              ),
            ],
          )

【问题讨论】：

你能简化小部件吗，这里的数据是未知的。
我认为问题在于您的 ListView 嵌套在大小恒定为 MediaQuery.of(context).size.height / 2.5 的 SizedBox 中。因此，即使 List 中只有一个元素，ListView 仍然会占用比需要更多的空间，而实际上它可能是 SizedBox 填充了所有空白空间。由于上大学的原因，过去两个月我没有使用 Flutter，但我想你可以尝试使用 Container 或 Flexible 或类似的东西来代替 SizedBox。
@YeasinSheikh 感谢您的回复。是的，我认为它是一个对话框，当我点击这个弹出窗口的过滤器按钮时，你可以在输出中看到
@Samaranth 是的，我需要小型设备的高度，它在 iPhone 等小型设备上工作正常。
好吧，你喜欢灵活的高度对话框吗？

标签： flutter dart listview flutter-layout

【解决方案1】：

您可以在 listView 中包含 shrinkWrap: true, 这将解决，

Flexible(
  child: ListView.builder(
      shrinkWrap: true,
      physics: const ScrollPhysics(),

但我更喜欢将项目长度增加一个。

ListView.builder(
  physics: const ScrollPhysics(),
  itemCount: itemLength + 1,
  itemBuilder: (context, index) {
    if (index == itemLength) {
      return Align(
        alignment: Alignment.centerRight,
        child: Padding(
            padding: const EdgeInsets.only(bottom: 11),
            child: Text("BTN")),
      );
    }
    return CheckboxListTile(
      value: true,
      onChanged: (e) {},
      title: Text(
        "tags[index].name",
      ),
    );
  }),

【讨论】：

shrinkWrap: true 的问题是，它向上移动了按钮，现在我在按钮之后有那个空白空间
删除height: MediaQuery.of(context).size.height / 2.5,
如果你失败了，请通过添加示例完整对话框 sn-p 来告诉我
它不起作用只是将按钮向上移动到复选框附近（也删除了高度）但现在按钮下方是空白区域。我不知道如何在复选框中添加图像我很抱歉我是 StackOverflow 和 Flutter 的新手
第二种方法对我有用......谢谢

【解决方案2】：

你需要remove the SizedBox height，在ListView.builder中设置shrinkWrap: true并设置physics : NeverScrollableScrollPhysics()

你的代码将是

SizedBox(
    width: widget.isDialog ? 600 : double.infinity,
    child: ThemeConfig.selectFilterAsCheckBox
        ? Column(
            crossAxisAlignment: CrossAxisAlignment.end,
            children: [
              Flexible(
                child: ListView.builder(
                    shrinkWrap: true
                    physics: const NeverScrollableScrollPhysics(),
                    itemCount: tags.length,
                    itemBuilder: (context, index) {
                      return CheckboxListTile(
                        value: tempSelectedTags.contains(tags[index].id),
                        onChanged: (e) {
                          setState(() {
                            if (tempSelectedTags.contains(tags[index].id)) {
                              tempSelectedTags.remove(tags[index].id);
                            } else {
                              tempSelectedTags.add(tags[index].id);
                            }
                          });
                        },
                        title: Text(
                          tags[index].name,
                          style:!tempSelectedTags.contains(tags[index].id)
                              ? theme.textTheme.labelMedium?.copyWith(
                                  color: ThemeConfig.colorTertiary)
                              : theme.textTheme.titleSmall?.copyWith(
                                  color: ThemeConfig.colorTertiary),
                        ),
                      );
                    }),
              ),
              Padding(
                padding: const EdgeInsets.only(bottom: sdPaddingMedium),
                child: SdPrimaryButton(
                  title: appLocalizations.btnApply,
                  onPressed: () {
                    viewModel.setTags(tempSelectedTags);
                    Navigator.pop(context);
                  },
                ),
              ),
            ],
          )

【讨论】：

感谢您的回复.. 我试过它只是向上移动应用按钮，现在空白区域在按钮下方，我通过设置 shrinkWrap: true 得到这种行为，

【解决方案3】：

解决方案是了解 Alertdialog 的工作原理。必须删除 Flexible 小部件并且列表必须是可滚动的。这是一个快速的答案。

showDialog(
              context: context,
              builder: (context) {
                return AlertDialog(
                  title: Text('Title'),
                  content: SizedBox(
                    width: 600,
                    height: MediaQuery.of(context).size.height / 2.5,
                    child: ListView.builder(
                        itemCount: tags.length,
                        itemBuilder: (context, index) {
                          return CheckboxListTile(
                            title: Text(tags[index]),
                            value: false,
                            onChanged: (e) {},
                          );
                        }),
                  ),
                  actions: [
                    ElevatedButton(
                      child: Text('Apply'),
                      onPressed: () {
                        Navigator.pop(context);
                      },
                    ),
                  ],
                );
              },
            )

输出如下：

【讨论】：

【解决方案4】：

您可以使用 Listview.builder 的 itemExtent 属性灵活的（孩子：ListView.builder（ itemExtent:tags.length+20, 收缩包裹：真，物理学：const ScrollPhysics(),

【讨论】：

【解决方案5】：

要删除 ListView.builder 之后的多余空间，您可以这样做：

child: ListView.builder(
        padding: EdgeInsets.all(0.0),

【讨论】：