Flutter计时显示插件ticking_widget的使用
Flutter计时显示插件ticking_widget的使用
ticking_widget
是一个用于构建时钟、计时器等需要随时间变化的小部件的Flutter插件。以下是关于如何使用 ticking_widget
的详细说明和完整示例代码。
一、开始使用
-
添加依赖
在项目的
pubspec.yaml
文件中添加ticking_widget
作为依赖项:dependencies: ticking_widget: <latest_version>
请将
<latest_version>
替换为最新版本号。 -
导入库
在 Dart 文件中导入
ticking_widget
库:import 'package:ticking_widget/ticking_widget.dart';
二、使用 TickingWidget
TickingWidget
是 ticking_widget
插件的核心组件,它可以根据指定的时间间隔更新其子组件。以下是 TickingWidget
的基本用法:
TickingWidget(
builder: (context, currentTime, child) {
// 返回一个需要随时间变化的小部件
},
child: Container(), // 可选:一个不需要随时间变化的小部件
)
1. 构建数字时钟
以下是一个简单的数字时钟示例,每秒更新一次时间:
TickingWidget(
mode: TickingMode.second,
builder: (context, now, child) => Text(
DateFormat('hh:mm:ss a').format(now),
),
)
2. 构建计时器
以下是一个计时器示例,显示从启动以来经过的时间:
TickingWidget(
mode: TickingMode.second,
builder: (context, now, child) {
final Duration elapsed = TickingWidget.of(context).elapsed;
return Text(
'${elapsed.inHours}h ${elapsed.inMinutes % 60}m ${elapsed.inSeconds % 60}s',
);
},
)
3. 构建倒计时
以下是一个倒计时示例,从15分钟开始倒计时:
TickingWidget(
mode: TickingMode.second,
builder: (context, now, child) {
final Duration remaining = const Duration(minutes: 15) - TickingWidget.of(context).elapsed;
return Text(
'${remaining.inHours.toString().padLeft(2, '0')}:'
'${(remaining.inMinutes % 60).toString().padLeft(2, '0')}:'
'${(remaining.inSeconds % 60).toString().padLeft(2, '0')}',
);
},
)
三、使用 TickingWidgetMixin
如果你想要自定义实现并且不使用 TickingWidget
,可以使用 TickingWidgetMixin
来获取当前时间和已过时间。注意,使用 TickingWidgetMixin
时必须同时使用 SingleTickerProviderStateMixin
。
class MyCustomWidget extends StatefulWidget {
[@override](/user/override)
_MyCustomWidgetState createState() => _MyCustomWidgetState();
}
class _MyCustomWidgetState extends State<MyCustomWidget> with SingleTickerProviderStateMixin, TickingWidgetMixin {
[@override](/user/override)
void initState() {
autoStart = false;
super.initState();
}
[@override](/user/override)
Widget build(BuildContext context) {
final Duration elapsed = this.elapsed;
return Column(
children: [
const Text('Timer'),
Text('${elapsed.inMinutes}:${elapsed.inSeconds % 60}'),
const SizedBox(height: 16),
Row(
children: [
ElevatedButton(
onPressed: () => stopTicker(),
child: const Text('Stop'),
),
ElevatedButton(
onPressed: () => startTicker(),
child: const Text('Start'),
),
],
),
],
);
}
}
四、完整示例代码
以下是一个完整的示例代码,展示了如何在同一个页面中展示数字时钟、计时器和倒计时:
import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'package:ticking_widget/ticking_widget.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
home: const MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key});
[@override](/user/override)
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
title: const Text('Ticking Widget Examples'),
),
body: Center(
child: Wrap(
crossAxisAlignment: WrapCrossAlignment.center,
runAlignment: WrapAlignment.center,
spacing: 16,
runSpacing: 16,
children: [
buildCard(
title: 'Digital Clock',
child: buildDigitalClock(context),
),
buildCard(
title: 'Timer',
child: buildTimer(context),
),
buildCard(
title: 'Countdown',
child: buildCountdown(context),
),
],
),
),
);
}
Widget buildCard({required String title, required Widget child}) {
return Builder(builder: (context) {
return Container(
width: 300,
height: 300,
decoration: BoxDecoration(
color: Theme.of(context).colorScheme.secondaryContainer,
borderRadius: BorderRadius.circular(16),
),
child: ClipRRect(
borderRadius: BorderRadius.circular(12),
child: Stack(
children: [
Container(
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
child: Text(
title,
style: TextStyle(
fontSize: 18,
color: Theme.of(context).colorScheme.primary,
),
),
),
Positioned.fill(
child: Center(
child: Padding(
padding: const EdgeInsets.all(32),
child: DefaultTextStyle(
style: DefaultTextStyle.of(context).style.copyWith(
color: Theme.of(context).colorScheme.primary,
fontWeight: FontWeight.w200,
fontSize: 56,
fontFeatures: [
const FontFeature.tabularFigures(),
]),
textAlign: TextAlign.center,
child: FittedBox(
fit: BoxFit.fitWidth,
child: child,
),
),
),
),
),
],
),
),
);
});
}
}
Widget buildDigitalClock(BuildContext context) {
return TickingWidget(
mode: TickingMode.second,
builder: (context, now, child) => Text(
DateFormat('hh:mm:ss a').format(now),
),
);
}
Widget buildTimer(BuildContext context) {
return TickingWidget(
mode: TickingMode.second,
builder: (context, now, child) {
final Duration elapsed = TickingWidget.of(context).elapsed;
return Text(
'${elapsed.inHours}h ${(elapsed.inMinutes % 60)}m ${(elapsed.inSeconds % 60)}s',
);
},
);
}
Widget buildCountdown(BuildContext context) {
return TickingWidget(
mode: TickingMode.second,
builder: (context, now, child) {
final Duration remaining = const Duration(minutes: 15) - TickingWidget.of(context).elapsed;
return Text(
'${remaining.inHours.toString().padLeft(2, '0')}:'
'${(remaining.inMinutes % 60).toString().padLeft(2, '0')}:'
'${(remaining.inSeconds % 60).toString().padLeft(2, '0')}',
);
},
);
}
更多关于Flutter计时显示插件ticking_widget的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
更多关于Flutter计时显示插件ticking_widget的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然,以下是一个关于如何使用Flutter中的ticking_widget
插件来显示计时器的示例代码。ticking_widget
插件通常用于在Flutter应用中创建一个持续更新的计时器显示。不过,需要注意的是,ticking_widget
并非Flutter官方插件,如果它存在于某个第三方库中,我们需要确保已经正确添加了这个库的依赖。
首先,确保在你的pubspec.yaml
文件中添加了ticking_widget
的依赖(如果它是一个有效的第三方库)。由于ticking_widget
可能不是一个真实存在的库名,这里我假设它存在于某个库中,或者你可以用类似功能的库替代,比如直接使用Flutter的AnimatedBuilder
和Timer
来实现类似功能。但为了示例的完整性,我将按照假设的ticking_widget
来编写代码。
dependencies:
flutter:
sdk: flutter
ticking_widget: ^x.y.z # 假设的版本号
运行flutter pub get
来安装依赖。
接下来是主代码部分,展示如何使用这个插件来显示一个计时器:
import 'package:flutter/material.dart';
import 'package:ticking_widget/ticking_widget.dart'; // 假设的导入路径
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
appBar: AppBar(
title: Text('Ticking Widget Demo'),
),
body: Center(
child: TimerDisplay(),
),
),
);
}
}
class TimerDisplay extends StatefulWidget {
@override
_TimerDisplayState createState() => _TimerDisplayState();
}
class _TimerDisplayState extends State<TimerDisplay> {
DateTime _startTime = DateTime.now();
@override
Widget build(BuildContext context) {
return TickingWidget(
duration: const Duration(milliseconds: 500), // 更新间隔
builder: (context) {
Duration elapsed = DateTime.now().difference(_startTime);
String elapsedString = '${elapsed.inHours.toString().padLeft(2, '0')}:${elapsed.inMinutes.toString().padLeft(2, '0')}:${elapsed.inSeconds.toString().padLeft(2, '0')}:${elapsed.inMilliseconds.toString().substring(0, 2).padLeft(2, '0')}';
return Text(
elapsedString,
style: TextStyle(fontSize: 48),
);
},
);
}
}
注意:由于ticking_widget
可能不是一个真实存在的库,上面的代码实际上是基于假设的API设计的。在真实场景中,你可能需要使用Flutter自带的AnimatedBuilder
或者Timer
类结合setState
来手动实现计时器的功能。以下是一个使用Timer
和setState
的替代实现:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
appBar: AppBar(
title: Text('Timer Demo'),
),
body: Center(
child: TimerDisplay(),
),
),
);
}
}
class TimerDisplay extends StatefulWidget {
@override
_TimerDisplayState createState() => _TimerDisplayState();
}
class _TimerDisplayState extends State<TimerDisplay> {
DateTime _startTime = DateTime.now();
Timer? _timer;
@override
void initState() {
super.initState();
_timer = Timer.periodic(Duration(milliseconds: 500), (timer) {
setState(() {
// 更新状态以触发UI重建
});
});
}
@override
void dispose() {
_timer?.cancel();
super.dispose();
}
@override
Widget build(BuildContext context) {
Duration elapsed = DateTime.now().difference(_startTime);
String elapsedString = '${elapsed.inHours.toString().padLeft(2, '0')}:${elapsed.inMinutes.toString().padLeft(2, '0')}:${elapsed.inSeconds.toString().padLeft(2, '0')}:${elapsed.inMilliseconds.toString().substring(0, 2).padLeft(2, '0')}';
return Text(
elapsedString,
style: TextStyle(fontSize: 48),
);
}
}
这个替代实现使用了Timer.periodic
来定期更新UI,并通过setState
方法来触发重建,从而达到显示计时器的效果。