在Flutter中,自定义组件其实就是一个类,这个类继承自StatelessWidget/StatefulWidget。
StatelessWidget是无状态组件,状态不可变的Widget。
StatefulWidget是有状态组件,持有的状态可能在Widget生命周期改变。也就是说,如果我们想改变页面中的数据,那么就需要用到StatefulWidget。
首先我们在VSCode中安装一个名为“Awesome Flutter Snippets”的插件,该插件提供了Flutter中各种常用的类和方法的快速构建方式,可以极大地提升开发效率,如下所示:
捷径 扩展 描述
statelessW 无状态小工具 创建无状态小部件
statefulW 有状态的小工具 创建有状态小部件
build 构建方法 描述窗口小部件表示的用户界面部分。
initS INITSTATE 将此对象插入树中时调用。框架将为它创建的每个State对象调用此方法一次。
dis 部署 永久地从树中删除此对象时调用。当此State对象永远不会再次构建时,框架将调用此方法。
reassemble 重新安装 在调试期间重新组装应用程序时调用,例如在热重新加载期间。
didChangeD didChangeDependencies 在此State对象的依赖项更改时调用
didUpdateW didUpdateWidget 每当窗口小部件配置更改时调用。
customClipper 自定义剪辑 用于创建自定义形状
customPainter 自定义画家 用于创建自定义绘画
listViewB ListView.Builder 创建按需创建的可滚动的线性小部件数组。提供非null itemCount可提高ListView估计最大滚动范围的能力。
customScrollV 自定义ScrollView 创建ScrollView使用条子创建自定义滚动效果的。如果primary参数为true,则controller必须为null。
streamBldr Stream Builder StreamBuilder根据与指定交互的最新快照创建新的构建自身stream
animatedBldr 动画生成器 创建动画生成器。指定的窗口小部件将child传递给builder
statefulBldr 有状态的生成器 创建一个既具有状态又将其构建委托给回调的窗口小部件。用于重建窗口小部件树的特定部分。
oriantationBldr 方向生成器 创建一个构建器,允许指定和引用设备的方向
layoutBldr 布局生成器 与Builder窗口小部件类似,只是框架在布局时调用构建器函数并提供父窗口小部件的约束。
singleChildSV 单儿童滚动视图 使用单个子项创建滚动视图
futureBldr 未来建设者 创建Future Builder。这是基于与Future交互的最新快照构建的。
nosm 没有这样的方法 访问不存在的方法或属性时,将调用此方法。
inheritedW 继承的小部件 用于沿窗口小部件树传播信息的类。
mounted 安装 此State对象当前是否在树中。
snk 下沉 接收器是流的输入。
strm 流 异步数据事件的来源。流可以是任何数据类型。
toStr 字符串 返回此对象的字符串表示形式。
debugP 调试打印 将消息打印到控制台,您可以使用flutter工具的logs命令(flutter logs)访问该控制台。
importM 材料包装 导入材料包。
importC 库比蒂诺包 导入Cupertino包。
mateapp 材料应用 创建一个新的Material App。
cupeapp 库比蒂诺包 创建一个新的Cupertino应用程序。
这样我们就可以通过statefulW这个快捷指令来快速生成StatefulWidget的创建代码了。
class _HomeContentState extends State<HomeContent> {
List dataList = new List();//这是数据源
@override
Widget build(BuildContext context) {
return ListView(
children: <Widget>[
Column(
//这里引用数据源dataList
children: dataList.map((value){
return ListTile(title: Text(value));
}).toList(),
),
RaisedButton(
child: Text("button"),
onPressed: (){
setState(() {//页面数据需要改变时,一定要在setState方法里进行数据更新的操作
dataList.add("one more~");
});
},
)
],
);
}
}
效果如下:
以上。