no_glow_scroll #

Flutter 包用于添加 NoGlowScroll 小部件。

此小部件会在滚动时（例如 ListView、SingleChildScrollView 等）在过度滚动时移除发光效果。

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:no_glow_scroll/no_glow_scroll.dart'; // 导入 no_glow_scroll 包

void main() {
  runApp(MyApp()); // 启动应用程序
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo', // 设置应用标题
      theme: ThemeData( // 配置主题
        primarySwatch: Colors.blue,
      ),
      home: HomePage(), // 设置主页
    );
  }
}

class HomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: NoGlowScroll( // 使用 NoGlowScroll 小部件包裹 ListView
        child: ListView.builder( // 创建一个 ListView
          itemCount: 20, // 列表项数量
          itemBuilder: (context, index) { // 每个列表项的构建函数
            return ListTile( // 每个列表项为 ListTile
              title: Text("Item ${index + 1}"), // 设置列表项标题
            );
          },
        ),
      ),
    );
  }
}

更多关于Flutter去除滚动发光效果插件no_glow_scroll的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

vueper 1楼

更多关于Flutter去除滚动发光效果插件no_glow_scroll的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

在 Flutter 中，默认情况下，当用户滚动到列表的顶部或底部时，会出现一个发光的视觉效果（称为 “overscroll glow”）。如果你希望去除这个效果，可以使用 no_glow_scroll 插件。

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 no_glow_scroll 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  no_glow_scroll: ^1.0.0

然后运行 flutter pub get 来获取依赖。

2. 使用 `NoGlowScroll` 组件

no_glow_scroll 插件提供了一个 NoGlowScroll 组件，你可以将它包裹在需要去除滚动发光效果的 Scrollable 组件（如 ListView、GridView 等）外面。

示例代码：

import 'package:flutter/material.dart';
import 'package:no_glow_scroll/no_glow_scroll.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('No Glow Scroll Example'),
        ),
        body: NoGlowScroll(
          child: ListView.builder(
            itemCount: 20,
            itemBuilder: (context, index) {
              return ListTile(
                title: Text('Item $index'),
              );
            },
          ),
        ),
      ),
    );
  }
}

3. 解释

NoGlowScroll 组件包裹了 ListView.builder，这样在滚动到顶部或底部时，就不会出现发光的视觉效果。
你可以将 NoGlowScroll 组件用于任何 Scrollable 组件，如 ListView、GridView、SingleChildScrollView 等。

4. 自定义配置

NoGlowScroll 组件还提供了一些可选参数，允许你进一步自定义滚动行为：

color: 设置滚动条的颜色。
thickness: 设置滚动条的厚度。
radius: 设置滚动条的圆角半径。

示例：

NoGlowScroll(
  color: Colors.blue,
  thickness: 5.0,
  radius: Radius.circular(10.0),
  child: ListView.builder(
    itemCount: 20,
    itemBuilder: (context, index) {
      return ListTile(
        title: Text('Item $index'),
      );
    },
  ),
)

5. 其他方法

如果你不想使用插件，也可以通过自定义 ScrollBehavior 来去除滚动发光效果。例如：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Custom Scroll Behavior'),
        ),
        body: ScrollConfiguration(
          behavior: MyCustomScrollBehavior(),
          child: ListView.builder(
            itemCount: 20,
            itemBuilder: (context, index) {
              return ListTile(
                title: Text('Item $index'),
              );
            },
          ),
        ),
      ),
    );
  }
}

class MyCustomScrollBehavior extends ScrollBehavior {
  [@override](/user/override)
  Widget buildViewportChrome(BuildContext context, Widget child, AxisDirection axisDirection) {
    return child; // 去除滚动发光效果
  }
}

Flutter去除滚动发光效果插件no_glow_scroll的使用