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

Posted 2023-02-23

【中文标题】可滚动的 ListView 将背景颜色渗入相邻的小部件

【英文标题】：Scrollable ListView bleeds background color to adjacent widgets

【发布时间】：2021-08-26 22:39:42

【问题描述】：

我希望使用可滚动的 ListView 创建一个简单的布局，并带有一个不可移动的标题图块。我已将标题图块和 ListView 放入一个 Column 中，因此 Header 可以位于 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(),
            )),
          ])),
    );
  

这里发生了什么？我可能可以使用不同的 Widget 来实现这种布局，但我想知道为什么会出现这种颜色溢出效果？它如何与 Flutter 使用的框布局模型相匹配？

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

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

但是，如果有人知道的话，我仍然想知道原始代码中的布局算法发生了什么。 header tile 的存在不应该阻止我们的 listview 将其元素推入红色 ListTile 拥有的区域吗？

【问题讨论】：

对我来说工作正常，没有发生颜色渗色。在此处查看图片 [图片]imgur.com/a/qhbgnAl。我已经复制了你的代码并在我的本地运行它。它工作正常。您可以运行一次颤振医生并查看颤振和飞镖更新

感谢您的评论。我已经运行了颤振医生并且没有遇到任何错误。我还验证了（模拟）android 上的 Flutter Web 和 Flutter 都会发生错误。我在 pubspec.yaml 中的 SDK 版本是 '>=2.12.0

【参考方案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: () ,
                      ),
                    )

【讨论】：

谢谢！我能够确认在我的示例中将 Material 小部件放在 ListView 的正上方可以解决问题。