Flutter笔记应用问题：ListView滚动时ListTile背景色穿透至搜索框下方

问题场景 #

开发笔记应用时，界面布局为ListView上方设置标题栏与搜索框，滚动ListView时，ListTile的背景色会显示在搜索框下方（文字和图标无此问题）。

代码示例 #

import 'package:flutter/material.dart';

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: EdgeInsets.all(16),
        child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              Text(
                "this is title",
                style: TextStyle(fontSize: 24),
              ),
              Spacer(
                flex: 1,
              ),
              TextField(
                decoration:
                    InputDecoration(fillColor: Colors.green, filled: true),
              ),
              SizedBox(
                height: 20,
              ),
              Expanded(
                  flex: 6,
                  child: ListView.builder(
                      itemCount: 19,
                      itemBuilder: (context, index) {
                        return ListTile(
                          title: Text("some text"),
                          tileColor: Colors.blue[200],
                        );
                      }))
            ]),
      ),
    );
  }
}

现象截图 #

• 未滚动状态：
  
• 滚动后状态：
  

解决方案 #

问题核心是ListView内容超出自身布局边界后，会在上方透明背景的组件下方绘制，以下是几种解决方式：

方法一：给上方组件区域添加不透明背景 #

将标题、搜索框等上方组件包裹在带背景色的Container中，阻断ListView内容穿透：

import 'package:flutter/material.dart';

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: EdgeInsets.all(16),
        child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              Container(
                color: Theme.of(context).scaffoldBackgroundColor,
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  children: [
                    Text(
                      "this is title",
                      style: TextStyle(fontSize: 24),
                    ),
                    Spacer(flex: 1),
                    TextField(
                      decoration:
                          InputDecoration(fillColor: Colors.green, filled: true),
                    ),
                    SizedBox(height: 20),
                  ],
                ),
              ),
              Expanded(
                  flex: 6,
                  child: ListView.builder(
                      itemCount: 19,
                      itemBuilder: (context, index) {
                        return ListTile(
                          title: Text("some text"),
                          tileColor: Colors.blue[200],
                        );
                      }))
            ]),
      ),
    );
  }
}

方法二：给ListView设置裁剪行为 #

显式设置ListView的clipBehavior，限制内容仅在自身边界内绘制：

// 修改ListView部分代码
Expanded(
  flex: 6,
  child: ListView.builder(
    clipBehavior: Clip.hardEdge,
    itemCount: 19,
    itemBuilder: (context, index) {
      return ListTile(
        title: Text("some text"),
        tileColor: Colors.blue[200],
      );
    }
  )
)

方法三：给整体布局添加背景色 #

直接给Padding或Column设置背景色，让整个布局背景不透明：

// 修改Padding部分代码
Padding(
  padding: EdgeInsets.all(16),
  color: Theme.of(context).scaffoldBackgroundColor,
  child: Column(
    // 原有代码不变
  ),
)

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