Flutter: Stateful 挂件 vs Stateless 挂件

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<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"),
    );
  }
}

result_stateful_stateless.png

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