在颤动中滚动列表视图时剪辑填充

Posted 2023-02-23

【中文标题】在颤动中滚动列表视图时剪辑填充

【英文标题】：clip padding while scrolling on list view in flutter

【发布时间】：2020-08-26 21:21:37

【问题描述】：

我在 android 中使用 clipToPadding 在水平和垂直滚动时剪切填充。颤振中有没有像clipToPadding这样的特定属性？行为看起来很相似：

   ListView.separated(
        padding: EdgeInsets.all(16),
        scrollDirection: Axis.horizontal,
        separatorBuilder: (context, index) => SizedBox(
          width: 8,
        ),
        itemBuilder: (BuildContext context, int index) 
          return Text(data[index].name);
        ,
        itemCount: data.length,
      )

【问题讨论】：

您能提供任何示例代码吗？如果您希望 Scrollable 具有裁剪的填充 - 您只需用 Padding 包裹它。

@Thepeanut 如果您不希望孩子们被夹在填充物上怎么办？这就是在 android 中将 false 设置为 clipToPadding 所做的事情。

@SIMMORSAL 然后在 ListView 本身中进行填充就足够了。滚动区域将具有在滚动时不会裁剪子项的填充。它在滚动时更像是一个偏移量。

@Thepeanut 那么这个问题的答案就是把padding: EdgeInsets.all(16)改成EdgeInsets.only(left: 30, right: 30, top 16, bottom: 16)这样的东西，因为在android中给相当于ListView的填充实际上是剪辑内容，并给它@ 987654328@会显示内容

@SIMMORSAL 我不是原生 android 开发人员，所以不确定 clipToPadding 参数，但是，如果你希望滚动视图具有不裁剪其子项的填充 - 它是填充参数，如果你想要一个填充子元素的填充，那么它就是滚动视图小部件本身的填充。

【参考方案1】：

我不是原生 android 开发人员，但如果我确实理解“clipToPadding”选项，您只想从 ListView 中删除填充并在其周围添加填充。

Container(
              height: 100.0,
              padding: EdgeInsets.symmetric(horizontal: 16.0),
              child: ListView.separated(
                scrollDirection: Axis.horizontal,
                separatorBuilder: (context, index) => SizedBox(
                  width: 8,
                ),
                itemBuilder: (BuildContext context, int index) 
                  return AspectRatio(
                    aspectRatio: 1.0,
                    child: Container(
                      color: Colors.grey[300],
                      child: Center(child: Text(index.toString())),
                    ),
                  );
                ,
                itemCount: 20,
              ),
            ),

或者使用容器（只是设置列表视图的最大高度）+单独的填充：

Container(
              height: 100.0,
              child: Padding(
                padding: EdgeInsets.symmetric(horizontal: 16.0),
                child: ListView.separated(
                  scrollDirection: Axis.horizontal,
                  separatorBuilder: (context, index) => SizedBox(
                    width: 8,
                  ),
                  itemBuilder: (BuildContext context, int index) 
                    return AspectRatio(
                      aspectRatio: 1.0,
                      child: Container(
                        color: Colors.grey[300],
                        child: Center(child: Text(index.toString())),
                      ),
                    );
                  ,
                  itemCount: 20,
                ),
              ),
            ),