Flutter可控制组件插件controllable_flutter的使用

controllable_flutter 是一个用于在 Flutter 中创建可控制组件的插件。它允许你通过外部控制器来管理组件的状态和行为，从而实现更灵活和可复用的 UI 组件。

安装

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

dependencies:
  flutter:
    sdk: flutter
  controllable_flutter: ^1.0.0  # 请使用最新版本

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

基本用法

controllable_flutter 的核心思想是通过 Controller 来管理组件的状态。你可以通过继承 Controller 类来创建自定义的控制器，并将其与组件绑定。

1. 创建控制器

首先，创建一个控制器类，继承自 Controller：

import 'package:controllable_flutter/controllable_flutter.dart';

class MyController extends Controller {
  int _counter = 0;

  int get counter => _counter;

  void increment() {
    _counter++;
    notifyListeners(); // 通知监听器状态已更新
  }
}

2. 创建可控制组件

接下来，创建一个可控制组件，使用 ControllableWidget 来绑定控制器：

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

class MyWidget extends ControllableWidget<MyController> {
  MyWidget({Key? key}) : super(key: key, controller: MyController());

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Controllable Widget Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Counter:',
            ),
            Text(
              '${controller.counter}',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: controller.increment,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

3. 使用可控制组件

最后，在你的应用中使用这个可控制组件：

import 'package:flutter/material.dart';
import 'my_widget.dart'; // 导入你创建的可控制组件

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Controllable Flutter Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyWidget(), // 使用可控制组件
    );
  }
}

高级用法

1. 多个控制器

你可以为同一个组件绑定多个控制器，以实现更复杂的状态管理。

class MyWidget extends ControllableWidget<MyController> {
  MyWidget({Key? key}) : super(key: key, controller: MyController());

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Controllable Widget Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Counter:',
            ),
            Text(
              '${controller.counter}',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: controller.increment,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

2. 监听控制器状态

你可以通过 addListener 方法来监听控制器状态的变化，并在状态变化时执行相应的操作。

class MyWidget extends ControllableWidget<MyController> {
  MyWidget({Key? key}) : super(key: key, controller: MyController());

  [@override](/user/override)
  void initState() {
    super.initState();
    controller.addListener(_onControllerChange);
  }

  void _onControllerChange() {
    // 当控制器状态变化时执行的操作
    print('Counter changed: ${controller.counter}');
  }

  [@override](/user/override)
  void dispose() {
    controller.removeListener(_onControllerChange);
    super.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Controllable Widget Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Counter:',
            ),
            Text(
              '${controller.counter}',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: controller.increment,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}