前端学习-flutter学习-004-状态管理

《Flutter实战·第二版》

• Widget管理自身状态：自己继承StatefulWidget，自己内部设置变量（State）并进行管理
• 父Widget管理子Widget的状态：parent继承自StatefulWidget，设置变量及函数，传递给child；child继承自StatelessWidget
• 混合状态管理：既接受来自parent的变量和函数，自己继承自StatefulWidget，内部也管理参数（状态）
• 全局状态管理：需要一些跨组件（包括跨路由）的状态需要同步时（如设置应用的语言）

import 'package:flutter/material.dart';
import 'dart:ui';// import 'package:flutter/cupertino.dart';// void main() {//   runApp(const MyApp());// }void main() => runApp(const MyApp());// void main() => runApp(CupertinoApp(home: CupertinoTestRoute()));class MyApp extends StatelessWidget {const MyApp({super.key});// This widget is the root of your application.@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Flutter Demo',theme: ThemeData(colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),useMaterial3: true,),home:  HomePage(),);}
}class HomePage extends StatelessWidget {const HomePage({Key? key}) : super(key: key);@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text("Widget管理自身状态"),backgroundColor: Colors.green,),body: Center(child: Column(children: [TapboxA(),ParentWidget(),ParentWidgetC(),],),),);// return CounterWidget();}
}// TapboxA 管理自身状态.
//------------------------- 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;});}Widget build(BuildContext context) {return GestureDetector(onTap: _handleTap,child: Center(child: Container(child: Center(child: Text(_active ? 'Widget管理自身状态Active' : 'Widget管理自身状态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],),),),);}
}// ParentWidget 为 TapboxB 管理状态.
//------------------------ ParentWidget --------------------------------class ParentWidget extends StatefulWidget {@override_ParentWidgetState createState() => _ParentWidgetState();
}class _ParentWidgetState extends State<ParentWidget> {bool _active = false;void _handleTapboxChanged(bool newValue) {setState(() {_active = newValue;});}@overrideWidget build(BuildContext context) {return Container(child: TapboxB(active: _active,onChanged: _handleTapboxChanged,),);}
}//------------------------- TapboxB ----------------------------------class TapboxB extends StatelessWidget {TapboxB({Key? key, this.active = false, required this.onChanged}): super(key: key);final bool active;final ValueChanged<bool> onChanged;void _handleTap() {onChanged(!active);}Widget build(BuildContext context) {return GestureDetector(onTap: _handleTap,child: Container(child: Center(child: Text(active ? '父Widget管理子Widget的状态Active' : '父Widget管理子Widget的状态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],),),);}
}// 混合状态管理
//---------------------------- ParentWidget ----------------------------class ParentWidgetC extends StatefulWidget {@override_ParentWidgetCState createState() => _ParentWidgetCState();
}class _ParentWidgetCState extends State<ParentWidgetC> {bool _active = false;void _handleTapboxChanged(bool newValue) {setState(() {_active = newValue;});}@overrideWidget 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;@override_TapboxCState createState() => _TapboxCState();
}class _TapboxCState extends State<TapboxC> {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);}@overrideWidget build(BuildContext context) {// 在按下时添加绿色边框，当抬起时，取消高亮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: 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,width: 10.0,): null,),),);}
}