一、什么是Widget?
简单一句话,在Flutter里,万物都是Widget(部件)。不管是基础“控件”、页面布局、容器组件还是处理事件、各种属性,都是一个个Widget组合或者组成的,很像搭积木,最后所搭成的对象也都是一个Widget。
二、入口函数
dart语法中,函数体内只有一行函数,可以用箭头函数。
void main() => runApp(Myapp());
Myapp():是一个实例对象,把new省略了,在这里也是一个Widget。
三、StatelessWidget
StatelessWidget(无状态部件),简单点说就是不需要维护它的状态,写的什么,就展示什么,不会发生改变。例如,页面中的标题,不会发生改变。
编写一个无状态的Widget,需要继承StatelessWidget。关于无状态部件,固定写法:重写build方法,返回Widget组件。
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo', // app名称
theme: ThemeData(
primarySwatch: Colors.blue, // 主题色
),
home: MyHomePage(title: 'Flutter Demo Home Page'), // 应用首页
);
}
}
StatelessWidget 生命周期十分简单,只有build()。
四、StatefulWidget
StatefulWidget(有状态部件),简单点说就是会发生状态改变的组件,如果学过Vue,可以理解为可以响应式变量。
编写一个有状态的Widget,需要继承StatefulWidget。关于有状态部件,固定写法:一个StatefulWidget类,需要对应一个State类。
class CounterWidget extends StatefulWidget {
final int initValue;
const CounterWidget({this.initValue = 0,super.key}); //构造函数
@override
_CounterWidgetState createState() => _CounterWidgetState();
}
class _CounterWidgetState extends State<CounterWidget> {
int _counter = 0;
@override
void initState() {
super.initState();
//初始化状态
_counter = widget.initValue;
print("initState");
}
@override
Widget build(BuildContext context) {
print("build");
return Scaffold(
body: Center(
child: TextButton(
child: Text('$_counter'),
//点击后计数器自增
onPressed: () => setState(
() => ++_counter,
),
),
),
);
}
五、关于Key
在Widget中的构造函数,经常出现Key?到底有什么用?——关于key值详解