一、Widget生命周期
Flutter Widget生命周期是描述Widget在特定时间段内所经历的各种状态的一个生命周期，包括创建、位置和大小改变、纹理处理和销毁等。在开发Flutter应用时理解组件的生命周期非常重要。下面我们先来看一下Widget的创建过程和生命周期： 1. 构造函数：当我们使用一个Widget作为子对象时，它的构造函数被调用。 2. createElement()方法：在Flutter框架使用Widget时，它会为它们创建一个新的Element。createElement()方法用于创建一个Element对象，而Element对象与Widget对象存在一一对应的关系。 3. build()方法：build()方法定义用于构建Widget的基本元素的代码，这些元素是可以反复使用的。 4. didChangeDependencies()方法：当widget被插入到widget树中时，它会调用父Widget的didChangeDependencies()方法。 5. initState()方法：当widget第一次插入树时被调用，可以在此期间进行初始化操作。 6. didUpdateWidget()方法：在widget重新构建时调用。 7. build()方法：在build()方法中，Flutter框架会通过对比新旧结果，来决定是否有必要重新渲染界面。 8. deactivate()方法：当Stateful Widget从树上被移除时调用，释放一些资源。 9. dispose()方法：当该Widget被永久从树上移除时，会调用该方法来释放资源。二、布局与样式
在Flutter中，布局和样式被放在一起处理，直接作用于Widget上。这样可以使得框架更简洁和有效。以下是Flutter布局和样式的几个重要概念： 1. 容器（Container）：容器类似于HTML中的
标签，它允许我们给Widget添加背景颜色、边框、内边距等。 2. 行（Row）和列（Column）：利用Row和Column构建行和列结构。 3. 填充（Padding）：使用Padding Widget添加内边距。 4. 对齐（Alignment）：使用Alignment Widget对子Widget进行对齐。 5. 弹性空间（Flexible）：使用Flexible Widget来创建弹性布局。
三、Widget生命周期代码示例
class MyWidget extends StatefulWidget {
MyWidget({Key key}) : super(key: key);
@override
_MyWidgetState createState() => _MyWidgetState();
}
class _MyWidgetState extends State {
@override
void initState() {
super.initState();
print('initState called');
}
@override
void didUpdateWidget(MyWidget oldWidget) {
super.didUpdateWidget(oldWidget);
print('didUpdateWidget called');
}
@override
void deactivate() {
super.deactivate();
print('deactivate called');
}
@override
void dispose() {
super.dispose();
print('dispose called');
}
@override
Widget build(BuildContext context) {
print('build called');
return Container();
}
}
四、布局与样式代码示例
Container(
padding: EdgeInsets.all(16.0),
margin: EdgeInsets.all(16.0),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(8.0),
boxShadow: [
BoxShadow(
color: Colors.black12,
offset: Offset(0, 8.0),
blurRadius: 8.0,
spreadRadius: 4.0,
),
],
),
child: Column(
children: [
Text(
'Title',
style: TextStyle(
fontSize: 24.0,
fontWeight: FontWeight.bold,
),
),
SizedBox(height: 16.0),
Text(
'Description',
style: TextStyle(
fontSize: 16.0,
color: Colors.grey[600],
),
),
],
),
);
