Flutter部件內部狀態管理小結（實現Vue的v-model）

時間 2019-11-06

標籤 flutter 部件內部狀態管理小結實現 vue model 简体版

原文原文鏈接

Table of Contents generated with DocTochtml

Flutter部件內部狀態管理

Flutter部件內部狀態管理

本文是 Flutter部件內部狀態管理的小結，從部件的基礎開始，到部件的狀態管理，而且在過程當中實現一個相似 Vue 的 v-model 的功能。vue

widget 基礎

widget（部件）

如 React 裏萬物皆組件， Java 裏萬物皆對象，Flutter裏，能看到的一切都是 widget（部件），如按鈕、文本框等等。git

Flutter內部已經爲咱們作了一些基礎的 widget ，例如：github

Text: 這個就是一個文本部件，裏面用於放置文本
Row, Column: 行列布局部件
Container: 能夠理解爲 HTML 裏的 div

狀態

狀態能夠理解爲 widget 內擁有的成員變量less

無狀態 widget

無狀態是指該成員變量不可改變，即便用 final 修飾符，爲常量，建立無狀態組件步驟以下：ide

建立一個類繼承 StatelessWidget
實現 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 經過實現StatefulWidget和State兩個子類實現，步驟以下：佈局

建立一個Widget類，繼承StatefulWidget
建立一個繼承State的類
在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 本身管理狀態

其實和上邊的有狀態部件示例同樣的，直接上代碼ui

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 狀態

這一小節將實現一個和 Vue 的 v-model 同樣的功能，父部件管理子部件的步驟以下：this

建立一個無狀態部件做爲子部件，構造函數中須要接收狀態的值和狀態改變時的回調函數
建立一個有狀態部件做爲父部件，並定義須要管理的狀態
在父部件中建立子部件，並綁定狀態和回調事件

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',
        ),
      ),
    );
  }
}
複製代碼

混合管理

在這種管理模式下，和父管理子部件的區別是，子部件也須要管理本身的狀態，因此子部件也將是有狀態部件（區別）。

步驟以下：

建立一個【有狀態部件】做爲子部件，構造函數中須要接收狀態的值和狀態改變時的回調函數
爲子部件定義子部件內部的狀態（多的一步）
建立一個有狀態部件做爲父部件，並定義須要管理的狀態
在父部件中建立子部件，並綁定狀態和回調事件

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

複製代碼