Flutter数据处理与展示插件data_widget的使用

data_widget 是一个Flutter包，提供了对InheritedWidget、InheritedModel、InheritedNotifier、ValueNotifier和ChangeNotifier的简单封装。本文将介绍如何使用这个插件进行数据处理和展示。

特性

Data

提供数据

Data.inherit(
  data: 'Hello, World!',
  child: const MyWidget(),
)

获取数据

查找并监听

String data = Data.of<String>(context);

可选查找并监听

String? data = Data.maybeOf<String>(context);

查找

String data = Data.find<String>(context);

可选查找

String? data = Data.maybeFind<String>(context);

阻止数据传递

Data.boundary<MyService>(
  child: const MyWidget(),
)

MultiData

当需要传递多个数据时，可以使用 MultiData 来避免嵌套多个 Data 小部件。

MultiData(
  data: [
    Data<String>('Hello, World!'),
    Data(42),
    Data.boundary<MyService>(),
  ],
  child: const MyWidget(),
)

Model

使用符号作为键来标识模型，允许后代访问或更改模型的值。

提供只读模型

Model.inherit(
  #myString,
  'Hello World',
  child: const MyWidget(),
)

提供可变模型

String myString = 'Hello World';

Model.inherit(
  #myString,
  myString,
  child: const MyWidget(),
  onChanged: (value) {
    myString = value;
  },
)

获取模型

// 查找并监听
String myString = Model.of<String>(context, #myString);

// 可选查找并监听
String? myString = Model.maybeOf<String>(context, #myString);

// 查找
String myString = Model.find<String>(context, #myString);

// 可选查找
String? myString = Model.maybeFind<String>(context, #myString);

MultiModel

类似 MultiData，但使用符号作为键来标识模型。

MultiModel(
  data: [
    Model(#myString, 'Hello, World!'),
    Model(#myString2, 'Another!'),
    ModelBoundary<MyService>(#myService),
  ],
  child: const MyWidget(),
)

MutableNotifier

解决 List 或其他可变对象在被修改时无法通知监听器的问题。

MutableNotifier<List<int>> list = MutableNotifier([1, 2, 3]);
list.mutate((value) {
  value.add(4);
});

ValueNotifierUnmodifiableView

提供 ValueNotifier 的不可变视图。

ValueNotifier<String> valueNotifier = ValueNotifier('Hello, World!');
ValueListenable<String> valueListenable = ValueNotifierUnmodifiableView(valueNotifier);

ValueChangeNotifier

类似于 ValueNotifier，但可以在新旧值变化时通知监听器。

ValueChangeNotifier<int> valueChangeNotifier = ValueChangeNotifier(42);
valueChangeNotifier.addChangeListener((newValue, oldValue) {
  print('Old value: $oldValue');
  print('New value: $newValue');
});
valueChangeNotifier.value = 43;

ListNotifier, SetNotifier, MapNotifier

这些类分别用于可监听列表、集合和映射的变化。

DebounceController

用于防抖动函数调用。

DebounceController debounceController = DebounceController();

debounceController.debounce(() {
  print('Debounced!');
}, duration: const Duration(seconds: 1));

示例代码

以下是一个完整的示例应用，展示了如何使用 data_widget 包：

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

class ProductManager {
  // Your product management logic here
}

class CartManager {
  // Your cart management logic here
}

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

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final ProductManager productManager = ProductManager();
  final CartManager cartManager = CartManager();

  @override
  Widget build(BuildContext context) {
    return MultiData(
      data: [
        Data(productManager),
        Data(cartManager),
      ],
      child: MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
          useMaterial3: true,
        ),
        debugShowCheckedModeBanner: false,
        home: const HomePage(),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    ProductManager productManager = Data.of<ProductManager>(context);
    CartManager cartManager = Data.of<CartManager>(context);

    return Scaffold(
      appBar: AppBar(
        title: Text('Home Page'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('Product Manager: ${productManager.runtimeType}'),
            Text('Cart Manager: ${cartManager.runtimeType}'),
          ],
        ),
      ),
    );
  }
}

通过以上示例，您可以了解到如何在Flutter应用中使用 data_widget 包来进行数据管理和展示。希望这对您的开发有所帮助！