Flutter：防止边缘削波

Posted 2023-02-23

【中文标题】Flutter：防止边缘削波

【英文标题】：Flutter: Prevent Margin Clipping

【发布时间】：2018-12-02 03:41:03

【问题描述】：

我有一个水平的ListView.builder。所附图片展示了我的 UI。

listView（红色）。 itemBuilder 按钮小部件（蓝色）；边距（绿色）。

当列表滚动到边缘时，没有边距，我的按钮将明显靠在屏幕边缘。

如果我通过Container 或ListView 添加margin 或padding，它会按预期移动我的用户界面。

但是，当我滚动列表时，列表中的项目现在被此边距剪裁，并且不会滚动到屏幕边缘，而是滚动到边距边界。

我怎样才能有一个在滚动时不剪裁我的列表的插图？

【问题讨论】：

添加一个虚拟填充小部件（或 sizedbox 或容器，...）作为列表中的第一项？我通常会在列表项本身上进行填充。

在ListView.builder中使用clipBehavior: Clip.none

【参考方案1】：

ListView 为此目的拥有一个padding 属性。

以下代码会将第一个元素偏移 8。但该填充不会剪切列表内容，而不是将 ListView 包装在 Padding 内。

   ListView.builder(
      padding: EdgeInsets.only(top: 8.0),
      itemBuilder: (context, index) 
        return Container(
          height: 42.0,
          color: index % 2 == 0 ? Colors.red : Colors.blue,
        );
      ,
    ),

【讨论】：

这不是水平滚动和左/右填充的情况。

我在两个轴上测试了它，有和没有反向，它确实有效。

如果它对您不起作用，请提交错误或在此处添加您的代码。因为那不应该。 padding 的 listview 仅存在于不剪辑它的孩子。