HI技术分享-Flutter学习教程

在Flutter中自定义组件其实就是一个类，这个类需要继承StatelessWidget/StatefulWidget：

StatelessWidget：是无状态组件，状态不可变的widget，例如：Icon、IconButton、Text等等
StatefulWidget：是有状态组件，持有的状态可能在widget生命周期改变，例如：Checkbox, Radio, Slider, InkWell, Form, and TextField 都是 stateful widgets, 它们都是 StatefulWidget的子类。

通俗的讲我们要改变组件页面上面的数据的话就继承StatefulWidget，如果页面上面的数据是永远不变的话就继承StatelessWidget。

下面我就举例说明：

1、StatelessWidget

如果我们编写一个简单的Hello，就可以继承StatelessWidget类，代码如下：

import 'package:flutter/material.dart';

void main() {
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Welcome to Flutter',
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('Welcome to Flutter'),
        ),
        body: new Center(
          child: new Text('Hello World'),
        ),
      ),
    );
  }
}

2、StatefulWidget

StatefulWidget 是可变状态的widget。使用setState方法管理StatefulWidget的状态的改变。调用setState告诉Flutter框架，某个状态发生了变化，Flutter会重新运行build方法，以便应用程序可以应用最新状态。

创建项目后默认的计数器就是使用的StatefulWidget类，代码如下：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '应用',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter第一个应用'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              '点击次数:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: '新增',
        child: Icon(Icons.add),
      ),
    );
  }
}

在编写以一个自定义的组件的时候就需要考虑好需要选择怎么样的继承类，如果内部需要更新一些值就需要选择有状态的StatefulWidget、如果只是一些展示的内容就选择无状态的StatelessWidget类继承。

2.1、StatelessWidget 和 StatefulWidget区别

1、StatelessWidget

2、StatefulWidget