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

Question

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

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

但是，如果我们向下滚动半个图块，列表图块的绿色似乎会从 header 中挤出红色。绿色方块中的文本没有同样的问题，并且被 header 方块

正确遮挡

重建的最少代码

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(),
            )),
          ])),
    );
  }
}

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

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

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

不过，如果有人知道的话，我还是想知道原始代码中的布局算法是怎么回事。 header tile 的存在不应该阻止我们的列表视图将其元素推入红色 ListTile 拥有的区域吗？

Answer 1

请尝试用 Material 小部件包装 listTile 我不知道为什么，但是 tileColor 在小部件下保持活动状态，同时向下滚动 tile 的颜色在上面的小部件下。出于某种原因，用 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: () {},
                      ),
                    )

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

Scrollable ListView bleeds background color to adjacent widgets

listview

flutter