Flutter状态管理

Flutter

setState

import 'package:flutter/material.dart';
class CounterPage extends StatefulWidget {
  const CounterPage({Key? key, required this.title}) : super(key: key);
  final String title;
  @override
  CounterPageState createState() => CounterPageState();
}
class CounterPageState extends State<CounterPage> {
  int _counter = 0;
  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }
  void _decrementCounter() {
    setState(() {
      _counter--;
    });
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Center(
            child: Counter(
                counter: _counter,
                decrementCounter: _decrementCounter,
                incrementCounter: _incrementCounter)));
  }
}
class Counter extends StatelessWidget {
  final counter;
  final decrementCounter;
  final incrementCounter;
  Counter(
      {Key? key,
      this.counter: 0,
      @required this.decrementCounter,
      @required this.incrementCounter})
      : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              'Counter:',
              style: Theme.of(context).textTheme.headline4,
            ),
            Text(
              '$counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
        TextButton(
          style: ButtonStyle(
              backgroundColor:
                  MaterialStateProperty.resolveWith((states) => Colors.orange)),
          child:
              Text('Increment Counter', style: TextStyle(color: Colors.white)),
          onPressed: incrementCounter,
        ),
        TextButton(
          style: ButtonStyle(
              backgroundColor:
                  MaterialStateProperty.resolveWith((states) => Colors.red)),
          child:
              Text('Decrement Counter', style: TextStyle(color: Colors.white)),
          onPressed: decrementCounter,
        )
      ],
    ));
  }
}

InheritedWidget

import 'package:flutter/material.dart';
class CounterPage extends StatefulWidget {
  const CounterPage({Key? key, required this.title}) : super(key: key);
  final String title;
  static CounterPageState of(BuildContext context) {
    return context
        .dependOnInheritedWidgetOfExactType<MyInheritedWidget>()!
        .data;
  }
  @override
  CounterPageState createState() => CounterPageState();
}
class CounterPageState extends State<CounterPage> {
  int _counter = 0;
  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }
  void _decrementCounter() {
    setState(() {
      _counter--;
    });
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Center(child: MyInheritedWidget(child: Counter(), data: this)));
  }
}
class Counter extends StatefulWidget {
  const Counter({Key? key}) : super(key: key);
  @override
  CounterState createState() => CounterState();
}
class CounterState extends State<Counter> {
  late int counter;
  late CounterPageState data;
  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    data = CounterPage.of(context);
    counter = data._counter;
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              'Inherited Counter:',
              style: Theme.of(context).textTheme.headline4,
            ),
            Text(
              '$counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
        TextButton(
          style: ButtonStyle(
              backgroundColor:
                  MaterialStateProperty.resolveWith((states) => Colors.orange)),
          child: const Text('Increment Counter',
              style: TextStyle(color: Colors.white)),
          onPressed: data._incrementCounter,
        ),
        TextButton(
          style: ButtonStyle(
              backgroundColor:
                  MaterialStateProperty.resolveWith((states) => Colors.red)),
          child: const Text('Decrement Counter',
              style: TextStyle(color: Colors.white)),
          onPressed: data._decrementCounter,
        )
      ],
    ));
  }
}
class MyInheritedWidget extends InheritedWidget {
  final CounterPageState data;
  const MyInheritedWidget({
    Key? key,
    required Widget child,
    required this.data,
  }) : super(key: key, child: child);
  @override
  bool updateShouldNotify(InheritedWidget oldWidget) {
    return true;
  }
}

InheritedModel

import 'package:flutter/material.dart';
class CounterPage extends StatefulWidget {
  const CounterPage({Key? key, required this.title}) : super(key: key);
  final String title;
  @override
  CounterPageState createState() => CounterPageState();
}
class CounterPageState extends State<CounterPage> {
  int _counter = 0;
  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }
  void _decrementCounter() {
    setState(() {
      _counter--;
    });
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Center(child: MyInheritedModel(child: const Counter(), data: this)));
  }
}
class Counter extends StatefulWidget {
  const Counter({Key? key}) : super(key: key);
  @override
  CounterState createState() => CounterState();
}
class CounterState extends State<Counter> {
  late int counter;
  late MyInheritedModel inheritedModel;
  @override
  Widget build(BuildContext context) {
    inheritedModel = MyInheritedModel.of(context);
    counter = inheritedModel.data._counter;
    return Scaffold(
        body: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              'Inherited Counter:',
              style: Theme.of(context).textTheme.headline4,
            ),
            Text(
              '$counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
        TextButton(
          style: ButtonStyle(
              backgroundColor:
                  MaterialStateProperty.resolveWith((states) => Colors.orange)),
          child: const Text('Increment Counter',
              style: TextStyle(color: Colors.white)),
          onPressed: inheritedModel.data._incrementCounter,
        ),
        TextButton(
          style: ButtonStyle(
              backgroundColor:
                  MaterialStateProperty.resolveWith((states) => Colors.red)),
          child: const Text('Decrement Counter',
              style: TextStyle(color: Colors.white)),
          onPressed: inheritedModel.data._decrementCounter,
        )
      ],
    ));
  }
}
class MyInheritedModel extends InheritedModel<String> {
  final CounterPageState data;
  const MyInheritedModel({
    Key? key,
    required Widget child,
    required this.data,
  }) : super(key: key, child: child);
  @override
  bool updateShouldNotify(MyInheritedModel old) {
    return true;
  }
  @override
  bool updateShouldNotifyDependent(MyInheritedModel old, Set<String> aspects) {
    return true;
  }
  static MyInheritedModel of(BuildContext context, {String aspect = ""}) {
    return InheritedModel.inheritFrom<MyInheritedModel>(context,
        aspect: aspect)!;
  }
}

