Flutter 开发初体验及生命周期
命令行创建项目
flutter create learn_flutter
- 使用Android studio 打开项目
- 热启动与热重载
- 热启动:重新执行build方法
- 热重载:重新执行app
Hello Flutter
import 'package:flutter/material.dart';
main(){
runApp(
MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar:AppBar(
title:Center(
child:Text("My First App")
)
),
body:Center(
child: Text(
"Hello World",
style:TextStyle(
fontSize:36,
color: Colors.green
) ,
),
)
),
)
);
}
- 显示:
组件化开发
import 'package:flutter/material.dart';
main()=>runApp(MyApp());
/**
* Widget:
* 有状态的Widget: StatefulWidget 在运行过程中有一些状态(data)需要改变
* 无状态的Widget: StatelessWidget 内容是确定没有状态(data)的改变
*/
class MyApp extends StatelessWidget {
// build
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: HYHomePage()
);
}
}
class HYHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
print("HYHomePage Build");
return Scaffold(
appBar: AppBar(
title: Text("第一个Flutter程序"),
),
body: HYContentBody()
);
}
}
// StatefullWidget: 继承自StatefulWidget的类(可以接收父Widget传过来的数据)/State类(状态)
// flag: 状态
// Stateful不能定义状态 -> 创建一个单独的类, 这个类负责维护状态
class HYContentBody extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return HYContentBodyState();
}
}
class HYContentBodyState extends State<HYContentBody> {
var flag = true;
@override
Widget build(BuildContext context) {
print("HYContentBodyState Build");
return Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Checkbox(
value: flag,
onChanged: ( value) {
this.setState(() {
// flag = value;
});
},
),
Text("同意协议", style: TextStyle(fontSize: 20))
],
),
);
}
}
- 显示:
- 创建组件快捷方式: stl
- 组件外部包裹快捷键,无状态与有状态组件转换:ALT+回车
- Ctrl + Alt +b 查看实现抽象类的子类
- 在build中抽取部分代码组成新的widget:ALT + Enter+ W (冲突改成ALt+ shift+z 自定义即可)
StatelessWidget示例
import 'package:flutter/material.dart';
main()=>runApp(MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
home: CWHomePage(),
);
}
}
class CWHomePage extends StatelessWidget {
const CWHomePage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("商品列表"),
),
body:CWHomeContent(),
);
}
}
class CWHomeContent extends StatelessWidget {
const CWHomeContent({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return ListView(
children: <Widget>[
CWProductItem("Apple1", "Macbook Product1", "https://gw.alicdn.com/tfs/TB14WfGdxvbeK8jSZPfXXariXXa-2880-1500.png"),
CWProductItem("Apple2", "Macbook Product2", "https://img.alicdn.com/tfs/TB1kKyMjRBh1e4jSZFhXXcC9VXa-2880-1040.png"),
CWProductItem("Apple3", "Macbook Product3", "https://gw.alicdn.com/tfs/TB1MOyyesieb18jSZFvXXaI3FXa-2880-1500.png"),
],
);
}
}
class CWProductItem extends StatelessWidget {
final String title;
final String desc;
final String imageURL;
CWProductItem(this.title,this.desc,this.imageURL);
final style1= TextStyle(fontSize: 24,color: Colors.pink);
final style2= TextStyle(fontSize: 20,color: Colors.green);
@override
Widget build(BuildContext context) {
return Container(
padding: EdgeInsets.all(8),
decoration: BoxDecoration(
border: Border.all(
width: 8,
color: Colors.pink
)
),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
Text(title,style: style1),
SizedBox(height: 8),
Text(desc,style: style2),
SizedBox(height: 8),
Image.network(imageURL)
],
),
);
}
}
StatefulWidget示例
- 为什么Flutter在设计的时候StatefulWidget的build方法放在State中
- 1.build出来的Widget是需要依赖State中的变量(状态/数据)
- 2.在Flutter的运行过程中:
- Widget是不断的销毁和创建的
- 当我们自己的状态发生改变时, 并不希望重新创建一个新的State
- 注: 类比react中有状态组件和无状态组件。
import 'package:flutter/material.dart';
main()=>runApp(MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
home: CWHomePage(),
);
}
}
class CWHomePage extends StatelessWidget {
const CWHomePage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("测试示例"),
),
body:CWHomeContent("Hello, Flutter"),
);
}
}
class CWHomeContent extends StatefulWidget {
final String message;
CWHomeContent(this.message);
@override
State<CWHomeContent> createState() => _CWHomeContentState();
}
class _CWHomeContentState extends State<CWHomeContent> {
int _counter=0;
@override
Widget build(BuildContext context) {
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
_getButton(),
Text("当前计数 $_counter",style: TextStyle(fontSize: 25),),
Text("传递的信息:${widget.message}")
],
),
);
}
Widget _getButton(){
return Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
RaisedButton(
child: Text("+", style:TextStyle(fontSize: 20,color: Colors.white)),
color: Colors.pink,
onPressed: () {
setState(() {
_counter++;
});
}),
RaisedButton(
child: Text("-",style:TextStyle(fontSize: 20,color: Colors.white)),
color: Colors.green,
onPressed: () {
setState(() {
_counter--;
});
}
)
],
);
}
}
- 显示:
StatefulWidget生命周期
- StatefulWidget本身由两个类组成的:
StatefulWidget
和State
,我们分开进行分析
- 示例:
import 'package:flutter/material.dart';
main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: HYHomeDemo(),
);
}
}
class HYHomeDemo extends StatefulWidget {
@override
_HYHomeDemoState createState() => _HYHomeDemoState();
}
class _HYHomeDemoState extends State<HYHomeDemo> {
@override
Widget build(BuildContext context) {
print("build");
return Scaffold(
appBar: AppBar(
title: Text("商品列表"),
),
body: Column(
children: [HYHomeContent()],
),
floatingActionButton: RaisedButton(
child: Icon(Icons.add),
onPressed: () {
setState(() {});
},
),
);
}
}
// StatelessWidget的生命周期
// class HYHomeContent extends StatelessWidget {
// final String message;
// HYHomeContent(this.message) {
// print("构造函数被调用");
// }
// @override
// Widget build(BuildContext context) {
// print("调用build方法");
// return Text(message);
// }
// }
// StatefulWidget的生命周期
class HYHomeContent extends StatefulWidget {
HYHomeContent() {
print("1.调用HYHomeContent的constructor方法");
}
@override
_HYHomeContentState createState() {
print("2.调用HYHomeContent的createState方法");
return _HYHomeContentState();
}
}
class _HYHomeContentState extends State<HYHomeContent> {
int _counter = 0;
_HYHomeContentState() {
print("3.调用_HYHomeContentState的constructor方法");
}
@override
void initState() {
// 调用: 这里是必须调用super
final TextStyle style = TextStyle();
super.initState();
print("4.调用_HYHomeContentState的initState方法");
}
@override
void didUpdateWidget(HYHomeContent oldWidget) {
super.didUpdateWidget(oldWidget);
print("didUpdateWidget");
}
@override
void didChangeDependencies() {
super.didChangeDependencies();
print("调用_HYHomeContentState的didChangeDependencies方法");
}
@override
Widget build(BuildContext context) {
print("5.调用_HYHomeContentState的build方法");
return Column(
children: <Widget>[
RaisedButton(
child: Icon(Icons.add),
onPressed: () {
setState(() {
_counter++;
});
},
),
Text("数字:$_counter")
],
);
}
@override
void dispose() {
print("6.调用_HYHomeContentState的dispose方法");
super.dispose();
}
}
- 输出: