Flutter（十一）：StatefulWidget

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

StatelessWidget 是无状态组件，状态不可变的 widget；

StatefulWidget 是有状态组件，持有的状态可能在 widget 生命周期改变。通俗的讲：如果我们想改变页面中的数据的话这个时候就需要用到 StatefulWidget；

vscode 安装相关的插件，代码补充提示：

1 简单实例

利用安装的插件，使用 statefulW 命令快速生成有状态组件代码块：

import 'package:flutter/material.dart';

import 'res/listData.dart';

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

// 自定义组件
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      // Scaffold 定义导航头部和页面主要内容
      home: Scaffold(
        appBar: AppBar(
          title: Text('flutter 标题'),
        ),
        body: HomePage(),
      ),
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
    );
  }
}

class HomePage extends StatefulWidget { // StatefulWidget 是一个抽象类
  HomePage({Key key}) : super(key: key);

  @override
  _HomePageState createState() => _HomePageState(); // 实现抽象方法 createState 
}

class _HomePageState extends State<HomePage> { // 继承 State 类
  int count = 0;
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Container(
        height: 300,
        width: 300,
        color: Colors.pink,
        child: Column(
          children: <Widget>[
            Chip(label: Text("${this.count}")),
            SizedBox(height: 20),
            RaisedButton(
              child: Text('点击'),
              onPressed: () {
                setState(() {
                  this.count++;
                });
              },
            )
          ],
        ),
      ),
    );
  }
}

2 新增数据 List

import 'package:flutter/material.dart';

import 'res/listData.dart';

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

// 自定义组件
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      // Scaffold 定义导航头部和页面主要内容
      home: Scaffold(
        appBar: AppBar(
          title: Text('flutter 标题'),
        ),
        body: HomePage(),
      ),
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
    );
  }
}

class HomePage extends StatefulWidget {
  // StatefulWidget 是一个抽象类
  HomePage({Key key}) : super(key: key);

  @override
  _HomePageState createState() => _HomePageState(); // 实现抽象方法 createState
}

class _HomePageState extends State<HomePage> {
  // 继承 State 类
  List list = new List();

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Container(
        height: 300,
        width: 300,
        color: Colors.pink,
        child: Column(
          children: <Widget>[
            Column(
              children:
                  this.list.map((e) => Chip(label: Text("${e}"))).toList(),
            ),
            SizedBox(height: 20),
            RaisedButton(
              child: Text('点击'),
              onPressed: () {
                setState(() {
                  this.list.add('点击新增一条数据');
                });
              },
            )
          ],
        ),
      ),
    );
  }
}