Flutter时钟管理插件one_clock的使用

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

Flutter时钟管理插件one_clock的使用

简介

Flutter One Clock Widget 是一个干净且完全可定制的时钟小部件，支持模拟和数字时钟显示。该插件灵感来源于仅用于显示模拟时钟的 analog_clock 包，但提供了更多的自定义选项。

Analog/Digital Clock Screenshot

安装

在您的 Flutter 项目的 pubspec.yaml 文件中添加依赖：

dependencies:
  one_clock: ^2.0.1

然后运行 flutter pub get 来安装包。

功能特性

  • 现代、简洁的模拟和数字时钟界面。
  • 可根据需要进行高度自定义。
  • 实时更新的时钟。

使用方法

AnalogClock 示例

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

class AnalogClockExample extends StatelessWidget {
  final DateTime dateTime;

  const AnalogClockExample(this.dateTime, {Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        const Text(
          "Analog Clock Example",
          style: TextStyle(fontSize: 24, fontWeight: FontWeight.w600),
        ),
        const SizedBox(height: 30),
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            AnalogClock(
              isLive: false,
              width: 150,
              height: 150,
              datetime: dateTime,
              decoration: BoxDecoration(
                border: Border.all(width: 2.0, color: Colors.black),
                color: Colors.transparent,
                shape: BoxShape.circle,
              ),
              hourHandColor: Colors.black,
              minuteHandColor: Colors.black,
              showSecondHand: false,
              numberColor: Colors.black87,
              showNumbers: true,
              showAllNumbers: false,
              textScaleFactor: 1.4,
              showTicks: false,
              showDigitalClock: false,
            ),
          ],
        ),
      ],
    );
  }
}

DigitalClock 示例

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

class DigitalClockExample extends StatelessWidget {
  final DateTime dateTime;

  const DigitalClockExample(this.dateTime, {Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        const Text(
          "Digital Clock Example",
          style: TextStyle(fontSize: 24, fontWeight: FontWeight.w600),
        ),
        const SizedBox(height: 30),
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            DigitalClock(
              showSeconds: true,
              isLive: true,
              digitalClockColor: Colors.black,
              decoration: const BoxDecoration(
                color: Colors.yellow,
                shape: BoxShape.rectangle,
                borderRadius: BorderRadius.all(Radius.circular(15)),
              ),
              datetime: dateTime,
            ),
          ],
        ),
      ],
    );
  }
}

参数说明

以下是 AnalogClock 和 DigitalClock 的一些常用参数：

  • isLive: 是否实时更新，默认为 true。
  • width, height: 时钟的宽度和高度。
  • datetime: 显示的时间，默认为当前时间。
  • hourHandColor, minuteHandColor, secondHandColor: 指针的颜色（仅适用于 AnalogClock）。
  • numberColor: 数字的颜色（仅适用于 AnalogClock）。
  • showNumbers, showAllNumbers, showTicks: 是否显示数字、所有数字和刻度线（仅适用于 AnalogClock）。
  • showDigitalClock: 是否显示数字时钟（仅适用于 AnalogClock）。
  • showSeconds: 是否显示秒数（仅适用于 DigitalClock）。
  • digitalClockColor: 数字时钟的颜色（仅适用于 DigitalClock）。
  • decoration: 时钟的装饰样式。

完整示例代码

以下是一个完整的示例代码，展示了如何在 Flutter 应用中使用 one_clock 插件：

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'One Clock Example'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  DateTime dateTime = DateTime.now();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(
        width: double.infinity,
        padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 5),
        child: SingleChildScrollView(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              AnalogClockExample(dateTime),
              const SizedBox(height: 50),
              ...DigitalClockExample(dateTime)
            ],
          ),
        ),
      ),
    );
  }
}

Widget AnalogClockExample(DateTime dateTime) {
  return SingleChildScrollView(
    scrollDirection: Axis.horizontal,
    child: Column(
      children: [
        const Text(
          "Analog Clock Example",
          style: TextStyle(fontSize: 24, fontWeight: FontWeight.w600),
        ),
        const SizedBox(height: 30),
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            AnalogClock(
              isLive: false,
              width: 120,
              height: 120,
              datetime: dateTime,
            ),
            const SizedBox(width: 10),
            AnalogClock.dark(
              width: 120,
              height: 120,
              isLive: true,
              datetime: dateTime,
            ),
            const SizedBox(width: 10),
            AnalogClock(
              width: 120,
              height: 120,
              isLive: true,
              decoration: BoxDecoration(color: Colors.green[100], shape: BoxShape.circle),
              datetime: dateTime,
            ),
            const SizedBox(width: 10),
            AnalogClock(
              width: 120,
              height: 120,
              isLive: true,
              decoration: BoxDecoration(color: Colors.yellow[100], shape: BoxShape.circle),
              datetime: dateTime,
            ),
            const SizedBox(width: 10),
            AnalogClock(
              width: 120,
              height: 120,
              isLive: true,
              showDigitalClock: false,
              decoration: BoxDecoration(color: Colors.cyan[100], shape: BoxShape.circle),
              datetime: dateTime,
            ),
            const SizedBox(width: 10),
            AnalogClock(
              width: 120,
              height: 120,
              isLive: true,
              showDigitalClock: false,
              decoration: BoxDecoration(color: Colors.red[100], shape: BoxShape.circle),
              datetime: dateTime,
            ),
          ],
        ),
      ],
    ),
  );
}

