Flutter计时显示插件ticking_widget的使用

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

Flutter计时显示插件ticking_widget的使用

ticking_widget 是一个用于构建时钟、计时器等需要随时间变化的小部件的Flutter插件。以下是关于如何使用 ticking_widget 的详细说明和完整示例代码。

一、开始使用

  1. 添加依赖

    在项目的 pubspec.yaml 文件中添加 ticking_widget 作为依赖项:

    dependencies:
      ticking_widget: <latest_version>
    

    请将 <latest_version> 替换为最新版本号。

  2. 导入库

    在 Dart 文件中导入 ticking_widget 库:

    import 'package:ticking_widget/ticking_widget.dart';
    

二、使用 TickingWidget

TickingWidgetticking_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

1 回复

更多关于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的AnimatedBuilderTimer来实现类似功能。但为了示例的完整性,我将按照假设的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来手动实现计时器的功能。以下是一个使用TimersetState的替代实现:

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方法来触发重建,从而达到显示计时器的效果。

回到顶部