可滚动 ListView 将背景颜色渗透到相邻的小部件

Question

我希望使用可滚动的 ListView 和不可移动的标题图块创建一个简单的布局。我已将标题图块和 ListView 放入列中，因此标题可以位于 ListView 上方，而无需滚动到屏幕之外。但是，当滚动 ListView 时，我的标题图块似乎呈现在其“下方”滚动的任何 ListView 图块的颜色。

启动时，该应用程序如下所示：

但是，如果我们向下滚动半个图块，列表图块的绿色似乎会挤出标题中的红色。绿色图块中的文本没有相同的问题，并且被标题图块正确遮挡

重建的最少代码

void main() => runApp(MyTestApp2());

class MyTestApp2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: Text("AppBar Header"),
          ),
          body: Column(children: <Widget>[
            ListTile(
              title: Center(child: Text("This Header Should be Red")),
              tileColor: Colors.redAccent,
            ),
            Expanded(child: ListView(
              children: List.generate(20, (int index) => "List Item $index")
                  .map((n) => ListTile(
                      title: Text(n.toString()),
                      tileColor: Colors.lightGreen))
                  .toList(),
            )),
          ])),
    );
  }
}

这里发生了什么？我可能可以使用不同的小部件来实现此布局，但我想知道为什么会发生这种颜色溢出效果？它如何适应 Flutter 使用的盒子布局模型？

编辑：可以通过将红色 ListTile 包装在 Container 小部件中，并将该容器上的颜色属性设置为红色来解决眼前的问题，如下所示：

        Container(
          color: Colors.redAccent,
          child: ListTile(....

但是，如果有人知道的话，我仍然想知道原始代码中的布局算法发生了什么。标题图块的存在是否应该阻止我们的列表视图将其元素推入红色 ListTile 拥有的区域？

Answer 1

请尝试用 Material 小部件包装 listTile 我不知道为什么，但在向下滚动瓦片颜色到上面的小部件下方时，tileColor 在小部件下保持活动状态。由于某种原因，用 Material 包裹 listTile 应该可以解决这个问题。

Material(
  child: ListTile(
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(10),
    ),
    tileColor:const Color.fromARGB(255, 247, 247, 247),
    leading: Icon(
      Icons.monetization_on_outlined,
      color: Theme.of(context).primaryColor,
      size: 50,
    ),
    title: Text(
      "Some Strings",
    ),
    subtitle: Text("Some Strings"),
    onLongPress: () {},
    onTap: () {},
  ),
)