List<Widget> DigitalClockExample(DateTime dateTime) {
  return [
    SingleChildScrollView(
      scrollDirection: Axis.horizontal,
      child: Column(
        children: [
          const Text(
            "Digital Clock Example",
            style: TextStyle(fontSize: 24, fontWeight: FontWeight.w600),
          ),
          const SizedBox(height: 50),
          Row(
            mainAxisSize: MainAxisSize.min,
            children: [
              DigitalClock(
                showSeconds: true,
                datetime: dateTime,
                textScaleFactor: 1.3,
                isLive: true,
              ),
              const SizedBox(width: 10),
              DigitalClock.dark(
                datetime: dateTime,
              ),
              const SizedBox(width: 10),
              DigitalClock.light(
                isLive: true,
                datetime: dateTime,
              ),
              const SizedBox(width: 10),
              DigitalClock(
                datetime: dateTime,
                textScaleFactor: 2,
                showSeconds: false,
                isLive: true,
                decoration: const BoxDecoration(color: Colors.cyan, shape: BoxShape.rectangle, borderRadius: BorderRadius.all(Radius.circular(15))),
              ),
              const SizedBox(width: 10),
              DigitalClock(
                datetime: dateTime,
                isLive: true,
                decoration: const BoxDecoration(color: Colors.green, shape: BoxShape.rectangle, borderRadius: BorderRadius.all(Radius.circular(15))),
              ),
              const SizedBox(width: 10),
              DigitalClock(
                datetime: dateTime,
                isLive: true,
                decoration: const BoxDecoration(color: Colors.yellow, shape: BoxShape.rectangle, borderRadius: BorderRadius.all(Radius.circular(15))),
              ),
            ],
          ),
        ],
      ),
    ),
    const SizedBox(height: 20),
    SingleChildScrollView(
      scrollDirection: Axis.horizontal,
      child: Row(
        mainAxisSize: MainAxisSize.min,
        children: [
          DigitalClock(
            padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 5),
            datetime: dateTime,
            isLive: true,
          ),
          DigitalClock.dark(
            padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 5),
            datetime: dateTime,
          ),
          DigitalClock.light(
            padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 5),
            isLive: true,
            datetime: dateTime,
          )
        ],
      ),
    ),
    const SizedBox(height: 20),
    SingleChildScrollView(
      scrollDirection: Axis.horizontal,
      child: Row(
        mainAxisSize: MainAxisSize.min,
        children: [
          DigitalClock(
            datetime: dateTime,
            isLive: true,
            decoration: const BoxDecoration(shape: BoxShape.rectangle, borderRadius: BorderRadius.all(Radius.zero)),
          ),
          const SizedBox(width: 10),
          DigitalClock.dark(
            datetime: dateTime,
            decoration: const BoxDecoration(color: Colors.black, shape: BoxShape.rectangle, borderRadius: BorderRadius.all(Radius.zero)),
          ),
          const SizedBox(width: 10),
          DigitalClock.light(
            isLive: true,
            datetime: dateTime,
            decoration: const BoxDecoration(shape: BoxShape.rectangle, borderRadius: BorderRadius.all(Radius.zero)),
          ),
          const SizedBox(width: 10),
          DigitalClock(
            datetime: dateTime,
            isLive: true,
            decoration: const BoxDecoration(color: Colors.cyan, shape: BoxShape.rectangle, borderRadius: BorderRadius.all(Radius.zero)),
          ),
          const SizedBox(width: 10),
          DigitalClock(
            datetime: dateTime,
            isLive: true,
            decoration: const BoxDecoration(color: Colors.green, shape: BoxShape.rectangle, borderRadius: BorderRadius.all(Radius.zero)),
          ),
          const SizedBox(width: 10),
          DigitalClock(
            datetime: dateTime,
            isLive: true,
            decoration: const BoxDecoration(color: Colors.yellow, shape: BoxShape.rectangle, borderRadius: BorderRadius.all(Radius.circular(15))),
          ),
        ],
      ),
    ),
    const SizedBox(height: 20),
    SingleChildScrollView(
      scrollDirection: Axis.horizontal,
      child: Row(
        mainAxisSize: MainAxisSize.min,
        children: [
          DigitalClock(
            padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 5),
            datetime: dateTime,
            decoration: const BoxDecoration(shape: BoxShape.rectangle, borderRadius: BorderRadius.all(Radius.zero)),
            isLive: true,
          ),
          DigitalClock.dark(
            padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 5),
            datetime: dateTime,
            decoration: const BoxDecoration(color: Colors.black, shape: BoxShape.rectangle, borderRadius: BorderRadius.all(Radius.zero)),
          ),
          DigitalClock.light(
            padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 5),
            isLive: true,
            datetime: dateTime,
            decoration: const BoxDecoration(shape: BoxShape.rectangle, borderRadius: BorderRadius.all(Radius.zero)),
          )
        ],
      ),
    ),
    const SizedBox(height: 50),
    SingleChildScrollView(
      scrollDirection: Axis.horizontal,
      child: Column(
        children: [
          const Text(
            "Digital Clock Example with custom INTL format",
            style: TextStyle(fontSize: 24, fontWeight: FontWeight.w600),
          ),
          const SizedBox(height: 50),
          Row(
            mainAxisSize: MainAxisSize.min,
            children: [
              DigitalClock(
                format: "H",
                showSeconds: true,
                datetime: dateTime,
                textScaleFactor: 1.3,
                isLive: true,
              ),
              const SizedBox(width: 10),
              DigitalClock.dark(
                format: "Hm",
                datetime: dateTime,
              ),
              const SizedBox(width: 10),
              DigitalClock.light(
                format: "Hms",
                isLive: true,
                datetime: dateTime,
              ),
              const SizedBox(width: 10),
              Container(
                padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 0),
                child: DigitalClock(
                  format: 'yMMMEd',
                  datetime: dateTime,
                  textScaleFactor: 1,
                  showSeconds: false,
                  isLive: true,
                ),
              ),
            ],
          ),
        ],
      ),
    ),
  ];
}

