Shulou(Shulou.com)06/01 Report--

This article mainly shows you "what are the methods of Flutter component state management", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "what are the methods of Flutter component state management" this article.

Preface

I talked about the Flutter layout earlier, and the layout is only static. In Flutter, components are divided into StatelesslWidget and StatefulWidget.

StatelesslWidget

There is no state, it is immutable. Such as icons, text, buttons, etc.

StatefulWidget

For stateful components, the page data is dynamic or may change with user actions, such as multiple checkboxes, text input boxes, and so on.

Stateful component

The point is, how do you use to implement a stateful component?

Stateful components generally consist of two classes, a StatefulWidget subclass and a State subclass.

The State class contains the build () method of the component and is responsible for maintaining the component state.

When the state of this component changes, you can call the setState () method to refresh the page

State management

Who is responsible for state management? Is it the component itself, or its parent class, both or other objects? The answer is either. In other words, there are three ways to achieve state management:

1. The component manages its own state

two。 The parent component management state of the component

3. Mashup management

So how do you decide which way to do state management? Generally speaking, there are the following principles:

1. If it is user data, such as whether the multi-check box is selected, it is generally up to the second method to choose the second method.

two。 If the dynamic effect, such as zooming in or out, is usually used in the first method.

PS: if you are really confused, directly choose the second method, using the parent class to manage the state.

Give an example

The component manages its own state

The code is as follows: the State subclass _ TapboxAState maintains the state for TapboxA, defines a _ active variable internally to determine whether the current state is active, and defines a _ handleTap () callback function to handle the logic after the user clicks, and calls the setState () life cycle method to refresh the page.

Import 'package:flutter/material.dart';// TapboxA manages its own status void main () = > runApp (const MyApp ()); / /-TapboxA-- class TapboxA extends StatefulWidget {const TapboxA ({Key? Key}): super (key: key); @ override _ TapboxAState createState () = > _ TapboxAState ();} class _ TapboxAState extends State {bool _ active = false; void _ handleTap () {setState (() {_ active =! _ 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), width: 200.0, height: 200.0, decoration: BoxDecoration (color: _ active? Colors.lightGreen: Colors.grey,),);}} / /-MyApp-- class MyApp extends StatelessWidget {const MyApp ({Key? Key}): super (key: key); @ override Widget build (BuildContext context) {return MaterialApp (title: 'Flutter Demo', home: Scaffold (appBar: AppBar (title: const Text (' Flutter Demo'),), body: const Center (child: TapboxA (),);}}

Parent component management state

More often, we need the parent component to decide when the child component will update the state, and the child component only needs to display reasonably according to the parameters passed by the parent component. In this case, the child component does not need to maintain state, so the child component is a StatelessWidget, and the parent component ParentWidget is the StatefulWidget. The code is as follows:

The parent component maintains a _ active variable to mark whether it is in the active state, and implements the callback function _ handleTapboxChanged to reverse the active state for calls by child components. The child component TapboxB is a stateless component that only needs to notify the parent component when it is clicked to manage the state.

Import 'package:flutter/material.dart';void main () = > runApp (const MyApp ()); class ParentWidget extends StatefulWidget {const ParentWidget ({Key? Key}: super (key: key); @ override _ ParentWidgetState createState () = > _ ParentWidgetState ();} class _ ParentWidgetState extends State {bool _ active = false; void _ handleTapboxChanged (bool newValue) {setState (() {_ active = newValue;});} @ override Widget build (BuildContext context) {return SizedBox (child: TapboxB (active: _ active, onChanged: _ handleTapboxChanged,),) }} / /-TapboxB-- class TapboxB extends StatelessWidget {const TapboxB ({Key? Key, this.active = false, required this.onChanged,}): super (key: key); final bool active; final ValueChanged 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), width: 200.0, height: 200.0, decoration: BoxDecoration (color: active? Colors.lightGreen: Colors.grey,),);}} / /-MyApp-- class MyApp extends StatelessWidget {const MyApp ({Key? Key}): super (key: key); @ override Widget build (BuildContext context) {return MaterialApp (title: 'Flutter Demo', home: Scaffold (appBar: AppBar (title: const Text (' Flutter Demo'),), body: const Center (/ / child: TapboxA (), child: ParentWidget (),);}}

Mashup management

Mashup management state is because in some cases we need the parent component to manage one part of the state and the child component to manage another part of the state independently. In this case, we add a dynamic effect according to the above example. When the button is pressed, the highlighted state is displayed (as mentioned earlier, the state such as dynamic effect is generally managed by the component itself), and the highlight is removed when lifted.

The code is as follows: ParentWidget is responsible for maintaining the state of _ active to mark whether it is activated, and the subcomponent TapboxC is responsible for maintaining the state of _ highlight to control whether it is highlighted.

Import 'package:flutter/material.dart';void main () = > runApp (const MyApp ()); class ParentWidget extends StatefulWidget {const ParentWidget ({Key? Key}: super (key: key); @ override _ ParentWidgetState createState () = > _ ParentWidgetState ();} class _ ParentWidgetState extends State {bool _ active = false; void _ handleTapboxChanged (bool newValue) {setState (() {_ active = newValue;});} @ override Widget build (BuildContext context) {return SizedBox (child: TapboxC (active: _ active, onChanged: _ handleTapboxChanged,),) }} /-- TapboxC-- class TapboxC extends StatefulWidget {const TapboxC ({Key? Key, this.active = false, required this.onChanged,}): super (key: key); final bool active; final ValueChanged onChanged; @ override _ TapboxCState createState () = > _ TapboxCState ();} class _ TapboxCState extends State {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) } @ override Widget build (BuildContext context) {return GestureDetector (onTapDown: _ handleTapDown, / / Handle the tap events in the order that onTapUp: _ handleTapUp, / / they occur: down, up, tap, cancel onTap: _ handleTap, onTapCancel: _ handleTapCancel, child: Container (child: Center (child: Text (widget.active?) 'Active':' Inactive', style: const TextStyle (fontSize: 32. 0, color: Colors.white), width: 200.0, height: 200.0, decoration: BoxDecoration (color: _ highlight?Colors.lightGreen: widget.active? Colors.lightGreen: Colors.grey,),);}} / /-MyApp-- class MyApp extends StatelessWidget {const MyApp ({Key? Key}): super (key: key); @ override Widget build (BuildContext context) {return MaterialApp (title: 'Flutter Demo', home: Scaffold (appBar: AppBar (title: const Text (' Flutter Demo'),), body: const Center (/ / child: TapboxA (), child: ParentWidget (),);}}

Of course, you can also leave the highlighted state to the parent component to manage, but when you finish developing this component and give it to colleagues to use, others may only focus on the business logic processing, not the dynamic processing.

Other interactive components

There are a lot of interactions built into Flutter, and even IOS-style components that can be used. If necessary, you can customize the use of the component as in the example above.

These are all the contents of the article "what are the ways to manage the state of Flutter components?" Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.