Flutter可长按圆形按钮插件holdable_circular_button的使用

发布于 1周前 作者 vueper 来自 Flutter

Flutter可长按圆形按钮插件holdable_circular_button的使用

Holdable Circular Button

Holdable Circular Button 是一个Flutter自定义组件，它提供了一个带有进度指示器的圆形按钮。用户可以通过长按此按钮来触发进度动画，当进度完成时，可以执行相应的操作。

功能特性

  • 可长按按钮：通过长按按钮触发进度动画。
  • 高度自定义：您可以调整按钮和进度指示器的大小、颜色及持续时间。
  • 进度指示器：围绕按钮的可视进度指示器，在设定的时间后完成。

示例效果

Screen Recording

安装方法

在您的pubspec.yaml文件中添加以下依赖：

dependencies:
  holdable_circular_button: ^0.0.1

然后执行flutter pub get命令以安装该插件。

使用示例

下面是一个完整的示例代码，演示了如何使用holdable_circular_button插件创建一个简单的应用界面，其中包含一个红色背景绿色边框的圆形按钮，并且在进度完成后打印一条消息到控制台：

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

void main() {
  runApp(const MaterialApp(
    debugShowCheckedModeBanner: false,
    title: 'Holdable Circular Button app',
    home: HomeScreen(),
  ));
}

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

  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  bool isFinished = false;

  void _onComplete() {
    setState(() {
      isFinished = true;
    });
    print('Progress completed!');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        title: const Text('Holdable Circular Button'),
        elevation: 0,
      ),
      body: SafeArea(
        child: Center(
          child: HoldableCircularButton(
            progressColor: Colors.green,
            buttonColor: Colors.red,
            onComplete: _onComplete,
            icon: const Icon(Icons.touch_app_outlined),
          ),
        ),
      ),
    );
  }
}

在这个例子中，我们创建了一个名为HomeScreen的状态管理类，并在其中定义了一个布尔变量isFinished用于跟踪进度是否已经完成。当用户长按按钮并触发进度条完成后，将调用_onComplete函数更新状态并输出信息至控制台。

此外，您还可以根据需要进一步自定义按钮样式和其他属性，如设置不同的图标、调整按钮尺寸等。希望这个指南能帮助您快速上手使用holdable_circular_button插件！如果有任何问题或建议，请随时留言交流。


更多关于Flutter可长按圆形按钮插件holdable_circular_button的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter可长按圆形按钮插件holdable_circular_button的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是一个关于如何在Flutter中使用holdable_circular_button插件的示例代码。这个插件允许你创建一个可以长按的圆形按钮，并在长按和释放时触发不同的回调。

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

dependencies:
  flutter:
    sdk: flutter
  holdable_circular_button: ^最新版本号 # 请替换为最新版本号

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

接下来，在你的Flutter应用中，你可以这样使用这个插件：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Holdable Circular Button Example'),
        ),
        body: Center(
          child: HoldableCircularButton(
            onHoldStart: () {
              // 长按开始时执行的代码
              print('Button is being held');
            },
            onHoldEnd: () {
              // 长按结束时执行的代码
              print('Button hold ended');
            },
            onTap: () {
              // 单击按钮时执行的代码
              print('Button tapped');
            },
            child: Icon(
              Icons.add,
              color: Colors.white,
              size: 32,
            ),
            backgroundColor: Colors.blue,
            duration: Duration(seconds: 2), // 设置长按持续时间，超过这个时间后如果没有释放，将不再触发onHoldEnd
          ),
        ),
      ),
    );
  }
}

在这个示例中：

  1. HoldableCircularButton 组件被用来创建一个可以长按的圆形按钮。
  2. onHoldStart 回调在按钮被长按开始时被调用。
  3. onHoldEnd 回调在按钮被长按结束时（即手指离开按钮时）被调用。
  4. onTap 回调在按钮被单击（即短按）时被调用。
  5. child 参数用来设置按钮内部的图标或文本。
  6. backgroundColor 参数用来设置按钮的背景颜色。
  7. duration 参数用来设置长按的有效持续时间，超过这个时间后如果没有释放，将不再触发onHoldEnd回调（这在某些情况下很有用，比如防止用户因为误操作而长时间持有按钮）。

这个示例展示了如何在Flutter中使用holdable_circular_button插件来创建一个具有长按功能的圆形按钮，并在不同的交互事件上执行相应的回调。

回到顶部