Flutter debug调试技巧和性能优化.

debug调试工具

///向Timeline事件中添加每个widget的build信息
debugProfileBuildsEnabled = true;
///向timeline事件中添加每个renderObject的paint信息
debugProfilePaintsEnabled = true;
///每个layer会出现一个边框,帮助区分layer层级
debugPaintLayerBordersEnabled = true;
///打印标记为dirty的widgets
debugPrintRebuildDirtyWidgets = true;
///打印标记为dirty的renderObjects
debugPrintLayouts = true;

使用

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

class TestDemo extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _TestDemoState();
  }
}

class _TestDemoState extends State<TestDemo> {
  int _count = 0;
  Timer _timer;
  @override
  void initState() {
    super.initState();
    ///打印标记为dirty的widgets, 写build方法里也可以.
    debugPrintRebuildDirtyWidgets = true;
    _timer = Timer.periodic(Duration(milliseconds: 1000), (t) {
      setState(() {
        _count++;
      });
    });
  }
  @override
  void dispose() {
    if (_timer != null) {
      if (_timer.isActive) {
        _timer.cancel();
      }
    }
    super.dispose();
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("Test Demo"),
        ),
        body: Column(
          children: <Widget>[
            Container(
              margin: EdgeInsets.fromLTRB(10,5,10,10),
              height: 100,
              color: Color(0xff1b8bdf),
            ),
            Text(
              '$_count',
              style: TextStyle(fontSize: 18, fontWeight:FontWeight.bold),
            ),
          ],
        )
    );
  }
}

这里我们可以发现,flutter是把TestDemo都标记为dirty,而这明显不是我们需要的,我们只需要更新count所在的这一个widget就可以了. 优化代码:

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

class TestDemo extends StatefulWidget {
 static const String rName = "TestDemo";
 @override
 State<StatefulWidget> createState() {
   return _TestDemoState();
 }
}

class _TestDemoState extends State<TestDemo> {
 
 @override
 Widget build(BuildContext context) {
   return Scaffold(
       appBar: AppBar(
         title: Text("Test Demo"),
       ),
       body: Column(
         children: <Widget>[
           Container(
             margin: EdgeInsets.fromLTRB(10,5,10,10),
             height: 100,
             color: Color(0xff1b8bdf),
           ),
           CountText(),
         ],
       )
   );
 }
}

class CountText extends StatefulWidget {
 @override
 State<StatefulWidget> createState() {
   return _CountTextState();
 }
}

class _CountTextState extends State<CountText> {
 int _count = 0;
 Timer _timer;
 @override
 void initState() {
   super.initState();
   _timer = Timer.periodic(Duration(milliseconds: 1000), (t) {
     setState(() {
       _count++;
     });
   });
 }

 @override
 void dispose() {
   if (_timer != null) {
     if (_timer.isActive) {
       _timer.cancel();
     }
   }
   super.dispose();
 }

 @override
 Widget build(BuildContext context) {
   return Text(
     _count.toString(),
     style: TextStyle(fontSize: 18, fontWeight:FontWeight.bold),
   );
 }
}

这样每次更新的时候只会刷新需要rebuild的组件.

补充

上面这种方法并不很直观,用Android Studio自带的功能更加强大.