Futter部品内部状態管理小結のVueを実現するv-model機能

Futter部品内部状態管理
本文は Futter部品の内部状態管理のまとめは、部品の基礎から部品の状態管理まで、過程で類似のものを実現する。 Vueの v-modelの機能です。
widgetベース
widget（部品）
如き Reactには全てのものがセットされています。 Javaにある凡てのものは対象であり、 Futterで見ることができるのはすべてwidgetです。ボタンやテキストボックスなどです。
Futterの内部はもう私達のためにいくつかの基礎を作ってくれました。例えば：

Text：これはテキスト部品で、テキストを置くためのものです。

Row、 Column：行列構成要素

コンタイナー： HTMLの div

状態
状態はwidget内にあるメンバー変数として理解できます。
無状態widget
無状態とは、メンバー変数が変更できない、すなわち使用することです。 final修飾子は定数であり、無状態コンポーネントを作成するステップは以下の通りである。
クラスの継承を作成します。 Stteless Widget
実現する 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修繕符を通過します。 set State()メソッドがメンバー変数の値を変更した場合、widgetの状態変化を引き起こして絵を描き直す（例えばテキスト枠バインディング変数A、変数Aを変更してテキストボックスの値を変更することで、ここでの変数Aは可変状態として理解できる）
状態のあるwidgetを実現しました。 Stteful Widgetと Stateの二つのサブクラスが実現され、ステップは以下の通りである。

作成します。 Widget類、継承 Stteful Widget

継承を作成します。 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で内部状態を管理する3つの方法
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状態
この小節は一つの和を実現するであろう。 Vueの v-modelのような機能で、親部品管理子のステップは以下の通りです。

は、サブ構成要素として無状態構成要素を作成し、構成関数において受信状態の値と状態変化が必要な場合のコールバック関数

を作成する。

は、親部品として状態構成要素を作成し、管理が必要な状態を定義する

。

は、親部品にサブコンポーネントを作成し、結合状態とコールバックイベントを作成する。

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

締め括りをつける
以上は小编が绍介したFutter部品の内部状态管理小结之がVueのv-model机能を実现しました。皆さんに助けてほしいです。もし何かご质问がありましたら、メッセージをください。小编はすぐにご返事します。ここでも私たちのサイトを応援してくれてありがとうございます。
本文があなたのためになると思ったら、転載を歓迎します。出所を明記してください。ありがとうございます。