Flutter倒计时功能插件countdown_flutter_copy的使用
Flutter倒计时功能插件countdown_flutter_copy的使用
本库是100%从 Leocardoso94/flutter-countdown 复制过来的。
如果您想了解如何使用它，可以访问原版的文档：https://pub.dev/packages/countdown_flutter
添加自定义功能
- 我已经添加了暂停功能。如果您想尝试，可以在示例中查看。
- 我还添加了
onTick函数以跟踪每个时间帧的每次滴答。
示例代码
以下是完整的示例代码：
import 'package:countdown_flutter_copy/countdown_flutter_copy.dart';
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatefulWidget {
const MyApp({Key? key}) : super(key: key);
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
final _done = false;
@override
void initState() {
super.initState();
}
// 按钮文本，初始为 "pause"
String buttonText = "pause";
// 倒计时状态，默认为播放状态
CountdownStatus status = CountdownStatus.play;
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
title: Text(_done ? '完成！' : '倒计时...'),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Row(
children: [
const Expanded(child: SizedBox()), // 左侧空白
SizedBox(
width: 120,
child: CountdownFormatted(
onTick: (duration) {
debugPrint("滴答"); // 每次滴答时打印日志
},
builder: (ctx, String duration) {
return Text(
duration,
style: const TextStyle(fontSize: 30),
);
},
interval: const Duration(seconds: 1), // 每秒更新一次
duration: Duration(minutes: (45 / 60).ceil()), // 总倒计时时间为45分钟
countdownStatus: status, // 当前倒计时状态
),
),
const Expanded(child: SizedBox()), // 右侧空白
],
),
ElevatedButton(
onPressed: () {
setState(() {
// 切换倒计时状态
if (status == CountdownStatus.play) {
status = CountdownStatus.pause;
} else {
status = CountdownStatus.play;
}
// 更新按钮文本
buttonText = buttonText == "play" ? "pause" : "play";
});
},
child: Text(buttonText)) // 显示当前状态（播放或暂停）
],
),
),
);
}
}
说明
-
导入依赖：
import 'package:countdown_flutter_copy/countdown_flutter_copy.dart'; import 'package:flutter/material.dart'; -
初始化应用：
void main() { runApp(const MyApp()); } -
定义状态管理类：
class MyApp extends StatefulWidget { const MyApp({Key? key}) : super(key: key); @override _MyAppState createState() => _MyAppState(); } -
实现倒计时逻辑：
class _MyAppState extends State<MyApp> { final _done = false; @override void initState() { super.initState(); } String buttonText = "pause"; CountdownStatus status = CountdownStatus.play; @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, home: Scaffold( appBar: AppBar( title: Text(_done ? '完成！' : '倒计时...'), ), body: Column( mainAxisAlignment: MainAxisAlignment.spaceAround, children: [ Row( children: [ const Expanded(child: SizedBox()), SizedBox( width: 120, child: CountdownFormatted( onTick: (duration) { debugPrint("滴答"); }, builder: (ctx, String duration) { return Text( duration, style: const TextStyle(fontSize: 30), ); }, interval: const Duration(seconds: 1), duration: Duration(minutes: (45 / 60).ceil()), countdownStatus: status, ), ), const Expanded(child: SizedBox()), ], ), ElevatedButton( onPressed: () { setState(() { if (status == CountdownStatus.play) { status = CountdownStatus.pause; } else { status = CountdownStatus.play; } buttonText = buttonText == "play" ? "pause" : "play"; }); }, child: Text(buttonText)) ], ), ), ); } }
更多关于Flutter倒计时功能插件countdown_flutter_copy的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter倒计时功能插件countdown_flutter_copy的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
countdown_flutter_copy 是一个用于在 Flutter 应用中实现倒计时功能的插件。虽然它可能不是官方的插件，但它的使用方法与许多其他 Flutter 插件类似。以下是如何在 Flutter 项目中使用 countdown_flutter_copy 的基本步骤：
1. 添加依赖
首先，你需要在 pubspec.yaml 文件中添加 countdown_flutter_copy 插件的依赖。打开 pubspec.yaml 文件，并在 dependencies 部分添加以下内容：
dependencies:
flutter:
sdk: flutter
countdown_flutter_copy: ^1.0.0 # 请确保使用最新版本
然后运行 flutter pub get 来获取依赖。
2. 导入插件
在你的 Dart 文件中导入 countdown_flutter_copy 插件：
import 'package:countdown_flutter_copy/countdown_flutter_copy.dart';
3. 使用 Countdown 组件
你可以在你的 Flutter 应用中使用 Countdown 组件来实现倒计时功能。以下是一个简单的示例：
import 'package:flutter/material.dart';
import 'package:countdown_flutter_copy/countdown_flutter_copy.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: CountdownExample(),
);
}
}
class CountdownExample extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Countdown Example'),
),
body: Center(
child: Countdown(
duration: Duration(seconds: 10),
builder: (BuildContext context, Duration remaining) {
return Text(
'${remaining.inSeconds}',
style: TextStyle(fontSize: 48),
);
},
),
),
);
}
}
4. 运行应用
运行你的 Flutter 应用，你将看到一个从 10 秒开始的倒计时。
5. 自定义倒计时
你可以根据需要自定义倒计时的样式、行为等。例如，你可以通过 onFinish 回调函数在倒计时结束时执行某些操作：
Countdown(
duration: Duration(seconds: 10),
builder: (BuildContext context, Duration remaining) {
return Text(
'${remaining.inSeconds}',
style: TextStyle(fontSize: 48),
);
},
onFinish: () {
print('Countdown finished!');
},
);