Flutter: Stateful 挂件 vs Stateless 挂件

语言: CN / TW / HK
时间 2022-10-10 00:15:31

Flutter 一切皆挂件。如果你想开发一个应用，首先，你得知道你需要使用哪种挂件。每个挂件都有它的状态。

状态是什么？

状态就是在构建小挂件时可以同时读取信息，并且可能在运行时更改信息。简而言之，我们可以说 State 定义了 Widget 的当前属性。

继承 Stateful 挂件的类是不可变的，但是 State 是可变的。

不可变的类 意味着一旦对象被创建，我们不可以改变它的内容。可变的类 是指一旦它被创建，我们还是可以更改它内部的状态。

stateful_stateless.png

应用 Stateful 挂件的步骤

  1. 通过继承 StatefulWidget 去创建一个类，然后在 createState() 方法中返回状态
  2. 创建 State 类挂件可能在运行时候更改它的值
  3. 在 State 类中，应用 build() 方法
  4. 调用 setState() 方法。 setState() 方法实际上是重绘挂件。

代码示例

stateful_widgets.png

应用 Stateless 挂件的步骤

  1. 通过继承 StatelessWidget 去创建一个类
  2. 为挂件创建一个 build() 方法，在个关键在运行时不更改其内容
  3. build() 方法中返回挂件

代码示例

stateless_widgets.png

完整的代码和输出

``` import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: Home(), ); } }

class Home extends StatefulWidget { @override _HomeState createState() => _HomeState(); }

class _HomeState extends State { String name = ""; @override Widget build(BuildContext context) { return SafeArea( child: Scaffold( appBar: AppBar( title: Text("Stateful Widget Vs. Stateless Widget"), centerTitle: true, ), body: Center( child: Container( width: 300, child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ TextField( decoration: InputDecoration( border: OutlineInputBorder(), labelText: 'Enter your name', ), onSubmitted: (String str) { setState(() { name = str; }); }, ), Text("Hello $name!"), Greet(), ], ), ), ), ), ); } }

class Greet extends StatelessWidget { @override Widget build(BuildContext context) { return RaisedButton( child: Text("Nice to meet you"), ); } } ```

result_stateful_stateless.png

本文是译文，采用意译的方式。原文链接 http://levelup.gitconnected.com/flutter-stateful-widget-vs-stateless-widget-c7baf0a3bbc1

「」
「」