Flutter望远镜功能插件telescope的使用

Telescope 是一个易于使用的状态管理器，基于观察者设计模式。它支持所有平台，并且具有丰富的特性，如直接绑定到Flutter的状态fulWidget、保存状态到磁盘等。

安装和导入

安装

首先，通过以下命令安装 telescope 插件：

flutter pub add telescope

导入

在你的 Dart 文件中导入 telescope 包：

import 'package:telescope/telescope.dart';

如何使用

使用 Telescope 分为三个步骤：

1. 创建一个 Telescope 实例

var textValue = Telescope("default value");

2. 在 Widget 中监听（watch）

将下面的代码放在 Widget 的 build 函数中：

@override
Widget build(BuildContext context) {
  return Material(
      child: SafeArea(
          child: Container(
            child: Column(children: [
              // watch like this ('this' is State that will automatically rebuild on data change)
              Text(textValue.watch(this)), 
              Text(textValue.watch(this)),
              Text(textValue.watch(this).length.toString()),
            ],),
          )
      )
  );
}

注意：你可以在多个 Widget 中监听同一个 Telescope 实例。

3. 更新值

你可以从任何地方更新 Telescope 的值：

onTap: (){
  textValue.value += "a";
}

当值更新时，Widget 会自动重建，无需调用 setState()。

其他功能

依赖关系

Telescopes 可以依赖于其他 Telescopes：

var height = Telescope(186);
var weight = Telescope(72);

var bmi = Telescope.dependsOn([height, weight], () {
  return weight.value / ((height.value/100) * (height.value/100));
});

var showingText  = Telescope.dependsOn([bmi], () {
  return "weight is ${weight.value} and height is ${height.value} so bmi will be ${bmi.value.toString().substring(0,5)}";
});

异步方式

var bmi = Telescope.dependsOnAsync(0, [height, weight], () async {
  return await calculateBMI(height.value, weight.value);
});

缓存

var bmi = Telescope.dependsOnAsync(0, [height, weight], () async {
   return await calculateBMI(height.value, weight.value);
}, enableCaching: true);

你还可以设置缓存过期时间 cacheExpireTime。

防抖动

var bmi = Telescope.dependsOnAsync(0, [height, weight], () async {
   return await calculateBMI(height.value, weight.value);
}, debounceTime: Duration(milliseconds: 500));

加载状态

var isCalculatingBMI = Telescope<bool>(false);
var bmi = Telescope.dependsOnAsync(0, [height, weight], () async {
   return await calculateBMI(height.value, weight.value);
}, isCalculating: isCalculatingBMI);

保存到磁盘

var height = Telescope.saveOnDiskForBuiltInType(187, "bmi_height_input");

这样即使用户关闭并重新打开应用，Telescope 也会加载上次保存的值。

TelescopeList

Telescope 对列表的支持：

var items = TelescopeList(["ab", "abb", "bc", "bcc" , "c"]);

保存非内置类型的值到磁盘

你需要实现 OnDiskSaveAbility 接口：

class Human {
   int height;
   int weight;
   Human(this.height,this.weight);

   @override
   int get hashCode => height*weight;
}

class HumanOnDiskAbility implements OnDiskSaveAbility<Human> {
   @override
   Human parseOnDiskString(String data) {
      var sp = data.split(":");
      return Human(int.parse(sp[0]), int.parse(sp[1]));
   }

   @override
   String toOnDiskString(Human instance) => "${instance.height}:${instance.weight}";
}

var human = Telescope.saveOnDiskForNonBuiltInType(
        Human(187, 72),
        "human_for_bmi",
        HumanOnDiskAbility()
);

示例 Demo

以下是一个完整的示例 Demo：

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

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

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

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  var textValue = Telescope("Hello");

  void _updateText() {
    textValue.value += "!";
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Telescope Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              textValue.watch(this),
              style: TextStyle(fontSize: 24),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _updateText,
              child: Text('Update Text'),
            ),
          ],
        ),
      ),
    );
  }
}

这个示例展示了如何创建一个 Telescope 实例、在 Widget 中监听它的值并在按钮点击时更新其值。希望这个示例能帮助你更好地理解和使用 Telescope 插件。