Flutter时钟显示插件termina_clock的使用

Termina Clock 是一个由 Flutter 提供的可自定义的时钟小部件，灵感来源于《塞尔达传说：姆吉拉的假面》中的时钟。它可以显示带有自定义图像的时钟，包括小时、分钟和秒的手指以及昼夜指示器。

特性

• 使用自定义图像的可定制时钟表盘。
• 昼夜指示器。
• 静态或动态时钟显示。
• 简单实现，只需 TerminaClock() 即可显示当前时间的默认时钟。

开始使用

要使用此插件，你需要在项目的 pubspec.yaml 文件中添加 termina_clock 作为依赖项。

使用方法

import 'package:termina_clock/termina_clock.dart';

// 默认的Termina Clock
TerminaClock();

// 静态显示一个特定日期时间
TerminaClock(
    dateTime: DateTime(2024),
    staticClock: true // 当为true时，时钟不会每秒更新
)

// 创建一个自定义时钟
TerminaClock.custom(
    face: ClockFace(
        hourHand: Image.asset('assets/hour_hand.png', package: 'your_package_name'),
        minuteHand: Image.asset('assets/minute_hand.png', package: 'your_package_name'),
        secondHand: Image.asset('assets/second_hand.png', package: 'your_package_name'),
        dayIndicator: Image.asset('assets/day_indicator.png', package: 'your_package_name'),
        nightIndicator: Image.asset('assets/night_indicator.png', package: 'your_package_name'),
    ),
);

注意！所有图像必须具有相同的尺寸。它们将堆叠并居中对齐。

完整示例

以下是一个完整的示例，展示了如何使用 termina_clock 插件创建一个静态时钟，并允许用户通过滑动条调整时间。

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

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

class MainApp extends StatefulWidget {
  const MainApp({super.key});

  [@override](/user/override)
  State<MainApp> createState() => _MainAppState();
}

class _MainAppState extends State<MainApp> {
  double _sliderValue = 0;

  final GlobalKey<TerminaClockState> _terminaClockKey = GlobalKey();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
            child: ListView(
          children: [
            TerminaClock(
              key: _terminaClockKey,
              dateTime: DateTime(2024),
              staticClock: true,
            ),
            Text(_terminaClockKey.currentState?.dateTime.toString() ?? ""),
            Slider(
              value: _sliderValue,
              min: -1 * (60 * 24), // 最多可以向前调整24小时
              max: 60 * 24, // 最多可以向后调整24小时
              label: _sliderValue.round().toString(),
              onChanged: (double value) {
                setState(() {
                  _sliderValue = value;
                  _terminaClockKey.currentState?.dateTime = DateTime(2024).add(Duration(minutes: _sliderValue.toInt()));
                });
              },
            ),
          ],
        )),
      ),
    );
  }
}