Flutter ListView.builder中自定义绘制列表项不显示问题

问题根因 #

你的自定义绘制组件无法在ListView中显示的核心原因是noteWidget没有设置显式宽高约束：

• 直接作为Scaffold的body使用时，Stack会自动填充body的可用空间，子Container可以拿到完整的宽高尺寸，CustomClipper可以基于这个尺寸正常计算绘制路径
• 作为ListView.builder的列表项使用时，列表项默认没有固定宽高约束，你内部的Container也未指定尺寸，最终组件拿到的高度为0，CustomClipper计算时所有Y轴坐标都会被缩放到0，自然无法渲染出任何内容

解决方法 #

给noteWidget外层加固定尺寸约束即可，尺寸和你自定义Clipper的原设计尺寸匹配即可，修改后的代码如下：

Widget noteWidget() {
  // 显式指定组件宽高，如需要占满列表宽度可将width改为double.infinity
  return SizedBox(
    width: 304,
    height: 93,
    child: Stack(
      children: [
        ClipShadowPath(
          shadow: BoxShadow(
              color: Color(0x26000000), offset: Offset(0, 1), blurRadius: 3),
          clipper: NoteBoxCustomeClipper(),
          child: Container(
            color: Colors.white,
          ),
        ),
        ClipShadowPath(
          shadow: BoxShadow(
              color: Color(0x26000000), offset: Offset(0, 1), blurRadius: 3),
          clipper: NoteEdgeCustomeClipper(),
          child: Container(
            color: Colors.white,
          ),
        ),
      ],
    ),
  );
}

修改后重新运行即可在ListView.builder中正常渲染出你的自定义组件。

内容的提问来源于stack exchange，提问作者wafaa sisalem