从零开始写第一个Flutter app（三）——有状态的部件StatefulWidget

目录

• 从零开始写第一个Flutter app（一）——Hello World
• 从零开始写第一个Flutter app（二）——引用第三方包
• 从零开始写第一个Flutter app（三）——有状态的部件StatefulWidget
• 从零开始写第一个Flutter app（四）——无限滑动的ListView
• 从零开始写第一个Flutter app（五）——ListView添加图标
• 从零开始写第一个Flutter app（六）——添加点击事件交互
• 从零开始写第一个Flutter app（七）——弹出toast
• 从零开始写第一个Flutter app（八）——修改主题颜色
• 从零开始写第一个Flutter app（九）——route跳转新页面
• 从零开始写第一个Flutter app（十）——最终代码

StatefulWidget简介

StatelessWidget是不变的，他的所有属性的值都是不变的。

而StatefulWidget表示的是有状态的部件，它里面的属性是可变的。

要实现一个有状态的控件其实很简单，只需两两个类

1. StatefulDidget：继承StatefulDidget类，然后实现createState()方法，返回一个State类的实例
2. State：由StatefulDidget返回，继承State类，实现build()方法返回具体的控件，控件的状态是可变的。

实现

接下来我们把上节课的例子改成StatelessWidget实现

这里实现两个类：

• RandomWords继承StatelessWidget
• RandomWordsState继承State

首先先看下RandomWords的代码，代码很简单，继承RandomWords类，然后实现createState()方法，返回一个State实例，也就是我们下面要实现的RandomWordsState类

class RandomWords extends StatefulWidget {
  @override
  RandomWordsState createState() => RandomWordsState();
}

接下来看下RandomWordsState的具体实现，代码也是很简单，继承了State类，然后实现build()方法，返回一个Text控件，控件的内容是由WordPair生成的随机英文单词对

class RandomWordsState extends State<RandomWords> {
  @override
  Widget build(BuildContext context) {
    final WordPair wordPair = WordPair.random();
    return Text(wordPair.asPascalCase);
  }
}

最后看下MyApp修改后的内容，其实改动的地方就是把原来body中的Text改成我们自定义的有状态控件RandomWords

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final WordPair wordPair = WordPair.random();
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcome to Flutter'),
        ),
        body: Center(
          //child: Text(wordPair.asPascalCase), // 原来的这句话去掉 
          child: RandomWords(),                 // 替换成这句话
        ),
      ),
    );
  }
}

运行结果和上一节是一样的

本节最终的lib/main.dart文件内容如下

import 'package:flutter/material.dart';
import 'package:english_words/english_words.dart';

void main() => runApp(MyApp());

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

// #docregion RandomWordsState, RWS-class-only
class RandomWordsState extends State<RandomWords> {
  // #enddocregion RWS-class-only
  @override
  Widget build(BuildContext context) {
    final wordPair = WordPair.random();
    return Text(wordPair.asPascalCase);
  }
// #docregion RWS-class-only
}
// #enddocregion RandomWordsState, RWS-class-only

// #docregion RandomWords
class RandomWords extends StatefulWidget {
  @override
  RandomWordsState createState() => new RandomWordsState();
}