Flutter健康管理或时间追踪插件lemon_watch的使用

Flutter 健康管理或时间追踪插件 lemon_watch 的使用

开始使用

lemon_watch 是一个状态管理解决方案。下面是一个使用 lemon_watch 实现的默认 Flutter 计数器应用的例子。

示例

首先，确保在 pubspec.yaml 文件中添加 lemon_watch 依赖：

dependencies:
  lemon_watch: ^1.1.0

然后，您可以使用以下代码来创建一个简单的计数器应用：

import 'dart:math';

import 'package:flutter/material.dart';
import 'package:lemon_watch/src.dart';

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

class MyApp extends StatelessWidget {
  // 创建一个 Watch 实例，初始值为 0，并且设置最大值为 10
  final count = Watch(0, clamp: (int value) => min(value, 10));

  MyApp({super.key}) {
    // 监听 count 的变化
    count.onChanged(onCountChanged);
  }

  // 当 count 变化时调用此函数
  void onCountChanged(int value){
     print("onCountChanged($value)");
  }

  [@override](/user/override)
  Widget build(BuildContext context) => MaterialApp(
      title: 'Lemon Watch Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Lemon Watch Demo'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              const Text(
                'You have pushed the button this many times:'
              ),
              // 使用 WatchBuilder 来监听 count 的变化并更新 UI
              WatchBuilder(count, (countValue) => Text(
                '$countValue',
                style: Theme.of(context).textTheme.headlineMedium,
              )),
            ],
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () => count.value++, // 按钮点击时增加 count 的值
          tooltip: 'Increment',
          child: const Icon(Icons.add),
        ), // 这个尾随逗号使得构建方法更易于自动格式化
      ),
    );
}

代码解释

• 导入必要的包：

  import 'dart:math';
  import 'package:flutter/material.dart';
  import 'package:lemon_watch/src.dart';
  

• 创建 MyApp 类：

  • 使用 Watch 创建一个状态管理对象 count，初始值为 0，并且设置最大值为 10。
  • 添加 onChanged 回调函数，当 count 的值发生变化时会调用该函数。

  final count = Watch(0, clamp: (int value) => min(value, 10));
  
  MyApp({super.key}) {
    count.onChanged(onCountChanged);
  }
  
  void onCountChanged(int value){
     print("onCountChanged($value)");
  }
  

• 构建界面：

  • 使用 MaterialApp 包装整个应用。
  • 在 Scaffold 中添加 AppBar 和 Center，将 Text 和 WatchBuilder 组件放在 Column 中。
  • 使用 FloatingActionButton 来增加 count 的值。

  [@override](/user/override)
  Widget build(BuildContext context) => MaterialApp(
      title: 'Lemon Watch Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Lemon Watch Demo'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              const Text(
                'You have pushed the button this many times:'
              ),
              WatchBuilder(count, (countValue) => Text(
                '$countValue',
                style: Theme.of(context).textTheme.headlineMedium,
              )),
            ],
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () => count.value++,
          tooltip: 'Increment',
          child: const Icon(Icons.add),
        ),
      ),
    );