持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第14天，点击查看活动详情

Flutter中的StatelessWidget和StatefulWidget

在Flutter中，所有的对象都是组件（widget），widget是一个显示元素的配置，而StatelessWidget和StatefulWidget 是Flutter中必不可少的两个组件。

概念

• 组件：Flutter中的组件（widget）可以大致理解为Android中的View，但和View不同，组件（widget）并不是真正的控件，它更像一组配置文件。真正显示在页面上的其实是Element。StatelessWidget和StatefulWidget 是Flutter的基础组件，自定义组件都是继承这两个组件其中之一。
• StatelessWidget：无状态组件，静态的页面，不需要改变的页面，类似于前端中的静态HTML。
• StatefulWidget：有状态的组件，界面可以动态更新，更新数据之后可以更新界面。

无状态组件

import 'package:flutter/material.dart';

void main() => runApp(const StatelessApp());

class StatelessApp extends StatelessWidget {
  const StatelessApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Test',
      home: Scaffold(
        appBar:
            AppBar(title: const Text('AppBar'), backgroundColor: Colors.brown),
        body: const Text('这是body文字'),
      ),
    );
  }
}

上面的代码非常简单，整体的步骤如下：

1. 新建一个StatelessApp类继承StatelessWidget
2. 实现StatelessWidget组件的build方法
3. 在build方法中创建一个组件，这个组件就是界面上显示的内容

title 对应着网页端的标题，在Android上没有对应的位置； appBar 是顶部的标题栏，可以通过backgroundColor属性改变背景；body中就是最终的界面内容。

有状态组件

import 'package:flutter/material.dart';

void main() => runApp(const StatefulApp());

class StatefulApp extends StatefulWidget {
  const StatefulApp({super.key});

  @override
  State<StatefulWidget> createState() {
    return StatefulState();
  }
}

class StatefulState extends State<StatefulApp> {
  int index = 0;


  @override
  void initState() {
    super.initState();
    index = 1;
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
        home: Scaffold(
            appBar: AppBar(
                title: const Text('AppBar'), backgroundColor: Colors.brown),
            // body: Text('$index',
            //     style: const TextStyle(fontSize: 50, color: Colors.black)),
            body: Row(
              children: [
                Text(
                  '$index',
                  style: TextStyle(color: Colors.black, fontSize: 50),
                ),
                MaterialButton(
                  child: Text('点击',
                      style: TextStyle(color: Colors.black, fontSize: 40)),
                  textColor: Colors.black,
                  onPressed: () {
                    setState((){
                      ++index;
                    });
                  },
                )
              ],
            )));
  }
}

界面上有一个数字和一个按钮，点击按钮时，改变文字。
同样简单的有状态组件步骤如下：

1. 创建StatefulApp继承StatefulWidget
2. 实现createState方法
3. 在createState方法中创建StatefulState来让代码看起来更清晰
4. 在StatefulState类中绘制界面，使用$符号显示数据，使用setState()方法更新界面组件

如果要在body中创建多个元素，就需要将子组件写在children的数组中。