Flutter部件内部状态管理小结(实现Vue的v-model)

3,982 阅读5分钟

Table of Contents generated with DocToc

Flutter部件内部状态管理

本文是 Flutter部件内部状态管理的小结,从部件的基础开始,到部件的状态管理,并且在过程中实现一个类似 Vuev-model 的功能。

widget 基础

widget(部件)

React 里万物皆组件, Java 里万物皆对象,Flutter里,能看到的一切都是 widget(部件),如按钮、文本框等等。

Flutter内部已经为我们做了一些基础的 widget ,例如:

  • Text: 这个就是一个文本部件,里面用于放置文本
  • Row, Column: 行列布局部件
  • Container: 可以理解为 HTML 里的 div

状态

状态可以理解为 widget 内拥有的成员变量

无状态 widget

无状态是指该成员变量不可改变,即使用 final 修饰符,为常量,创建无状态组件步骤如下:

  1. 创建一个类继承 StatelessWidget
  2. 实现 build 方法(类比写 HTML + CSS
import 'package:flutter/material.dart';

class StateLessDemoWidget extends StatelessWidget {
  /// 如果定义非final修饰的成员变量,会提示
  /// This class (or a class which this class inherits from) is marked as '@immutable', but one or more of its instance fields are not final: StateLessDemoWidget.listInde
  /// int [listIndex];

  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

有状态 widget

有状态则是指该 widget 内部的成员变量可以不使用final修饰符,并通过setState()方法改变成员变量的值时,引起 widget 的状态改变并重绘(例如文本框绑定变量A,通过改变变量A修改文本框的值,这里的变量A可以理解为可变状态)

有状态 widget 通过实现StatefulWidgetState两个子类实现,步骤如下:

  1. 创建一个Widget类,继承StatefulWidget
  2. 创建一个继承State的类
  3. State类里创建状态(成员变量),和实现build方法(画界面)
import 'package:flutter/material.dart';

/// 创建一个继承[StatefulWidget]的widget类
/// 这个类的效果类似收藏,有个空心的爱心图标
/// 点击一下爱心填充红色,再点击一次就取消填充
class FavoriteWidget extends StatefulWidget {
  @override
  _FavoriteWidgetState createState() => _FavoriteWidgetState();
}

/// [State]类,FavoriteWidget的具体实现
/// 包含一个状态[_isFavorited]
class _FavoriteWidgetState extends State<FavoriteWidget> {
  bool _isFavorited = true;

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        Container(
          padding: EdgeInsets.all(0),
          child: IconButton(
            /// [_isFavorited] 为 true 时使用图标 Icons.star 否则使用 Icons.star_border
            icon: (_isFavorited ? Icon(Icons.star) : Icon(Icons.star_border)),

            color: Colors.red[500],

            /// 当点击时,改变状态
            onPressed: _toggleFavorite,
          ),
        ),
      ],
    );
  }

  /// 改变[_isFavorited]的状态
  void _toggleFavorite() {
    setState(() {
      if (_isFavorited) {
        _isFavorited = false;
      } else {
        _isFavorited = true;
      }
    });
  }
}

widget 管理内部状态的三种方式

widget 自己管理状态

其实和上边的 有状态部件 示例一样的,直接上代码

import 'package:flutter/material.dart';

class TapboxA extends StatefulWidget {
  @override
  _TapboxAState createState() => _TapboxAState();
}

/// [TapboxA]拥有状态[_active],通过[_handleTap]方法管理[_active]
class _TapboxAState extends State<TapboxA> {
  bool _active = false;

  void _handleTap() {
    setState(() {
      _active = !_active;
    });
  }

  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: _handleTap,
      child: Center(
        child: Text(
          _active ? 'Active' : 'Inactive',
        ),
      ),
    );
  }
}

父widget 管理 子widget 状态

这一小节将实现一个和 Vuev-model 一样的功能,父部件管理子部件的步骤如下:

  1. 创建一个无状态部件作为子部件,构造函数中需要接收状态的值和状态改变时的回调函数
  2. 创建一个有状态部件作为父部件,并定义需要管理的状态
  3. 在父部件中创建子部件,并绑定状态和回调事件
import 'package:flutter/material.dart';

/// 父部件管理TapboxB的状态
///
/// 父部件[ParentWidget]定义了[_active]状态,并和[TapboxB]的[active]绑定
/// 当[TapboxB]被点击时,通过[onChanged]方法通知父部件,父部件修改[_active]的值
/// 也就间接修改了[TapboxB]的[active]
///
/// 如果了解过Vue的v-model原理的话比较好理解,其实这个和Vue的v-model一样的

//------------------------ ParentWidget --------------------------------

class ParentWidget extends StatefulWidget {
  @override
  _ParentWidgetState createState() => _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,
      ),
    );
  }
}

//------------------------- TapboxB ----------------------------------

// 注意[TapboxB]是无状态部件,所有成员变量使用 final 修饰

class TapboxB extends StatelessWidget {
  // 必须传递onChanged,用于通知父部件
  TapboxB({Key key, this.active: false, @required this.onChanged})
      : super(key: key);

  final bool active;
  final ValueChanged<bool> onChanged;

  void _handleTap() {
    // 通知父部件修改 active 的值
    onChanged(!active);
  }

  Widget build(BuildContext context) {
    return GestureDetector(
      // 被点击时
      onTap: _handleTap,
      child: Center(
        child: Text(
          // active 改变时修改文本的内容
          active ? 'Active' : 'Inactive',
        ),
      ),
    );
  }
}

混合管理

在这种管理模式下,和父管理子部件的区别是,子部件也需要管理自己的状态,所以子部件也将是有状态部件(区别)。

步骤如下:

  1. 创建一个【有状态部件】作为子部件,构造函数中需要接收状态的值和状态改变时的回调函数
  2. 为子部件定义子部件内部的状态(多的一步)
  3. 创建一个有状态部件作为父部件,并定义需要管理的状态
  4. 在父部件中创建子部件,并绑定状态和回调事件
import 'package:flutter/material.dart';
//---------------------------- ParentWidget ----------------------------

class ParentWidget extends StatefulWidget {
  @override
  _ParentWidgetState createState() => _ParentWidgetState();
}

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

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

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

//----------------------------- TapboxC ------------------------------
class TapboxC extends StatefulWidget {
  TapboxC({Key key, this.active: false, @required this.onChanged})
      : super(key: key);

  final bool active;
  final ValueChanged<bool> onChanged;

  _TapboxCState createState() => _TapboxCState();
}

class _TapboxCState extends State<TapboxC> {
  /// [TapboxC]管理内部的边框是否高亮,通过状态[_highlight]来修改
  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);
  }

  Widget build(BuildContext context) {
    return GestureDetector(
      // onXXX都是事件处理
      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,
        ),
      ),
    );
  }
}

参考

Flutter Stateful and stateless widgets

自定义组件的 v-model