Flutter状态基础知识

Flutter状态基础知识

Widge的状态管理主要分为三种场景

  • Widget自身状态管理

    状态有关界面外观效果的(颜色、动画)

  • 子Widget状态管理

    状态有关用户数据(复选框的选中状态、滑块位置)

  • 父Widget和子Widget都存在的状态管理

    某一个状态是不同Widget共享的

状态生命周期

有状态的Widget的状态生命周期,主要是在用户参与的相关情况下,对于相关联的组件从创建、现实、更新、停止、销毁的各个阶段。Flutter的有状态的生命周期如下图所示:

Flutter状态基础知识

从上图可以知道,大概可以分为三个阶段

  • 初始化阶段
  • 更新阶段
  • 销毁阶段

在初始化阶段中,主要是由构造函数、状态创建、状态依赖、视图构建等生命周期构成。涉及的内容主要有

  • 构造函数

    生命周期的起点,通过调用createState()来创建一个状态

  • initState()

    仅仅被调用一次

  • didChangeDependencies()

    用来处理状态组件依赖关系变化,在initState()被调用后进行调用

  • build()

    用于构建视图

在更新阶段,主要是涉及组件的状态更新操作。在更新阶段中所涉及到的内容主要有

  • setState()

    通过调用该函数,告知系统更新后数据重建视图

  • didChangeDependencies()

    当状态组件的依赖关系发生变化后,会自动回调,从而触发组件的构建操作

  • didUpdateWidget()

    配置发生变化或者热重载时,系统会回调该函数从而进行更新视图

在销毁阶段,主要用来移除或销毁组件。在销毁阶段中涉及到的内容主要有

  • deactivate()

    组件内可见状态发生变化时,会被调用,此时组件会暂时被移除

  • dispose()

    组件需要永久性被移除时调用,组件被销毁。在调用前,可以进行清理工作

自身状态管理

当Widget自身的状态需要改变时,调用setState(),从而进行视图重绘。

父子组件状态管理

子状态往往是一个无状态的组件,父Widget只需要告诉子Widget什么时候需要更新即可。示例代码如下:

son.dart

子组件是一个无状态的组件,其状态的改变都是根据父组件进行更新的。

import 'package:flutter/material.dart';
class TapBoxB extends StatelessWidget {
  const TapBoxB({Key? key, this.active = false, required this.onChanged})
      : super(key: key);
  final bool active;
  final ValueChanged<bool> onChanged;
  void _handleTap() {
    onChanged(!active);
  }
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: _handleTap,
      child: Container(
        child: Center(
          child: Text(
            active ? 'Active' : 'Inactive',
            style: const TextStyle(fontSize: 32.0, color: Colors.white),
            textDirection: TextDirection.ltr,
          ),
        ),
        width: 200.0,
        height: 200.0,
        decoration: BoxDecoration(
          color: active?Colors.lightGreen[700]:Colors.grey[600],
        ),
      ),
    );
  }
}

parent.dart

父组件是一个有状态的组件,父组件通过子组件的构造函数将当前状态传递给TapBoxB,从而让其接收到状态后进行渲染操作。

import 'package:flutter/material.dart';
import 'package:flutter_demo/son.dart';
void main()=>runApp(ParentWidget());
class ParentWidget extends StatefulWidget{

  @override
  State<StatefulWidget> createState() {
    return ParentWidgetState();
  }
}
class ParentWidgetState extends State<ParentWidget>{
  bool _active=false;
  void _handleTapBoxChanged(bool newValue){
    setState(() {
      _active=newValue;
    });
  }
  @override
  Widget build(BuildContext context) {
    return Container(
      child: TapBoxB(
        active: _active,
        onChanged: _handleTapBoxChanged,
      ),
    );
  }
}

上面的代码运行后的结果如下

Flutter状态基础知识

Flutter状态基础知识

混合状态管理

子组件自身管理一些内部状态,父组件管理其他外部状态。在此中模式下,子组件使用构造函数接收父组件传递的状态,并使用回调函数返回子组件内部的状态。

上一篇:SV中program & module


下一篇:js 选项卡