Flutter计时器插件cupertino_timer的使用

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

Flutter计时器插件cupertino_timer的使用

cupertino_timer 是一个提供 iOS 风格计时器小部件的 Flutter 插件。本文将介绍如何在 Flutter 应用中使用这个插件,并提供完整的示例代码。

使用方法

基本用法

最简单的使用方式是直接创建一个 CupertinoTimer 小部件,指定其持续时间(duration):

CupertinoTimer(duration: new Duration(minutes: 1))

Basic

高级用法

你还可以通过设置更多属性来自定义计时器的外观和行为:

CupertinoTimer(
    duration: Duration(minutes: 1),
    startOnInit: true,
    timeStyle: TextStyle(
        fontFamily: 'Avenir Next',
        fontWeight: FontWeight.bold),
    ringColor: Colors.blue,
    ringStroke: 10)

Advanced

完整示例代码

下面是一个完整的示例应用,展示了如何集成和使用 cupertino_timer 插件:

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

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

class TimerApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'cupertino_timer',
      home: TimerHomePage(title: 'cupertino_timer'),
    );
  }
}

class TimerHomePage extends StatefulWidget {
  TimerHomePage({Key key, this.title}) : super(key: key);
  final String title;

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

class _TimerHomePageState extends State<TimerHomePage> with SingleTickerProviderStateMixin {
  AnimationController controller;

  @override
  void initState() {
    super.initState();
    controller = AnimationController(vsync: this, duration: Duration(minutes: 1));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Container(
              margin: EdgeInsets.all(20),
              width: 200,
              height: 200,
              child: CupertinoTimer(
                duration: Duration(minutes: 1),
              ),
            ),
            Container(
              margin: EdgeInsets.all(20),
              width: 200,
              height: 200,
              child: CupertinoTimer(
                duration: Duration(minutes: 1),
                startOnInit: true,
                timeStyle: TextStyle(
                    fontFamily: 'Avenir Next', fontWeight: FontWeight.bold),
                ringColor: Colors.blue,
                ringStroke: 10,
                controller: this.controller,
              ),
            ),
            TextButton(
                onPressed: () {
                  this.controller.forward();
                },
                child: Text("Start")),
            TextButton(
                onPressed: () {
                  if (this.controller.isAnimating) {
                    this.controller.stop();
                  }
                },
                child: Text("Pause")),
            TextButton(
                onPressed: () {
                  this.controller.reset();
                },
                child: Text("Reset")),
          ],
        ),
      ),
    );
  }
}

关键点说明

  • 初始化控制器:使用 AnimationController 来控制计时器的开始、暂停和重置。
  • 自定义样式:可以通过 timeStyle, ringColor, ringStroke 等属性来调整计时器的外观。
  • 事件处理:通过按钮绑定事件处理函数来控制计时器的行为。

希望这个示例能帮助你更好地理解和使用 cupertino_timer 插件!


更多关于Flutter计时器插件cupertino_timer的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter计时器插件cupertino_timer的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,下面是一个关于如何在Flutter应用中使用cupertino_timer插件的简单示例代码。这个插件主要用于创建iOS风格的计时器界面和功能。

首先,确保你已经在pubspec.yaml文件中添加了cupertino_timer依赖:

dependencies:
  flutter:
    sdk: flutter
  cupertino_timer: ^x.x.x  # 请替换为最新版本号

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

接下来是一个完整的示例代码,展示如何使用cupertino_timer插件来创建一个简单的计时器应用:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Cupertino Timer Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: TimerScreen(),
    );
  }
}

class TimerScreen extends StatefulWidget {
  @override
  _TimerScreenState createState() => _TimerScreenState();
}

class _TimerScreenState extends State<TimerScreen> with SingleTickerProviderStateMixin {
  CupertinoTimerController _controller;
  int _minutes = 0;
  int _seconds = 0;

  @override
  void initState() {
    super.initState();
    _controller = CupertinoTimerController(
      initialTime: Duration(minutes: _minutes, seconds: _seconds),
      onTick: (duration) {
        setState(() {
          _minutes = duration.inMinutes;
          _seconds = duration.inSeconds % 60;
        });
      },
      onFinish: () {
        setState(() {
          _minutes = 0;
          _seconds = 0;
        });
        print("Timer finished!");
      },
    );
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  void _startTimer() {
    _controller.resume();
  }

  void _pauseTimer() {
    _controller.pause();
  }

  void _resetTimer() {
    _controller.reset();
    setState(() {
      _minutes = 0;
      _seconds = 0;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Cupertino Timer Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              '$_minutes:${_seconds < 10 ? '0' : ''}$_seconds',
              style: TextStyle(fontSize: 48),
            ),
            SizedBox(height: 20),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                ElevatedButton(
                  onPressed: _startTimer,
                  child: Text('Start'),
                ),
                SizedBox(width: 20),
                ElevatedButton(
                  onPressed: _pauseTimer,
                  child: Text('Pause'),
                ),
                SizedBox(width: 20),
                ElevatedButton(
                  onPressed: _resetTimer,
                  child: Text('Reset'),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

代码说明:

  1. 依赖添加:确保在pubspec.yaml中添加了cupertino_timer依赖。
  2. 创建主应用MyApp类设置了应用的基本结构和主题。
  3. 计时器屏幕TimerScreen是一个有状态的组件,管理计时器的状态。
  4. 控制器初始化:在initState方法中,初始化了CupertinoTimerController,并设置了初始时间、每秒更新回调(onTick)和计时结束回调(onFinish)。
  5. 按钮操作:提供了三个按钮来启动、暂停和重置计时器,分别调用_startTimer_pauseTimer_resetTimer方法。
  6. UI展示:使用Text组件展示当前的计时时间,使用RowElevatedButton组件创建操作按钮。

这个示例展示了如何使用cupertino_timer插件创建一个简单的计时器应用。你可以根据需要进一步扩展和自定义这个示例。

回到顶部