Flutter中状态管理

组件管理自己状态

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

//组件状态管理(自己管理自己的状态)
class MyApp extends StatelessWidget{

  @override
  Widget build(BuildContext context) {

    return MaterialApp(
      title: 'Flutter layout',
      home: Scaffold(
        appBar: AppBar(
          title: Text('状态管理'),
        ),
        body: Center(
          child: TapboxA(),
        )
      ),
    );
  }

}

//组件自己管理自己状态
class TapboxA extends StatefulWidget{

  TapboxA({Key key}) :super(key:key);

  @override
  _TapboxAState createState()=>_TapboxAState();

}
//子类中更改状态
class _TapboxAState extends State<TapboxA>{
  bool _active = false;

  void _handleTap(){
    setState(() {
      _active = !_active;
    });
  }
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return GestureDetector(
      onTap: _handleTap,
      child: Container(
        child: Center(
          child: Text(
            _active?'Active':'Inactive',
            style: TextStyle(
                fontSize: 32.0,
                color: Colors.white
            ),
          ),
        ),
        width: 200.0,
        height: 200.0,
        decoration: BoxDecoration(
          color: _active?Colors.lightGreen[700]:Colors.grey[600],
        ),
      ),
    );
  }

}

父组件管理子组件

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

void main() => runApp(MyApp());

//组件状态管理(父 widget 管理 widget 的 state)
class MyApp extends StatelessWidget{

  @override
  Widget build(BuildContext context) {

    return MaterialApp(
      title: 'Flutter layout',
      home: Scaffold(
          appBar: AppBar(
            title: Text('状态管理'),
          ),
          body: Center(
            child: ParentWidget(),
          )
      ),
    );
  }

}

//管理状态的父组件
class ParentWidget extends StatefulWidget{
  @override
  _ParentWidgetState createState() => _ParentWidgetState();

}
class _ParentWidgetState extends State<ParentWidget>{
  bool _active = false;

  void _handleTapboxChanged(bool newValue){
    setState(() {
      _active = !_active;
    });
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      //onChanged回调方法调用的时候执行setstate方法
      child: TapboxB(active:_active,onChanged: _handleTapboxChanged),
    );
  }

}

//子组件，状态由父组件管理，继承StatelessWidget
class TapboxB extends StatelessWidget{
  final bool active;
  final ValueChanged<bool> onChanged;//标记基本值更改的回调方法

  TapboxB({Key key,this.active:false,@required this.onChanged}):super(key:key);

  void _handleTap(){
    //把状态改变的值通过回调方法传给父类去处理setstate方法
    onChanged(!active);
  }
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: _handleTap,
      child: Container(
        child: Center(
          child: Text(
            active?'active':'inactive',
            style: TextStyle(fontSize: 32.0,color: Colors.white),
          ),
        ),
        width: 200.0,
        height: 200.0,
        decoration: BoxDecoration(
          color: active?Colors.lightGreen[700]:Colors.grey[600],
        ),
      ),
    );
  }

}

父组件管理子组件部分状态

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

void main() => runApp(MyApp());

//组件状态管理(父 widget 管理 widget 的 state)
class MyApp extends StatelessWidget{

  @override
  Widget build(BuildContext context) {

    return MaterialApp(
      title: 'Flutter layout',
      home: Scaffold(
          appBar: AppBar(
            title: Text('状态管理'),
          ),
          body: Center(
            child: ParentWidget(),
          )
      ),
    );
  }
}

//父组件管理子组件部分状态
class ParentWidget extends StatefulWidget{
  @override
  _ParentWidgetState createState()=>_ParentWidgetState();

}
class _ParentWidgetState extends State<ParentWidget>{
  bool _active = false;

  void _handleTapboxChanged(bool newValue){
    setState(() {
      _active = !_active;
    });
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      child: TapboxC(active:_active,onChanged: _handleTapboxChanged),
    );
  }

}
// 子组件也管理部分自身状态 继承StatefulWidget
class TapboxC extends StatefulWidget{
  final bool active;
  final ValueChanged<bool> onChanged;

  TapboxC({Key key,this.active:false,@required this.onChanged}):super(key:key);

  @override
  _TapboxCState createState()=> _TapboxCState();

}
class _TapboxCState extends State<TapboxC>{
  bool _highlight = false;
//自己处理状态改变
  void _handleTapDown(TapDownDetails details){
    setState(() {
      _highlight = true;
    });
  }
//自己处理状态改变
  void _handleTapUp(TapUpDetails details){
    setState(() {
      _highlight = false;
    });
  }
  //自己处理状态改变
  void _handleTapCancel(){
    setState(() {
      _highlight = false;
    });
  }
  //将自己的状态回调给父类进行处理
  void _handleTap(){
    widget.onChanged(!widget.active);
  }
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return GestureDetector(
      onTapDown: _handleTapDown,
      onTapUp: _handleTapUp,
      onTap: _handleTap,
      onTapCancel: _handleTapCancel,
      child: Container(
        child: Center(
          child: Text(
            widget.active ?'active':'inactive',
            style: TextStyle(fontSize: 32.0,color: Colors.white),
          ),
        ),
        width: 200.0,
        height: 200.0,
        decoration: BoxDecoration(
          color: widget.active?Colors.lightGreen[700]:Colors.grey[600],
        border:_highlight?Border.all(color: Colors.teal[700],width: 10.0):null,
      ),
      ),
    );
  }

}

更多地址： https://github.com/BlissYang91/my_flutter 欢迎star