Flutter无状态和有状态组件
介绍
Flutter 是关于小组件的集合。如果您熟悉 React Native、Android 或 Ionic 等其他编程语言，那么您必须知道这个等式。
Flutter Widget = React Native 组件 = Ionic 组件/控制器 = Android Activities。简而言之，您所做的一切都是一个小组件。从字面上看，Buttons、Tabs、ListView、Drawer、GridView 等，都是小组件。
一般来说，
-
无状态小组件是指您希望制作的 UI 在您更新绑定到它的任何值时都不需要动态更改的小部件。例如，如果您想制作一个标题不需要动态更改的按钮，那么您可以为按钮创建一个单独的小部件作为无状态组件。
- 有状态小部件与无状态小部件正好相反。这意味着当您想要根据用户与它的交互方式来动态更改某些内容时，您可以使用 Stateful 组件。例如，如果您想在单击按钮时更改应用程序的背景颜色，则可以在这种情况下使用 Stateful 组件。
一个有状态组件可以包含另一个无状态组件，反之亦然。
例子
这个想法是创建一个简单的应用程序，当我们点击按钮时，其中的背景颜色将被更改（切换）。
步骤
- 创建一个新的 Flutter 应用程序并删除 main.dart 文件中的所有内容。
- 导入Material package.。Material package 包含 Google Material 设计概念的所有现成组件。
import 'package:flutter/material.dart'; - 定义应用程序的main方法，它是应用程序的入口点。
void main() => runApp(MyApp()); - 定义无状态组件包括一个不会动态更改的 UI。
class MyApp extends StatelessWidget { @override // StatelessWidget must override build() Widget build(BuildContext context) { return MaterialApp( title: 'Stateless & Stateful', theme: ThemeData( primarySwatch: Colors.blue, ), home: Scaffold( appBar: AppBar( title: Text('Stateless & Stateful'), ), body: BackgroundPage(), // including stateful widget in stateless widget ), ); } - 定义有状态组件包括一个会动态更改的 UI。
class BackgroundPage extends StatefulWidget { // stateful widget @override _BackgroundPageState createState() => _BackgroundPageState(); } class _BackgroundPageState extends State < BackgroundPage > { // State<BackgroundPage> created class with state which extends state of type BackgroundPage Color backgroundColor = Colors.green; @override Widget build(BuildContext context) { return Container(decoration: BoxDecoration(color: backgroundColor), height: MediaQuery.of(context).size.height, width: MediaQuery.of(context).size.width, child: Column(mainAxisAlignment: MainAxisAlignment.center, children: < Widget > [ RaisedButton(child: Text('Change Color'), onPressed: () { setState(() { // any state change must be included between setState() otherwise state value changed but not reflect in UI. each time setState() called build() method called again but only changes the UI which would be required for state value changes. like in our example it regenerates only background color nothing else. if (backgroundColor == Colors.green) backgroundColor = Colors.red; else backgroundColor = Colors.green; }); }, ], ), ); } - 在模拟器或真实设备中运行应用程序。
- 运行应用程序后，您可以看到单击“更改颜色”按钮后，背景从红色切换为绿色，反之亦然。
- 注意
- 建议在代码中保持尽可能多的模块化，以便轻松管理。
- 如果不需要，请不要使用有状态组件。您可以将不需要为有状态的部分分开，并将其定义为无状态组件，以便提高应用程序性能。
结论
Flutter 是组件的构建块，了解无状态和有状态组件使开发人员成为这方面的专家。
常见问题FAQ
- 程序仅供学习研究，请勿用于非法用途，不得违反国家法律，否则后果自负，一切法律责任与本站无关。
- 请仔细阅读以上条款再购买，拍下即代表同意条款并遵守约定，谢谢大家支持理解！
