Flutter禁用滚动发光效果插件no_scroll_glow的使用

Flutter禁用滚动发光效果插件no_scroll_glow的使用

这种滚动行为与Android的滚动行为类似，但没有发光效果。

如何使用

NoScrollGlow(
  child: ListView.builder(
    itemCount: 10000,
    itemBuilder: (context, i) {
      return ListTile(
        title: Text('$i'),
      );
    },
  ),
),

所有继承自Scroll类的子组件都将不再有滚动发光效果。

NoScrollGlowBehavior

通过ScrollConfiguration Widget应用无滚动发光效果。

ScrollConfiguration(
  behavior: NoScrollGlowBehavior(),
  child: ListView(
    children: [
      // 这里可以添加其他子组件
    ],   
  ),
)

完整示例Demo

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: NoScrollGlow(
          child: ListView.builder(
            itemCount: 10000,
            itemBuilder: (context, i) {
              return ListTile(
                title: Text('$i'),
              );
            },
          ),
        ),
      ),
    );
  }
}

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

1 回复

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


在Flutter中，默认情况下，当用户滚动到列表或页面的边缘时，会出现一个发光效果（通常称为“滚动溢出指示器”）。如果你想禁用这个效果，可以使用 no_scroll_glow 插件。

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  no_scroll_glow: ^1.0.1

然后运行 flutter pub get 来安装依赖。

2. 使用 NoScrollGlow 组件

no_scroll_glow 插件提供了一个 NoScrollGlow 组件，你可以将它包裹在需要禁用滚动发光效果的组件上。例如，如果你有一个 ListView，你可以这样使用：

import 'package:flutter/material.dart';
import 'package:no_scroll_glow/no_scroll_glow.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 Scroll Glow Example'),
        ),
        body: NoScrollGlow(
          child: ListView.builder(
            itemCount: 20,
            itemBuilder: (context, index) {
              return ListTile(
                title: Text('Item $index'),
              );
            },
          ),
        ),
      ),
    );
  }
}

在这个例子中，NoScrollGlow 包裹了 ListView.builder，从而禁用了滚动到边缘时的发光效果。

3. 手动禁用滚动发光效果

如果你不想使用插件，也可以手动禁用滚动发光效果。你可以通过设置 ScrollConfiguration 来实现：

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('No Scroll Glow Example'),
        ),
        body: ScrollConfiguration(
          behavior: ScrollBehaviorModified(),
          child: ListView.builder(
            itemCount: 20,
            itemBuilder: (context, index) {
              return ListTile(
                title: Text('Item $index'),
              );
            },
          ),
        ),
      ),
    );
  }
}

class ScrollBehaviorModified extends ScrollBehavior {
  [@override](/user/override)
  Widget buildViewportChrome(
      BuildContext context, Widget child, AxisDirection axisDirection) {
    return child;
  }
}
回到顶部