Flutter交互反馈插件bouncy_listener的使用

Flutter交互反馈插件bouncy_listener的使用

bouncy_listener 是一个简单易用且自动取消的防抖器。它可以帮助你在用户与界面频繁互动时避免过多的回调调用。

使用方法

以下是如何使用 bouncy_listener 的示例：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Bouncy Listener Example')),
        body: MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool callbackCalled = false;

  void callback() {
    setState(() {
      callbackCalled = true;
      print('Callback called');
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          ElevatedButton(
            onPressed: () {
              // 创建一个防抖器实例，并设置回调函数
              BouncyListener debouncer = BouncyListener(
                callback,
                const Duration(seconds: 1),
              );
              // 调用输入方法触发回调
              debouncer.input();
            },
            child: Text('触发回调'),
          ),
          SizedBox(height: 20),
          Text(callbackCalled ? '回调已调用' : '回调未调用'),
        ],
      ),
    );
  }
}

示例代码

以下是完整的示例代码，展示了如何在 Flutter 应用中使用 bouncy_listener 插件：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Bouncy Listener Example')),
        body: MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool callbackCalled = false;

  void callback() {
    setState(() {
      callbackCalled = true;
      print('Callback called');
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          ElevatedButton(
            onPressed: () {
              // 创建一个防抖器实例，并设置回调函数
              BouncyListener debouncer = BouncyListener(
                callback,
                const Duration(seconds: 1),
              );
              // 调用输入方法触发回调
              debouncer.input();
            },
            child: Text('触发回调'),
          ),
          SizedBox(height: 20),
          Text(callbackCalled ? '回调已调用' : '回调未调用'),
        ],
      ),
    );
  }
}

更多关于Flutter交互反馈插件bouncy_listener的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter交互反馈插件bouncy_listener的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


bouncy_listener 是一个用于 Flutter 的交互反馈插件，它可以在用户与界面交互时提供一种弹性（bouncy）效果，常用于按钮点击、拖动等操作。这个插件可以帮助你为应用添加更生动的用户交互体验。

安装

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

dependencies:
  flutter:
    sdk: flutter
  bouncy_listener: ^1.0.0  # 请检查最新版本

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

基本用法

bouncy_listener 提供了一个 BouncyListener 小部件，你可以将它包裹在需要进行交互反馈的小部件上。

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

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Bouncy Listener Example'),
      ),
      body: Center(
        child: BouncyListener(
          onTap: () {
            print('Button tapped!');
          },
          child: Container(
            width: 100,
            height: 100,
            color: Colors.blue,
            child: Center(
              child: Text(
                'Tap Me',
                style: TextStyle(color: Colors.white, fontSize: 20),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

属性介绍

  • child: 需要进行交互反馈的子小部件。
  • onTap: 当用户点击时的回调函数。
  • scaleFactor: 点击时的缩放比例，默认值为 0.9。
  • duration: 动画的持续时间，默认值为 200ms。
  • curve: 动画的曲线，默认值为 Curves.easeOut。
  • onLongPress: 当用户长按时的回调函数。
  • onDoubleTap: 当用户双击时的回调函数。

自定义效果

你可以通过调整 scaleFactor、duration 和 curve 来自定义反馈效果。

BouncyListener(
  scaleFactor: 0.8,
  duration: Duration(milliseconds: 300),
  curve: Curves.bounceOut,
  onTap: () {
    print('Custom bouncy effect!');
  },
  child: Container(
    width: 100,
    height: 100,
    color: Colors.red,
    child: Center(
      child: Text(
        'Custom',
        style: TextStyle(color: Colors.white, fontSize: 20),
      ),
    ),
  ),
)

完整示例

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Bouncy Listener Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Bouncy Listener Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            BouncyListener(
              onTap: () {
                print('Button tapped!');
              },
              child: Container(
                width: 100,
                height: 100,
                color: Colors.blue,
                child: Center(
                  child: Text(
                    'Tap Me',
                    style: TextStyle(color: Colors.white, fontSize: 20),
                  ),
                ),
              ),
            ),
            SizedBox(height: 20),
            BouncyListener(
              scaleFactor: 0.8,
              duration: Duration(milliseconds: 300),
              curve: Curves.bounceOut,
              onTap: () {
                print('Custom bouncy effect!');
              },
              child: Container(
                width: 100,
                height: 100,
                color: Colors.red,
                child: Center(
                  child: Text(
                    'Custom',
                    style: TextStyle(color: Colors.white, fontSize: 20),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}
回到顶部