Flutter手势缩放与点击插件flutter_scale_tap的使用

Flutter手势缩放与点击插件flutter_scale_tap的使用

ScaleTap 简介

ScaleTap 是一个用于Flutter的插件，它为按钮或其他小部件提供了缩放和透明度动画效果。当用户点击或长按小部件时，ScaleTap 会自动应用这些动画效果，使交互更加生动。

使用方法

1. 包含 ScaleTap 小部件

要使用 ScaleTap，您只需将需要添加手势效果的小部件包裹在 ScaleTap 中，并提供相应的回调函数。以下是一个简单的示例：

ScaleTap(
  onPressed: () {
    // 点击事件
    print("Button tapped!");
  },
  onLongPress: () {
    // 长按事件
    print("Button long pressed!");
  },
  child: Container(
    padding: EdgeInsets.all(16.0),
    decoration: BoxDecoration(
      color: Colors.blue,
      borderRadius: BorderRadius.circular(8.0),
    ),
    child: Text(
      "Tap Me",
      style: TextStyle(color: Colors.white, fontSize: 16.0),
    ),
  ),
)

2. 自定义动画效果

ScaleTap 提供了一个 ScaleTapConfig 类，允许您自定义缩放和透明度动画的效果。您可以根据需要调整以下参数：

• scaleMinValue: 缩放的最小值，默认为 0.95。
• scaleCurve: 缩放动画的曲线，默认为 CurveSpring()。
• opacityMinValue: 透明度的最小值，默认为 0.90。
• opacityCurve: 透明度动画的曲线，默认为 Curves.ease。
• scaleOpacityAnimationDuration: 缩放和透明度动画的持续时间，默认为 300ms。
• buttonAnimationDuration: 按钮动画的持续时间，默认为 300ms。

以下是一个自定义配置的示例：

class CustomScaleTapConfig {
  static double scaleMinValue = 0.90; // 调整缩放最小值
  static Curve scaleCurve = Curves.bounceInOut; // 更改缩放曲线
  static double opacityMinValue = 0.85; // 调整透明度最小值
  static Curve opacityCurve = Curves.fastOutSlowIn; // 更改透明度曲线
  static Duration scaleOpacityAnimationDuration = const Duration(milliseconds: 400); // 延长动画时间
  static Duration buttonAnimationDuration = const Duration(milliseconds: 400); // 延长按钮动画时间
}

// 使用自定义配置
ScaleTap(
  config: CustomScaleTapConfig, // 应用自定义配置
  onPressed: () {
    print("Button tapped with custom animation!");
  },
  onLongPress: () {
    print("Button long pressed with custom animation!");
  },
  child: Container(
    padding: EdgeInsets.all(16.0),
    decoration: BoxDecoration(
      color: Colors.green,
      borderRadius: BorderRadius.circular(8.0),
    ),
    child: Text(
      "Custom Tap Me",
      style: TextStyle(color: Colors.white, fontSize: 16.0),
    ),
  ),
)

完整示例Demo

以下是一个完整的示例代码，展示了如何在Flutter项目中使用 ScaleTap 插件，并应用自定义动画效果：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'ScaleTap 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('ScaleTap Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            // 默认配置的 ScaleTap
            ScaleTap(
              onPressed: () {
                print("Default Button tapped!");
              },
              onLongPress: () {
                print("Default Button long pressed!");
              },
              child: Container(
                padding: EdgeInsets.all(16.0),
                decoration: BoxDecoration(
                  color: Colors.blue,
                  borderRadius: BorderRadius.circular(8.0),
                ),
                child: Text(
                  "Tap Me (Default)",
                  style: TextStyle(color: Colors.white, fontSize: 16.0),
                ),
              ),
            ),
            SizedBox(height: 20.0),
            // 自定义配置的 ScaleTap
            ScaleTap(
              config: CustomScaleTapConfig, // 应用自定义配置
              onPressed: () {
                print("Custom Button tapped!");
              },
              onLongPress: () {
                print("Custom Button long pressed!");
              },
              child: Container(
                padding: EdgeInsets.all(16.0),
                decoration: BoxDecoration(
                  color: Colors.green,
                  borderRadius: BorderRadius.circular(8.0),
                ),
                child: Text(
                  "Tap Me (Custom)",
                  style: TextStyle(color: Colors.white, fontSize: 16.0),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

// 自定义配置类
class CustomScaleTapConfig {
  static double scaleMinValue = 0.90; // 调整缩放最小值
  static Curve scaleCurve = Curves.bounceInOut; // 更改缩放曲线
  static double opacityMinValue = 0.85; // 调整透明度最小值
  static Curve opacityCurve = Curves.fastOutSlowIn; // 更改透明度曲线
  static Duration scaleOpacityAnimationDuration = const Duration(milliseconds: 400); // 延长动画时间
  static Duration buttonAnimationDuration = const Duration(milliseconds: 400); // 延长按钮动画时间
}