Flutter状态管理插件stateful的使用

Flutter状态管理插件stateful的使用

stateful 是一组常见的状态管理小部件实现。

使用

初始化器

return Initializer(
    afterFirstFrame: true, 
    initialize: (context) {
       // 启动一个初始请求
    },
    child: Container(
        // ...
    ),
);

已释放

return Disposed<State>(
    initialize: (context) {
        final state = State(),
        return DisposedValue(
            value: state, 
            dispose: () => state.dispose(),
        );
    },
    builder: (context, state) => AnimatedBuilder(
        animation: state,
        builder: (context) => Text(state.value),
    ),
);

带Ticker的（使用 TickerProviderStateMixin 初始化）

return Ticked<MyController>(
    initialize: (context) {
        final state = MyController(vsync: vsync),
        return Disposed(
            value: state, 
            dispose: () => state.dispose(),
        );
    },
    builder: (context, controller) => MyView(
            controller: controller,
        ),
    ),
);

动画（使用 AnimationController）

return Animated(
    duration: const Duration(milliseconds: 200),
    builder: (context, animationController) => MyView(
            controller: controller,
        ),
    ),
);

滚动（使用 ScrollController）

return Scrolled(
    initialOffset: 100.0,
    builder: (context, scrollController) => ListView(
            controller: controller,
            children: [
                /// ...
            ]
        ),
    ),
);

选项卡（使用 TabController）

return Tabbed(
    initialIndex: 3,
    length: 4,
    builder: (context, tabController) => TabBarView(
        controller: tabController,
        children: [ 
            // ...
        ]
    ),
);

分页（使用 PageController）

return Paged(
    initialPage: 2,
    viewportFraction: 0.6,
    builder: (context, pageController) => PageView(
        controller: pageController,
        children: [ 
            // ...
        ]
    ),
);

文本编辑（使用 TextEditingController）

return TextEdited(
    text: 'hello',
    builder: (context, textEditingController) => TextField(
        controller: textEditingController,
        /// ...
    ),
);

注册（多个初始化）

final registry = Registry();
final animated = registry.animated(
    duration: const Duration(milliseconds: 200)
);
final textEdited = registry.textEdited(
    text: 'hello',
);
final state = registry.initialized(
    (context) {
        final state = State(),
        return Disposed(
            value: state, 
            dispose: () => state.dispose(),
        );
    }
);

return Registered(
    registry: registry,
    builder: (context, values) => Column(
        children: [
            MyView(
                controller: animated(values),
            ),
            AnimatedBuilder(
                animation: state,
                builder: (context) => Text(state(values).value),
            ),
            TextField(
                controller: textEdited(values),
                /// ...
            ),
        ],
    ),
);

Q & A

如何与Provider比较？

provider 包提供了一种初始化和释放实例的方法，同时也可以从子组件中访问这些实例。但是，只能为给定类型提供一个实例。而 stateful 包的目的不同，声明的实例仅在构建方法中可访问，因此它更轻量，并且针对本地实例。

示例代码

以下是一个完整的示例，展示了如何使用 stateful 插件进行状态管理：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}