flutteralready收藏

Flutter 优化:布局时尽量用 const

2022-04-06  本文已影响0人  禄子_c79b

一、说明

看到很多 Flutter 构建 UI 时会比较多用到 const,为什么不直接创建实例,而要在前端加一个 const 呢 ?

child: const Text('加 const');
 
VS
 
child: Text('不加 const');

二、尽量用 const 的理由

当我们调用 setState() 后,Flutter 会调用 build 方法,并且 rebuild 其中的每一个组件,避免全部重新构建的方法就是用 const。
如果一个组件更新频繁(比如动画),用 const 后可以减少垃圾回收。

三、示例

class _MyWidgetState extends State<MyWidget> {
  String title = "Title";
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Column(
        children: <Widget>[
          const Text("Text 1"),
          const Padding(
            padding: const EdgeInsets.all(8.0),
            child: const Text("Another Text widget"),
          ),
          const Text("Text 3"),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        child: const Icon(Icons.add),
        onPressed: () {
          setState(() => title = 'New Title');
        },
      ),
    );
  }
}

当你点击 FloatingActionButton 调用 setState 后,所有 const 定义的组件都不会重新构建

上一篇下一篇

猜你喜欢

热点阅读