1.建议在组件前加上 const
对于一些静态组件如Text、Color、Padding、SizedBox等,或者不会发生状态改变的组件前加上const,相当于对此组件进行了缓存,全局setState不会引起有const限定符的组件重建
return Center(
child: Column(
children: [
const Text('我是文本'),
RaisedButton(onPressed: (){
setState(() {
});
})
],
),
);
2.避免更改组件树的结构和组件的类型
有如下场景,有一个 Text 组件有可见和不可见两种状态,代码如下:
bool _visible = true;
@override
Widget build(BuildContext context) {
return Center(
child: Column(
children: [
if (_visible) Text('可见'),
Container(),
],
),
);
}
可见时的组件树:不可见时的组件树:
两种状态组件树结构发生变化,应该避免发生此种情况,优化如下:
Center(
child: Column(
children: [
Visibility(
visible: _visible,
child: Text('可见'),
),
Container(),
],
),
);
此时不管是可见还是不可见状态,组件树都不会发生变化,如下:对于可见和不可见的控制,第二种用法比较常见
bool _showButton = true;
@override
Widget build(BuildContext context) {
return Center(
child: Column(
children: [
_showButton ? RaisedButton(onPressed: null) : Container(),
_showButton ? RaisedButton(onPressed: null) : Text(''),
Container(),
],
),
);
}
优化如下:
bool _showButton = true;
@override
Widget build(BuildContext context) {
return Center(
child: Column(
children: [
Visibility(
visible: _showButton,
child: RaisedButton(onPressed: null),
),
Offstage(
offstage: !_showButton,
child: RaisedButton(onPressed: null),
),
Container(),
],
),
);
}
还有一种情况是根据不同的条件构建不同的组件,如下:
bool _showButton = true;
@override
Widget build(BuildContext context) {
return Center(
child: Column(
children: [
_showButton ? RaisedButton(onPressed: null) : Container('另一个组件'),
Container(),
],
),
);
}
上面两张情况组件树发生了更改,不管是类型发生更改,还是深度发生更改,如果无法避免,对于比较复杂的组件可以将变化的组件树封装为一个 StatefulWidget 组件,且设置 GlobalKey
虽然通过 GlobalKey 的做法提高了性能,但基于管理 GlobalKey 的成本很高,所以其他需要使用 Key 的地方建议考虑使用 Key, ValueKey, ObjectKey, 和 UniqueKey。
3.关于ListView 的优化
ListView是我们最常用的组件之一,用于展示数据的列表。一般如果我们要展示的数据量较大尽量使用 ListView.builder 或者 ListView.separated,不要直接使用如下方式:
ListView( children: <Widget>[ item,item1,item2,... ], ),这种方式会一次加载所有的组件,没有“懒加载”,性能消耗较大。ListView 中 itemExtent 属性对动态滚动的性能提升非常大,比如
ListView.builder(
controller: _controller,
itemBuilder: (context, index) {
return Container(
height: 80,
alignment: Alignment.center,
color: Colors.primaries[index % Colors.primaries.length],
child: Text(
'$index',
style: TextStyle(color: Colors.white, fontSize: 20),
),
);
},
itemExtent: 80,//指定子元素长度
itemCount: 2000,
);
itemExtent可以指定listview子元素的长度。当列表中的每一项长度是固定的情况下可以指定该值,有助于提高列表的性能(因为它可以帮助ListView
在未实际渲染子元素之前就计算出每一项元素的位置),如果不设置 itemExtent 属性,将会由子组件自己决定大小,对于加载数据量较大的情况下,大量的计算导致UI堵塞就会发生卡顿现象
4.谨慎的使用一些组件
-
Clip类组件是常用的裁剪类组件,比如:ClipOval、ClipPath、ClipRRect、ClipRect、CustomClipper。
一些简单的圆角组件的设置可以使用 Container 实现:设置BoxDecration中的borderRadius属性
Container(
height: 200,
width: 200,
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(
'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg'),
fit: BoxFit.cover,
),
border: Border.all(
color: Colors.blue,
width: 2,
),
borderRadius: BorderRadius.circular(12),
),
);
-
Opacity 组件的功能是使子组件透明
对于除0.0和1.0之外的不透明度值,此类相对昂贵,因为它需要将子级绘制到中间缓冲区中。 对于值0.0,根本不绘制子级。 对于值1.0,将立即绘制没有中间缓冲区的子对象。
如果仅仅是对单个 Image 或者 Color 增加透明度,直接使用:
Container(color: Color.fromRGBO(255, 0, 0, 0.5))
比 Opacity 组件更快
Opacity(opacity: 0.5, child: Container(color: Colors.red))