Flutter – 状态管理

在像Flutter这样的响应式框架中，您可以将 UI 视为函数的返回值。这里的函数被认为是你的状态。所以简单来说，用户在应用程序中看到的是一种状态，当他点击按钮时，他会看到另一个 UI 屏幕。所以现在那个屏幕是一个状态。所以一个应用程序是由许多状态组成的，即 UI。它们的状态由导航和路线管理。

您的许多数据都可以独立于称为本地状态的单个小部件中。需要在整个小部件树中共享的状态称为全局状态。

应用程序的状态是应用程序运行时内存中存在的一切。所有的资产、动画状态、UI 和纹理的信息，所有这些数据都包含在这些中。该框架为用户管理大部分状态。我们自己管理的状态可以分为Ephemeral状态和App状态。

临时状态：

临时状态是您可以将其整齐地包含在单个小部件中的状态。不需要序列化它，它不会以复杂的方式改变。简单来说，这里不需要使用状态管理。只需在此处使用StatefulWidget 。

Dart

class MainPage extends StatefulWidget {
  @override
  _MainPage createState() => _MainPage();
}
  
class _MainPage extends State {
  int _index = 0;
  
  @override
  Widget build(BuildContext context) {
    return BottomNavigationBar(
      currentIndex: _index,
      onTap: (newIndex) {
        setState(() {
          _index = newIndex;
        });
      },
      // ... items ...
    );
  }
}

在上面的代码中_index是一个短暂的状态。它保存在_Mainpage类的_index字段中。该变量仅在_MainPage小部件内更改，即使用户重新启动应用程序，您也不介意_index重置为零。

创建后，应用程序的其他 UI 将无法访问此小部件。我们一般在应用很小的时候或者应用中的当前页面或者当前进度页面的时候使用这个状态。

应用状态：

用户想要在应用程序的许多部分共享的状态称为App state或Shared state 。我们在复杂或大型应用程序中使用此状态。

例如：-

• 用户偏好
• 登录信息
• 电子商务应用程序中的购物车
• 应用程序通知

没有强制使用这些状态。这两种状态都是有效的，取决于用户想要使用的状态。如果应用程序的小部件将在单个 UI 中使用，则用户可以使用 Ephemeral 状态，而用户可以使用 App 状态。

有很多方法可以进行状态管理：-

• 提供者
• 设置状态
• InheritedWidget 和 InheritedModel
• Redux 和 Fish-Redux
• 块/接收
• 得到它
• 移动版
• 粘合剂
• 获取X
• 河港

让我们考虑一个简单的应用示例：-

1. 当应用程序打开时，用户会看到 3 个按钮。
2. 每个按钮将用户带到不同的屏幕。
3. 并且在转到另一个屏幕后，用户还可以返回到前一个屏幕。

导航和路由：

在任何应用程序中，从一个屏幕到另一个屏幕的导航都是必不可少的。处理导航的方式称为路由。 Flutter提供了一个基本的路由类Flutter和两个方法——Navigator.push 和 Navigator.pop。

材质页面路由

MaterialPageRoute 是一个小部件，用于通过使用特定于平台的动画替换整个屏幕来呈现其 UI。以下是此小部件的语法：-

MaterialPageRoute(builder: (context)=>Widget())

让我们创建一个新的应用程序来更好地理解这个概念。

在 Android Studio 中创建一个新的Flutter应用 test_app，或者您可以根据自己的选择命名应用。

您可见的第一个屏幕是主屏幕。dart

Dart

import 'package:flutter/material.dart';
import 'mainscreen.dart';
  
void main() {
  runApp(MyApp());
}
  
class MyApp extends StatelessWidget {
    
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: MainScreen(),
    );
  }
}

这里我们创建了一个 StatlessWidget，因为我们不想制作动态应用程序。如果你想做一个动态的应用，那就使用StatefullWidget。我们添加了主题，使应用程序的主要颜色为蓝色。蓝色是flutter的默认颜色，但我们这里会给出绿色..你可以给出任何你想要的颜色。我们将主页设置为 MainScreen()。这意味着用户可见的第一个屏幕将打开主屏幕的 UI。

这是主屏幕的代码。dart

Dart

import 'package:flutter/material.dart';
import 'secondscreen.dart';
  
class MainScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Geeksforgeeks SCREEN 1"),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('SCREEN 2'),
          onPressed: (){
            Navigator.push(context,
            MaterialPageRoute(builder: (context)=>SecondScreen()));
          },
        ),
      ),
    );
  }
}

这段代码创建了我们应用程序的第 1 个屏幕，我们将其命名为 Geeksforgeeks SCREEN 1。在中间，我们添加了一个 RaisedButton，单击该按钮会将我们带到 SCREEN 2。“MaterialPageRoute(builder: (context)=”行) >SecondScreen())”是主线，它告诉我们的应用程序在按下按钮时移动到屏幕 2。现在创建一个名为 secondscreen 的新dart文件。dart。创建此文件将帮助我们将其导入主屏幕。dart。

这是第二屏的代码。dart

Dart

import 'package:flutter/material.dart';
  
class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Geeksforgeeks SCREEN 2"),
  
      ),
    );
  }
}

这是一个简单的文件。在这个文件中，我们只添加了标题栏，告诉你现在你在第二个屏幕上。 flutter本身添加了后退图标按钮。不需要编码。运行此应用程序并按下中心的按钮。它将带您进入屏幕 2。

输出：