Flutter时钟展示插件basic

Flutter时钟展示插件basic_clocks的使用

特性

可以通过移动表针来更改时间，并且可以自定义表针的运动方式。
可以在时钟上显示小时标签。
可以更改表针的粗细和形状。
可以更改背景色、表针颜色、标签颜色和圆圈颜色。
可以使用getter将时钟时间转换为TimeOfDay、ClockTime或StringTime。

开始使用

首先，导入basic_clocks包：

import 'package:basic_clocks/clocks.dart';

使用方法

使用ClockWidget创建模拟时钟，并可以通过修改参数来自定义时钟。要从时钟获取TimeOfDay，可以使用onDrag参数，这样该参数会监听更新后的时钟TimeOfDay。

在必需的参数time中，必须传递一个ClockTime实例，该实例包含要在时钟上显示的小时和分钟（可选秒数）。

以下是一个完整的示例代码：

class HomeView extends StatelessWidget {
  const HomeView({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ClockWidget(
          size: const Size(250, 250), // 设置时钟大小
          time: ClockTime(
            hour: 9, // 设置小时
            minute: 20, // 设置分钟
            second: 14, // 设置秒数
          ),
          pointyNeedle: true, // 设置表针是否尖锐
          onDrag: (updatedTime) { // 监听时钟拖动事件
            print(updatedTime.toStringTime); // 打印更新后的时间
          },
          showHoursLabels: false, // 是否显示小时标签
          clockThickness: 20, // 设置时钟厚度
          needleThickness: 20, // 设置表针厚度
          dragSpeed: 1, // 设置拖动速度
          color: Colors.black, // 设置表针颜色
          backgroundColor: Colors.transparent, // 设置背景颜色
        ),
      ),
    );
  }
}

你也可以使用以下代码轻松地将TimeOfDay转换为ClockTime：

ClockWidget(
  time: timeOfDay.toClockTime, // 将TimeOfDay转换为ClockTime
)

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

songsunli 1楼

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

basic_clocks 是一个 Flutter 插件，用于在应用程序中展示各种风格的时钟。这个插件提供了多种时钟样式，包括模拟时钟、数字时钟等，可以轻松集成到你的 Flutter 应用中。

安装 `basic_clocks` 插件

首先，你需要在 pubspec.yaml 文件中添加 basic_clocks 依赖：

dependencies:
  flutter:
    sdk: flutter
  basic_clocks: ^1.0.0 # 请检查最新版本

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

使用 `basic_clocks` 插件

安装完成后，你可以在你的 Flutter 应用中使用 basic_clocks 插件来展示时钟。以下是一个简单的示例，展示如何使用 basic_clocks 插件来显示一个模拟时钟和一个数字时钟。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ClockDemo(),
    );
  }
}

class ClockDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Basic Clocks Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('Analog Clock', style: TextStyle(fontSize: 24)),
            SizedBox(height: 20),
            AnalogClock(), // 模拟时钟
            SizedBox(height: 40),
            Text('Digital Clock', style: TextStyle(fontSize: 24)),
            SizedBox(height: 20),
            DigitalClock(), // 数字时钟
          ],
        ),
      ),
    );
  }
}

解释

AnalogClock: 这是一个模拟时钟部件，它会显示一个带有时针、分针和秒针的模拟时钟。
DigitalClock: 这是一个数字时钟部件，它会以数字格式显示当前时间。

自定义时钟

basic_clocks 插件还允许你自定义时钟的外观。例如，你可以通过传递参数来改变时钟的颜色、大小等。

AnalogClock(
  clockSize: 200.0,
  hourHandColor: Colors.blue,
  minuteHandColor: Colors.green,
  secondHandColor: Colors.red,
  showNumbers: true,
);

DigitalClock(
  textStyle: TextStyle(fontSize: 48, color: Colors.purple),
);

Flutter时钟展示插件basic_clocks的使用