这个示例代码展示了如何创建一个包含模拟和数字时钟的应用程序，并允许用户通过不同的样式和配置来自定义时钟外观。希望这对您有所帮助！


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

Harmonyos Next教程
1 回复

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


当然，以下是如何在Flutter项目中使用one_clock插件的一个代码案例。one_clock是一个用于管理时钟的Flutter插件，尽管这不是一个广泛知名的官方插件，但假设它提供了类似的功能，我们可以展示如何集成和使用一个假设的时钟管理插件。

首先，你需要在你的pubspec.yaml文件中添加one_clock依赖项（注意：实际使用时请替换为真实的插件名和版本）：

dependencies:
  flutter:
    sdk: flutter
  one_clock: ^x.y.z  # 替换为实际的版本号

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

接下来，我们将展示如何在Flutter应用中使用这个假设的one_clock插件。以下是一个简单的示例，展示如何初始化时钟，并在UI中显示当前时间。

import 'package:flutter/material.dart';
import 'package:one_clock/one_clock.dart';  // 假设这是插件的导入路径

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

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

class ClockPage extends StatefulWidget {
  @override
  _ClockPageState createState() => _ClockPageState();
}

class _ClockPageState extends State<ClockPage> {
  late OneClock _clock;
  String _currentTime = 'Loading...';

  @override
  void initState() {
    super.initState();
    // 初始化OneClock插件
    _clock = OneClock();
    // 开始监听时间变化
    _clock.listen((DateTime currentTime) {
      setState(() {
        _currentTime = currentTime.toLocal().toString();
      });
    });
  }

  @override
  void dispose() {
    // 停止监听时间变化
    _clock.stopListening();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Clock Example'),
      ),
      body: Center(
        child: Text(
          _currentTime,
          style: TextStyle(fontSize: 48),
        ),
      ),
    );
  }
}

在这个示例中，我们做了以下几件事：

  1. 在pubspec.yaml文件中添加了one_clock依赖项。
  2. 创建了一个简单的Flutter应用，其中包含一个显示当前时间的页面。
  3. 在ClockPage的状态类中，初始化了OneClock实例，并开始监听时间变化。
  4. 当时间变化时，使用setState方法更新UI。
  5. 在dispose方法中停止监听时间变化，以避免内存泄漏。

请注意，上述代码是一个假设性的示例，因为one_clock插件可能并不真实存在，或者它的API可能与示例中的不同。在实际使用中，你需要参考插件的官方文档来了解如何正确初始化、配置和使用它。如果one_clock插件确实存在且有文档，那么你应该遵循其文档中的指导来进行集成和使用。

回到顶部