Flutter: Stateful 挂件 vs Stateless 挂件

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…