Flutter状态管理插件state_set的潜在功能使用

Flutter状态管理插件state_set的潜在功能使用

标题

Flutter状态管理插件state_set的潜在功能使用

内容

• The StateSet Mixin

  • 找到合适的State对象来调用其setState()方法。
  • 将State对象按类型收集到一个Map对象中，以便在整个应用中可靠访问。

• Installing

  • 我不喜欢安装页面上建议的版本号。在大多数情况下，总是升级到“主要”语义版本号。在你的pubspec.yaml文件中，输入“主要”语义版本号后跟两个尾随零，例如：.0.0。
  • 示例代码如下：

dependencies:
  set_state: ^3.0.0

• Documentation
  • 这个包有详细的文档在免费的Medium文章中：
    • [Mixin’ State Objects Part 1]((https://andrious.medium.com/a-stateset-class-part-1-2891fa1a0eea1)
    • 

示例代码

import 'package:flutter/material.dart';

import 'package:state_set/state_set.dart';

void main() => runApp(const MainApp());

///
class MainApp extends StatefulWidget {
  ///
  const MainApp({Key? key}) : super(key: key);

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

class _MainAppState extends State with StateSet {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Page1(key: UniqueKey()),
    );
  }
}

/// The first page displayed in this app.
class Page1 extends StatefulWidget {
  ///
  const Page1({Key? key}) : super(key: key);

  [@override](/user/override)
  State createState() => _Page1State();

  ///
  void onPressed() {
    var state = stateAs<_Page1State>();
    state?.count++;
  }

  ///
  void setState(VoidCallback fn) {
    State? state;
    state = this.state as _Page1State?;
    state = StateSet.of<Page1, _Page1State>();
    state = StateSet.to<_Page1State>();

    state?.setState(fn);
  }

  ///
  void refresh() {
    final specificState = stateAs<_Page1State>();
    specificState?.setState(() {});
  }
}

class _Page1State extends _PageState<Page1> {
  [@override](/user/override)
  void initState() {
    // Place a breakpoint here and you'll find this
    // function will run again with the button, New Key for Page 1,
    // is pressed. The State object is re-created.
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return buildPage1(count: count, counter: widget.onPressed);
  }
}

/// The second page displayed in this app.
class Page2 extends StatefulWidget {
  ///
  const Page2({Key? key}) : super(key: key);

  [@override](/user/override)
  State createState() => _Page2State();

  ///
  void onPressed() {
    var state = stateAs<_Page2State>();
    state?.count++;
    state?.setState(() {});
  }
}

class _Page2State extends _PageState<Page2> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return buildPage2(count: count, counter: widget.onPressed);
  }
}

示例Demo

import 'package:flutter/material.dart';

import 'package:state_set/state_set.dart';

void main() => runApp(const MainApp());

///
class MainApp extends StatefulWidget {
  ///
  const MainApp({Key? key}) : super(key: key);

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

class _MainAppState extends State with StateSet {
  int count = 0;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Page1(key: UniqueKey()),
    );
  }
}

/// The first page displayed in this app.
class Page1 extends StatefulWidget {
  ///
  const Page1({Key? key}) : super(key: key);

  [@override](/user/override)
  State createState() => _Page1State();

  ///
  void onPressed() {
    setState(() {
      count++;
    });
  }

  ///
  void refresh() {
    setState(() {
      count++;
    });
  }
}

class _Page1State extends _PageState<Page1> {
  [@override](/user/override)
  void initState() {
    // Place a breakpoint here and you'll find this
    // function will run again with the button, New Key for Page 1,
    // is pressed. The State object is re-created.
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Page 1'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('You have pushed the button this many times:'),
            Text('$count'),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          onPressed();
        },
        child: Icon(Icons.add),
      ),
    );
  }
}