Flutter: Stateful 挂件 vs Stateless 挂件

Jimmy_is_jimmy

发布于 2022-10-05 16:36:21

4360

发布于 2022-10-05 16:36:21

文章被收录于专栏：call_me_R

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

状态是什么？

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

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

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

应用 Stateful 挂件的步骤

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

代码示例

应用 Stateless 挂件的步骤

通过继承 StatelessWidget 去创建一个类
为挂件创建一个 build() 方法，在个关键在运行时不更改其内容
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"),
    );
  }
}