在 ListView.builder 的末尾提供一些额外的空间答案

【问题标题】：Provide some extra space at the end of ListView.builder在 ListView.builder 的末尾提供一些额外的空间
【发布时间】：2020-10-01 21:51:40
【问题描述】：

下面是我的代码，我想在列表项的末尾添加一些高度为 50 的额外空间。因为当我的堆栈的第二个孩子出现时，它几乎与列表视图的最后一项重叠。我尝试用列包装 ListView.builder 并最后添加了一个容器，但破坏了我的整个结构。对于这种情况，我必须将列包装到 Single scrollable 中，它将堆栈 2nd 小部件推到 ListItem 的末尾。（但我不希望 Stack 2nd 对象可滚动）。如您所见，我无法点击 HotDog。

 body: Stack(
        children: <Widget>[
          ListView.builder(
                  itemCount: itemData.length,
                  shrinkWrap: true,
                  scrollDirection: Axis.vertical,
                 itemBuilder: (BuildContext context,int index){ 
                   return Text(data[index].name);
 }

                     ),

          Padding(
            padding: const EdgeInsets.all(10.0),
            child: Container(
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(8),
                color: Colors.cyan
              ),
              padding: EdgeInsets.all(10),
              height: 60,

            ),
          )
        ],
      ),

【问题讨论】：

标签： flutter dart

【解决方案1】：

你如何像下面的代码一样添加空的最后一项？

          ListView.builder(
                  itemCount: itemData.length + 1,
                  shrinkWrap: true,
                  scrollDirection: Axis.vertical,
                 itemBuilder: (BuildContext context,int index){
                   if (index == item.Data.length) {
                       return SizedBox(height: 50);
                   } else {
                       return Text(data[index].name);
                   }
                 }
            ),

【讨论】：

这是一个好方法，但如果他拥有的物品超过了手机的高度怎么办。例如：拥有 10 个这些项目。在项目底部添加一个额外的 SizedBox 是不够的。
@uni 嗯...我添加了一个列表项。所以我认为无论手机的高度如何，列表都不能超过高度。
你是什么意思@Kuku？对不起，我没明白你第二句话的意思。您提供的此解决方案将起作用，但仅当列表视图中所有项目的高度组合与手机的高度相同时。您只是在列表末尾添加一个 SizedBox 对吗？因此，当列表中的项目太多时，SizedBox 不会显示。它只显示在列表的末尾。希望这能澄清我想说的。您仍然有一个很好的答案，但它不适用于包含许多项目的列表视图。
祝你的项目好运 :)

【解决方案2】：

ListViewBuilder 应该包裹在 Expanded 小部件内，该小部件将全屏显示并根据需要给容器底部宽度。

示例：

var itemData = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
     Stack(
            children: <Widget>[
              Column(
                children: <Widget>[
                  Expanded(
                    child: Container(
                      margin: EdgeInsets.only(bottom: 20),
                      child: ListView.builder(
                          itemCount: itemData.length,
                          shrinkWrap: true,
                          scrollDirection: Axis.vertical,
                          itemBuilder: (BuildContext context, int index) {
                            return Container(
                                height: 80,
                                child: Text("Text :" + index.toString()));
                          }),
                    ),
                  ),
                  Align(
                    alignment: Alignment.bottomCenter,
                    child: Padding(
                      padding: const EdgeInsets.all(10.0),
                      child: Container(
                        decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(8),
                            color: Colors.cyan),
                        padding: EdgeInsets.all(10),
                        height: 60,
                      ),
                    ),
                  )
                ],
              ),
            ],


 ),

输出：

【讨论】：

这也有效。它是使用 Positioned 小部件的替代方法:)

【解决方案3】：

由于您的 listview.builder 在堆栈中，因此您只需使用 Positioned 小部件即可。只需使用 Positioned 包装您的列表视图，如下所示：

Positioned(
 bottom:50, //adjust this since this is the padding inside the stack
  child:Container(
width:MediaQuery.of(context).size.width //width of the whole phone
child: ListView.builder(
          itemCount: itemData.length,
          shrinkWrap: true,
          scrollDirection: Axis.vertical,
         itemBuilder: (BuildContext context,int index){ 
           return Text(data[index].name);
    }
  ),
 ),
),

为确保您的 Container 保持在底部，使用定位的小部件将其包裹起来，并将底部属性设置为 0：

Positioned(
 bottom:0, //adjust this since this is the padding inside the stack
  child:Container(),
),

这是一个一分钟的剪辑，展示了如何使用 Positioned 小部件：https://www.youtube.com/watch?v=EgtPleVwxBQ

【讨论】：

嘿@Uni，我已经尝试过您的方法，但收到此错误。 “断言失败：第 1648 行第 16 行：'constraints.hasBoundedWidth'：不正确。”
@PraveenGupta 你必须用容器包装它。我更新了答案
每当我在定位的 wigdet 中提供底部值时，它会将我带到屏幕底部并且我无法滚动到任何地方。

【解决方案4】：

默认情况下没有特定的方法，您必须使用自己的逻辑手动完成

          ListView.builder(
                  itemCount: itemData.length,
                  shrinkWrap: true,
                  scrollDirection: Axis.vertical,
                 itemBuilder: (BuildContext context,int index){ 
                   if(index == itemData.length - 1 )
                     return Padding(

                      padding: EdgeInsets.only(bottom : 50),
                      child : Text(data[index].name)
                   );
                   return Text(data[index].name);
                 }),

【讨论】：