Provider

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
class ProCounter with ChangeNotifier {
  int _counter = 0;
  int get counter => _counter;
  void _incrementCounter() {
    _counter++;
    notifyListeners();
  }
  void _decrementCounter() {
    _counter--;
    notifyListeners();
  }
}
class CounterPage extends StatelessWidget {
  const CounterPage({Key? key, required this.title}) : super(key: key);
  final String title;
  @override
  Widget build(BuildContext context) {
    return MultiProvider(
        providers: [ChangeNotifierProvider(create: (_) => ProCounter())],
        child: Scaffold(appBar: AppBar(title: Text(title)), body: const Counter()));
  }
}
class Counter extends StatelessWidget {
  const Counter({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    final counter = Provider.of<ProCounter>(context);
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              'Inherited Counter:',
              style: Theme.of(context).textTheme.headline4,
            ),
            Text(
              '${counter.counter}',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
        TextButton(
            style: ButtonStyle(
                backgroundColor: MaterialStateProperty.resolveWith(
                    (states) => Colors.orange)),
            child: const Text('Increment Counter',
                style: TextStyle(color: Colors.white)),
            onPressed: () {
              Provider.of<ProCounter>(context, listen: false)
                  ._incrementCounter();
            }),
        TextButton(
            style: ButtonStyle(
                backgroundColor:
                    MaterialStateProperty.resolveWith((states) => Colors.red)),
            child: const Text('Decrement Counter',
                style: TextStyle(color: Colors.white)),
            onPressed: () {
              Provider.of<ProCounter>(context, listen: false)
                  ._decrementCounter();
            })
      ],
    );
  }
}

GetX

import 'package:flutter/material.dart';
import 'package:get/get.dart';
class CounterController extends GetxController {
  /// (1,2)定义了该变量为响应式变量，当该变量数值变化时，页面的刷新方法将自动刷新
  // var counter = 0.obs;
  // (3)GetBuilder
  var counter = 0;
  void incrementCounter() {
    counter++;
    // (3)使用GetBuilder时手动更新
    update();
  }
  void decrementCounter() {
    counter--;
    update();
  }
}
class CounterPage extends StatefulWidget {
  const CounterPage({Key? key, required this.title}) : super(key: key);
  final String title;
  @override
  CounterPageState createState() => CounterPageState();
}
class CounterPageState extends State<CounterPage> {
  @override
  Widget build(BuildContext context) {
    /// 通过依赖注入方式实例化的控制器
    final counter = Get.put(CounterController());
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Center(
            child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // 1.
            // Obx(() => Text(
            //       "count的值为：${counter.counter}",
            //       style: const TextStyle(color: Colors.redAccent, fontSize: 20),
            //     )),
            // 2.
            // GetX<CounterController>(
            //   init: counter,
            //   builder: (controller) {
            //     return Text(
            //       "count的值为：${controller.counter}",
            //       style: const TextStyle(color: Colors.redAccent, fontSize: 20),
            //     );
            //   },
            // ),
            // 3.
            GetBuilder<CounterController>(
              builder: (oneController) {
                return Text("count的值为: ${oneController.counter}");
              },
            ),
            const SizedBox(
              height: 30,
            ),
            ElevatedButton(
              // 按钮点击count值++
              onPressed: () => counter.incrementCounter(),
              child: const Text("点击count++"),
            ),
          ],
        )));
  }
}

参考

Flutter 状态管理概述
Flutter状态管理之路（一）
Flutter状态管理之路（二）
Flutter状态管理GetX使用详解