flutter 删除ListView.builder后面的多余空格

mnemlml8 于 2022-12-19 发布在 Flutter

关注(0)|答案(4)|浏览(153)

我尝试删除列表视图构建器后的额外空间，但没有成功。我尝试了不同的方法，如我用MediaQuery Package 了我的列表视图构建器。removePadding并将填充值设置为零。我还将列表视图构建器的填充值设置为零，但我没有得到所需的输出。我不知道我在哪里犯了错误。
下面是代码：

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);
                  },
                ),
              ),
            ],
          )

flutter

来源：https://stackoverflow.com/questions/73498603/remove-extra-space-after-listview-builder

4条答案

按热度按时间

vawmfj5a1#

您可以在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",
      ),
    );
  }),

赞(0）回复(0）举报 2022-12-19

mtb9vblg2#

您需要remove the SizedBox height，在ListView构建器中设置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);
                  },
                ),
              ),
            ],
          )

赞(0）回复(0）举报 2022-12-19

b1payxdu3#

解决方法是理解Alertdialog是如何工作的。2灵活的小部件必须被移除并且列表必须是可滚动的。3这里是一个快速的答案。

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);
                      },
                    ),
                  ],
                );
              },
            )

输出如下所示：