Flutter教程：如何移除ListView的过度滚动效果

嘿，我来帮你搞定这个问题！要去掉Android端的圆形过度滚动光晕和iOS端的回弹效果，有两种实用方法，分别适配全局配置和单个ListView的场景：

方法一：全局禁用所有滚动组件的过度滚动效果 #

如果你希望整个App里的所有滚动组件（比如ListView、GridView等）都取消过度滚动效果，可以直接在MaterialApp的主题中配置scrollBehavior：

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Title',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        // 全局关闭过度滚动效果
        scrollBehavior: const ScrollBehavior().copyWith(overscroll: false),
      ),
      home: Scaffold(
        body: Center(
          child: ListView.builder(
            shrinkWrap: true,
            itemCount: 3,
            itemBuilder: (BuildContext context, int index) {
              return const Text('Some text');
            },
          ),
        ),
      ),
    );
  }
}

方法二：仅针对单个ListView禁用 #

如果你只想让特定的ListView去掉过度滚动效果，可以用两种方式实现：

方式A：使用ScrollConfiguration包裹 #

这种方式能精准控制单个组件的滚动行为，灵活性更高：

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Title',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: Scaffold(
        body: Center(
          // 用ScrollConfiguration包裹ListView，单独关闭过度滚动
          child: ScrollConfiguration(
            behavior: const ScrollBehavior().copyWith(overscroll: false),
            child: ListView.builder(
              shrinkWrap: true,
              itemCount: 3,
              itemBuilder: (BuildContext context, int index) {
                return const Text('Some text');
              },
            ),
          ),
        ),
      ),
    );
  }
}

方式B：直接设置physics属性 #

这是更简洁的方式，给ListView的physics设置ClampingScrollPhysics()，它会让滚动到边界时直接停止，不会出现回弹或光晕效果：

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Title',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: Scaffold(
        body: Center(
          child: ListView.builder(
            shrinkWrap: true,
            // 通过物理效果配置关闭过度滚动
            physics: const ClampingScrollPhysics(),
            itemCount: 3,
            itemBuilder: (BuildContext context, int index) {
              return const Text('Some text');
            },
          ),
        ),
      ),
    );
  }
}

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