State management in Flutter

Components manage their own state

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(' state management '),), 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: color.white),), width: 200.0, height: 200.0, decoration: BoxDecoration(color: _active? Colors.lightGreen[700]:Colors.grey[600], ), ), ); }}Copy the code

The parent component manages the children

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],
        ),
      ),
    );
  }

}
Copy the code

The parent component manages the state of the child component

import 'package:flutter/material.dart'; import 'package:flutter/foundation.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(' state management '),), 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), ); 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; }); } // handle state changes yourself void _handleTapUp(TapUpDetails details){setState(() {_highlight = false; }); } // handle state changes yourself void _handleTapCancel(){setState(() {_highlight = false; }); } // Call back to the parent class for processing 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: color.white),), width: 200.0, height: 200.0, decoration: BoxDecoration(color: widget.active? Colors.lightGreen[700]:Colors.grey[600], border:_highlight? Border. All (color: color.teal [700],width: 10.0):null,),); }}Copy the code

More address: github.com/BlissYang91… Welcome to star