Flutter交互控制插件holdnload的使用

Flutter交互控制插件holdnload的使用

Flutter版本 3.1.0

本插件适用于Flutter版本3.1.0。

描述

这个插件的目的是创建类似于Snapchat和Instagram在录制视频或故事时显示的持有动画按钮。

入门指南

首先，将HoldAndLoad组件包裹在Scaffold中：

HoldAndLoad(
  child: Text('hold'),
  controller: ShootingController(ShootingValue(false, false)),
  isShootingButtonAnimate: false,
  style: Style.withGradientColor(
    outerSize: const Size.square(115),
    innerSize: const Size.square(82),
    outerColor: Colors.white,
    progressColor: Colors.redAccent,
    gradient: const LinearGradient(
      begin: Alignment.centerLeft,
      end: Alignment.centerRight,
      colors: [
        Color(0xFF00AACE),
        Color(0xFF006BCE),
      ],
    ),
    progressWidth: 3,
    outerWidth: 4
  ),
  callBackShootingEnd: callBackEnd,
  callBackShootingStart: callBackStart,
  listener: listener,
);

HoldAndLoad样式

样式可以设置为渐变或背景色。

带有渐变颜色的样式

Style.withGradientColor(
  outerSize: const Size.square(115),
  innerSize: const Size.square(82),
  outerColor: Colors.white,
  progressColor: Colors.redAccent,
  gradient: const LinearGradient(
    begin: Alignment.centerLeft,
    end: Alignment.centerRight,
    colors: [
      Color(0xFF00AACE),
      Color(0xFF006BCE),
    ],
  ),
  progressWidth: 3,
  outerWidth: 4
)

带有背景颜色的样式

Style.withBackgroundColor(
  outerSize: const Size.square(115),
  innerSize: const Size.square(82),
  outerColor: Colors.white,
  progressColor: Colors.redAccent,
  backgroundColor: const Color(0xFF00AACE),
  progressWidth: 3,
  outerWidth: 4
)

回调

  • callBackShootingStart: 当检测到长按手势时触发此回调。它只会被触发一次。
  • callBackShootingEnd: 当长按手势释放时触发此回调。它只会被触发一次。
  • listener: 从callBackShootingStart开始触发，直到callBackShootingEnd被触发。

示例Demo

以下是完整的示例代码：

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

void main() {
  runApp(const MaterialApp(
    debugShowCheckedModeBanner: false,
    home: MyApp(),
  ));
}

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.blueGrey,
      body: Center(
        child: HoldAndLoad(
          controller: ShootingController(ShootingValue(false, false)),
          isShootingButtonAnimate: false,
          style: Style.withGradientColor(
            outerSize: const Size.square(115),
            innerSize: const Size.square(82),
            outerColor: Colors.white,
            progressColor: Colors.redAccent,
            gradient: const LinearGradient(
              begin: Alignment.centerLeft,
              end: Alignment.centerRight,
              colors: [
                Color(0xFF00AACE),
                Color(0xFF006BCE),
              ],
            ),
            progressWidth: 3,
            outerWidth: 4
          ),
          callBackShootingEnd: () {},
          callBackShootingStart: () {},
          listener: () {
            // 可以在这里处理监听逻辑
          },
          child: Image.asset(
            'assets/images/video.png',
            width: 30,
            height: 30,
          ),
        ),
      ),
    );
  }
}

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

1 回复

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


hold_n_load 是一个 Flutter 插件，用于实现在用户长按按钮时执行某些操作，并在用户松开按钮时停止操作的交互效果。它通常用于需要连续操作（如加速、加载、计数等）的场景。

安装 hold_n_load

在你的 pubspec.yaml 文件中添加 hold_n_load 依赖：

dependencies:
  flutter:
    sdk: flutter
  hold_n_load: ^0.0.1  # 请根据实际情况使用最新版本

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

基本使用

以下是一个简单的示例，展示了如何使用 hold_n_load 插件来实现一个按钮，当用户长按时开始计数，松开按钮时停止计数。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HoldAndLoadExample(),
    );
  }
}

class HoldAndLoadExample extends StatefulWidget {
  @override
  _HoldAndLoadExampleState createState() => _HoldAndLoadExampleState();
}

class _HoldAndLoadExampleState extends State<HoldAndLoadExample> {
  int _counter = 0;

  void _startCounting() {
    // 开始计数
    setState(() {
      _counter++;
    });
  }

  void _stopCounting() {
    // 停止计数
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Hold and Load Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Counter:',
              style: TextStyle(fontSize: 24),
            ),
            Text(
              '$_counter',
              style: TextStyle(fontSize: 48, fontWeight: FontWeight.bold),
            ),
            SizedBox(height: 20),
            HoldNLoad(
              onStart: _startCounting,
              onStop: _stopCounting,
              child: Container(
                padding: EdgeInsets.symmetric(horizontal: 32, vertical: 16),
                decoration: BoxDecoration(
                  color: Colors.blue,
                  borderRadius: BorderRadius.circular(8),
                ),
                child: Text(
                  'Hold to Count',
                  style: TextStyle(color: Colors.white, fontSize: 18),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

代码解释

  1. HoldNLoad 组件: 这是 hold_n_load 提供的核心组件。它包裹了一个按钮，并在用户长按时触发 onStart 回调，松开时触发 onStop 回调。

  2. onStart 和 onStop: 这两个回调函数分别在用户长按和松开按钮时被调用。在这个例子中，_startCounting 方法用于增加计数器，_stopCounting 方法用于停止计数（虽然在这个简单的例子中没有实际的操作）。

  3. child 属性: 这是用户长按的实际按钮内容。你可以自定义这个按钮的外观和样式。

自定义选项

HoldNLoad 组件还提供了一些自定义选项，例如：

  • duration: 长按多长时间后触发 onStart 回调，默认为 500 毫秒。
  • interval: 在长按期间，onStart 回调被调用的间隔时间，默认为 100 毫秒。
HoldNLoad(
  duration: Duration(milliseconds: 300),
  interval: Duration(milliseconds: 50),
  onStart: _startCounting,
  onStop: _stopCounting,
  child: Container(
    padding: EdgeInsets.symmetric(horizontal: 32, vertical: 16),
    decoration: BoxDecoration(
      color: Colors.blue,
      borderRadius: BorderRadius.circular(8),
    ),
    child: Text(
      'Hold to Count',
      style: TextStyle(color: Colors.white, fontSize: 18),
    ),
  ),
),
回到顶部