从零开始写第一个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表示的是有状态的部件,它里面的属性是可变的。
要实现一个有状态的控件其实很简单,只需两两个类
- StatefulDidget:继承StatefulDidget类,然后实现createState()方法,返回一个State类的实例
- 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();
}