Flutter依赖注入与状态管理插件katana_scoped的使用

介绍

Flutter的状态分为以下两类，如官方描述：

• Ephemeral state：在单个widget内封闭的状态。例如导航栏的当前位置、文本表单的当前输入状态等。
• App state：在应用内共享的状态。用于多个Widgets之间，例如从数据库检索的数据、登录状态、用户偏好设置等。

katana_scoped 是一个Flutter的状态管理插件，它通过显式地划分这些状态类型来简化状态管理。

安装

首先，您需要导入 katana_scoped 包：

flutter pub add katana_scoped

实现

前期准备

在应用程序根目录附近创建一个 AppRef 并放置 AppScoped 小部件。

// main.dart
import 'package:flutter/material.dart';
import 'package:katana_scoped/katana_scoped.dart';

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

final appRef = AppRef();

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return AppScoped(
      appRef: appRef,
      child: MaterialApp(
        home: const CounterPage(),
        title: "Flutter Demo",
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
      ),
    );
  }
}

创建页面

创建页面时，实现一个扩展 PageScopedWidget 的小部件。

// counter_page.dart
import 'package:flutter/material.dart';
import 'package:katana_scoped/katana_scoped.dart';

class CounterPage extends PageScopedWidget {
  const CounterPage({super.key});

  [@override](/user/override)
  Widget build(BuildContext context, PageRef ref) {
    final counter = ref.page.watch((ref) => ValueNotifier(0));

    return Scaffold(
      appBar: AppBar(
        title: const Text("Test App"),
      ),
      body: Center(
        child: Text("${counter.value}"),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          counter.value++;
        },
        child: const Icon(Icons.add),
      ),
    );
  }
}

创建小部件

在页面下可以放置任何小部件，如 StatelessWidget 或 StatefulWidget，但如果您想管理状态，可以通过创建 ScopedWidget 来实现。

// scoped_test_page.dart
import 'package:flutter/material.dart';
import 'package:katana_scoped/katana_scoped.dart';

class ScopedTestPage extends PageScopedWidget {
  const ScopedTestPage({super.key});

  [@override](/user/override)
  Widget build(BuildContext context, PageRef ref) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Test App"),
      ),
      body: ScopedTestContent(),
    );
  }
}

class ScopedTestContent extends ScopedWidget {
  const ScopedTestContent({
    super.key,
  });

  [@override](/user/override)
  Widget build(BuildContext context, WidgetRef ref) {
    final widget = ref.widget.watch((ref) => ValueNotifier(0));
    final page = ref.page.watch((ref) => ValueNotifier(0));
    final app = ref.app.watch((ref) => ValueNotifier(0));

    return Column(
      children: [
        ListTile(
          title: Text(app.value.toString()),
          onTap: () {
            app.value++;
          },
        ),
        ListTile(
          title: Text(page.value.toString()),
          onTap: () {
            page.value++;
          },
        ),
        ListTile(
          title: Text(widget.value.toString()),
          onTap: () {
            widget.value++;
          },
        ),
      ],
    );
  }
}

使用示例代码

以下是完整的示例代码，展示了如何使用 katana_scoped 管理状态和依赖注入。

// main.dart
import 'package:flutter/material.dart';
import 'package:katana_scoped/katana_scoped.dart';

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

final appRef = AppRef();

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return AppScoped(
      appRef: appRef,
      child: MaterialApp(
        home: const CounterPage(),
        title: "Flutter Demo",
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
      ),
    );
  }
}

final valueNotifierQuery =
    ChangeNotifierAppScopedQueryFamily<ValueNotifier<int>, int>(
  (ref, p) => ValueNotifier(p),
);

class CounterPage extends PageScopedWidget {
  const CounterPage({super.key});

  [@override](/user/override)
  Widget build(BuildContext context, PageRef ref) {
    final counter = ref.app.query(valueNotifierQuery(100));

    return Scaffold(
      appBar: AppBar(title: const Text("App Demo")),
      body: Center(
        child: Text("${counter.value}"),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          counter.value++;
        },
        child: const Icon(Icons.add),
      ),
    );
  }
}