flutter - 没有边距的卡片 ListView 仍然显示卡片之间的背景

Question

考虑以下示例:

Widget build() => ListView(children: [
    Card(
        child: ListTile(title: Text("Hello")),
        margin: EdgeInsets.only(top: 0, bottom: 0)),
    Card(
        child: ListTile(title: Text("Hello")),
        margin: EdgeInsets.only(top: 0, bottom: 0))
  ]);

当它在 ListView 的黑色背景上呈现并且我上下滚动时，我看到一些黑线随机出现在卡片之间。

我猜这是由于舍入误差造成的。有没有办法让卡片稍微重叠，这样就不会出现故障？

更新:

elevation: 0.0 没有帮助。

Answer 1

有一些方法可以使它们重叠(例如使用 Stack 小部件)但是不应该考虑这种方法，因为有更简单的方法。 Card 小部件的实现相当简单和小巧，没有什么特别之处，因此您可以轻松创建自己的小部件来创建您想要的行为!我向您展示一个示例，它会产生您可能寻求的输出:

ListView(
  children: [
    Card(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        children: <Widget>[
          ListTile(
            title: Text('Hello'),                 
          ),
          ListTile(
            title: Text('Hello'),
          )
        ],
      ),
    )
  ],
),

我使用 Card 小部件作为样式容器，并使用了一个 Column 小部件，它不会滚动并且可以有多个小部件，这些小部件将使用 垂直呈现MainAxisAlignment.start 属性使内容左对齐。

编辑

CustomScrollView 中带有 SliverList 的变体:

CustomScrollView(
  slivers: [
    SliverAppBar(
      title: Text('Title'),
    ),
    SliverToBoxAdapter(
      child: Card(
        child: CustomScrollView(
          shrinkWrap: true,
          slivers: [
            SliverList(
              delegate: SliverChildBuilderDelegate((context, index) {
                return ListTile(
                  title: Text('Hello'),
                );
              }, childCount: 5),
            ),
          ],
        ),
      ),
    ),
  ],
),