项目案例 -- StatelessWidget
- 案例代码如下：
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
main() => runApp(SFMyApp());
class SFMyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: SFHomePage(),
);
}
}
class SFHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("商品列表"),
),
body: SFContentBody(),
);
}
}
class SFContentBody extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ListView(
children: [
SFProductItem("Apple1","MacBook1","https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fdl.bbs.9game.cn%2Fattachments%2Fforum%2F201507%2F29%2F154250no2g2zqiuiqvaiku.jpg&refer=http%3A%2F%2Fdl.bbs.9game.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1637072364&t=07974f838e1b49ecdecaba22f4af4fa2"),
SFProductItem("Apple2","MacBook2","https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fdl.bbs.9game.cn%2Fattachments%2Fforum%2F201507%2F29%2F154250no2g2zqiuiqvaiku.jpg&refer=http%3A%2F%2Fdl.bbs.9game.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1637072364&t=07974f838e1b49ecdecaba22f4af4fa2"),
SFProductItem("Apple3","MacBook3","https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fdl.bbs.9game.cn%2Fattachments%2Fforum%2F201507%2F29%2F154250no2g2zqiuiqvaiku.jpg&refer=http%3A%2F%2Fdl.bbs.9game.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1637072364&t=07974f838e1b49ecdecaba22f4af4fa2"),
],
);
}
}
class SFProductItem extends StatelessWidget {
final String title;
final String desc;
final String imageUrl;
final titleStyle = TextStyle(fontSize: 25,color: Colors.orange);
final descStyle = TextStyle(fontSize: 20,color: Colors.green);
//自定义构造函数
SFProductItem(this.title,this.desc,this.imageUrl);
@override
Widget build(BuildContext context) {
return Container(
padding: EdgeInsets.all(8), //设置内边距
decoration: BoxDecoration(
border: Border.all(
width: 5, //设置边框的宽度
color: Colors.purple //设置边框的额颜色
)
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(title,style: titleStyle),
SizedBox(height: 8),//设置间距
Text(desc,style: descStyle),
SizedBox(height: 8),
Image.network(imageUrl)
],
),
);
}
}
- 效果如下所示：
image.png
- 给widget添加Container的快捷键
Alt + Enter - widget之间
设置间距使用SizedBox(height: 8)
项目案例 -- StatefulWidget
-
StatefulWidget最大的特点是：StatefulWidget通过创建状态类_SFHomeContentState，来管理自己的状态数据； - 案例代码如下：
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
void main() => runApp(SFMyApp());
class SFMyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: SFHomePage()
);
}
}
class SFHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("商品列表")
),
body: SFHomeContent("上面是一个简单的计数器")
);
}
}
class SFHomeContent extends StatefulWidget {
final String message;
SFHomeContent(this.message);
@override
State<StatefulWidget> createState() {
return _SFHomeContentState();
}
}
//
class _SFHomeContentState extends State<SFHomeContent>{
var _counter = 0;
@override
Widget build(BuildContext context) {
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
_getButtons(),
Text("当前计数: $_counter",style: TextStyle(fontSize: 20)),
Text("${widget.message}",style: TextStyle(fontSize: 18))
],
),
);
}
Widget _getButtons(){
return Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
RaisedButton(
child: Text("+",style: TextStyle(fontSize: 20,color: Colors.white)),
color: Colors.pink,
onPressed: (){
print("点击+");
setState(() {
_counter++;
});
},
),
RaisedButton(
child: Text("-",style: TextStyle(fontSize: 20,color: Colors.white)),
color: Colors.purple,
onPressed: (){
print("点击-");
setState(() {
_counter--;
});
},
)
],
);
}
}
-
class _SFHomeContentState extends State<SFHomeContent>，Widget _getButtons()类名与方法名之前加下划线表明属于私有的； -
class _SFHomeContentState extends State<SFHomeContent>：_SFHomeContentState状态用来管理SFHomeContent这个widget的状态数据的，即_SFHomeContentState会绑定SFHomeContent，_SFHomeContentState中能通过widget属性访问SFHomeContent中的内容； - 代码运行效果：
image.png
StatefulWidget生命周期
- 所谓生命周期是指：目标组件从创建到销毁的整个过程，监听组件的生命周期以便在不同的时期执行不同的逻辑；
- Flutter组件的生命周期：
-
StatelessWidget可以由父widget直接传入值，调用build方法来创建，整个过程非常简单，其生命周期，主要关注构造函数与build方法； -
StatefulWidget需要通过State来管理其状态数据，并且监听状态的改变重新build整个widget；
-
-
StatefulWidget生命周期的过程如下图所示：
Snip20211018_14.png - 1.执行
StatefulWidget的构造函数； - 2.执行
StatefulWidget的createState方法，创建一个维护StatefulWidget的State对象； - 3.执行
State的构造方法； - 4.执行
initState方法，我们通常在此方法中执行一些数据初始化操作，或者发送网络请求； - 5.
didChangeDependencies方法，在下面两种情况下会调用：- 调用
initState时会调用； - 从其他对象中依赖一些数据发生改变时，比如InheritedWidget；
- 调用
- 6.执行
build方法，渲染widget树； - 7.当 当前的widget不再使用时，会调用
dispose方法进行销毁； - 8.手动调用
setState方法，会根据最新的状态数据来重新调用build方法，构建对应的widget； - 9.执行
didUpdateWidget方法是在父widget触发重建rebuild时，系统会调用didUpdateWidget方法； - 代码案例验证：
import 'package:flutter/material.dart';
void main() => runApp(SFMyApp());
class SFMyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: SFHomePage()
);
}
}
class SFHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("商品列表")
),
body: SFHomeContent("上面是一个简单的计数器")
);
}
}
class SFHomeContent extends StatefulWidget {
final String message;
SFHomeContent(this.message){
print("SFHomeContent 构造方法");
}
@override
State<StatefulWidget> createState() {
print("createState");
return _SFHomeContentState();
}
}
class _SFHomeContentState extends State<SFHomeContent>{
var _counter = 0;
_SFHomeContentState(){
print("_SFHomeContentState 构造方法");
}
@override
void initState() {
super.initState();
print("_SFHomeContentState initState");
}
@override
Widget build(BuildContext context) {
print("_SFHomeContentState build");
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
RaisedButton(
child: Text("+",style: TextStyle(fontSize: 25,color: Colors.white)),
color: Colors.pinkAccent,
onPressed: (){
setState(() {
_counter++;
});
},
),
Text("${widget.message}",style: TextStyle(fontSize: 18))
],
),
);
}
@override
void didChangeDependencies() {
super.didChangeDependencies();
print("_SFHomeContentState didChangeDependencies");
}
@override
void didUpdateWidget(SFHomeContent oldWidget) {
super.didUpdateWidget(oldWidget);
print("_SFHomeContentState didUpdateWidget");
}
-
@override
void dispose() {
super.dispose();
print("_SFHomeContentState dispose");
}
}
- 执行结果如下：
image.png
-
StatefulWidget生命周期复杂版的过程如下图所示：
Snip20211018_13.png mounded时State内部设置的一个属性，不需要我们手动进行修改的，其主要作用是记录widget对应的element是否为空；dirty state含义是脏的state，它实际是来标记Element的，标记为dirty的Element会等待下一次的重绘检查，强制调用build方法来构建我们的widget；clean state含义是干净的state，它表示当前build出来的widget，下一次重绘检查不需要重新build；
Flutter的编程范式
- 命令式编程：就是一步步给计算机命令，告诉它我们想做什么事情；
- 声明式编程：通常是描述目标的性质，依赖哪些状态，并且当依赖的状态发生改变时，我们通过某些方式通知目标做出响应，声明式编程是依赖框架的；
- Flutter采用的是声明式编程；
- 命令式编程的代码案例：
final text = new Text();
var title = "Hello World";
text.setContent(title); //主动设置title
- 声明式编程的代码案例：
var title = "Hello World";
Text(title); //告诉Text内部显示的是title
