Flutter: Stateful 挂件 vs Stateless 挂件

Posted 2022-10-04

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

状态是什么？

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

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

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

应用 Stateful 挂件的步骤

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

代码示例

应用 Stateless 挂件的步骤

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

代码示例

完整的代码和输出

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<Home>
  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: <Widget>[
              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"),
    );
  

本文是译文，采用意译的方式。原文链接 levelup.gitconnected.com/flutter-sta…