应用配置组件
应用配置组件用于配置和调试 Flutter 应用的各种参数。
提示：这些配置主要用于开发调试阶段，生产环境中应谨慎使用。
WidgetsApp
WidgetsApp 是 MaterialApp 和 CupertinoApp 的基类，提供基础的应用配置。
WidgetsApp(
title: '我的应用',
color: Colors.blue,
builder: (context, child) {
return MediaQuery(
data: MediaQuery.of(context).copyWith(
textScaleFactor: 1.0,
),
child: child!,
);
},
home: MyHomePage(),
)调试横幅效果对比
默认 (debugShowCheckedModeBanner: true)
应用内容
隐藏 (debugShowCheckedModeBanner: false)
应用内容
runApp
runApp 是 Flutter 应用的入口函数。
void main() {
runApp(
MaterialApp(
title: 'Flutter 应用',
home: MyHomePage(),
),
);
}
// 带调试横幅
void main() {
runApp(
MaterialApp(
title: 'Flutter 应用',
debugShowCheckedModeBanner: false, // 隐藏调试横幅
home: MyHomePage(),
),
);
}Widget 边界可视化
🟦 橙色边框：Widget 的实际渲染边界
🟨 紫色虚线：Widget 的布局边界
🟩 绿色文字：Widget 的尺寸信息
debugPaintSizeEnabled
debugPaintSizeEnabled 用于可视化 Widget 的边界和大小。
import 'package:flutter/rendering.dart';
void main() {
// 启用调试绘制
debugPaintSizeEnabled = true;
runApp(
MaterialApp(
home: MyHomePage(),
),
);
}
注意：debugPaintSizeEnabled 只能在 debug 模式下使用，release 模式下会被忽略。
PerformanceOverlay
PerformanceOverlay 显示应用的性能指标。
MaterialApp(
debugShowCheckedModeBanner: false,
showPerformanceOverlay: true, // 显示性能覆盖层
home: MyHomePage(),
)性能覆盖层显示
性能指标说明：
- GPU: 图形渲染时间
- UI: CPU 构建时间
- 绿色表示性能良好
- 红色表示性能较差
层边界和重绘可视化
debugPaintLayerBordersEnabled
Layer 1
Layer 2
debugRepaintRainbowEnabled
重绘区域
checkerboardRasterCacheImages
checkerboardRasterCacheImages 用于可视化图像缓存。
import 'package:flutter/rendering.dart';
void main() {
// 启用棋盘格缓存可视化
debugPaintLayerBordersEnabled = true;
debugRepaintRainbowEnabled = true;
runApp(
MaterialApp(
home: MyHomePage(),
),
);
}
其他调试选项：
// 启用所有调试绘制
debugPaintSizeEnabled = true;
debugPaintBaselinesEnabled = true;
debugPaintPointersEnabled = true;
debugPaintLayerBordersEnabled = true;
debugRepaintRainbowEnabled = true;
debugPrintRebuildDirtyWidgets = true;常见调试技巧
// 1. 检查 Widget 重建
debugPrintRebuildDirtyWidgets = true;
// 2. 显示帧率
MaterialApp(
showPerformanceOverlay: true,
home: MyHomePage(),
)
// 3. 检查布局边界
debugPaintSizeEnabled = true;
// 4. 显示 Paint 层
debugPaintLayerBordersEnabled = true;
// 5. 检查重绘
debugRepaintRainbowEnabled = true;调试选项配置面板
生产环境注意事项：
- 确保所有调试标志在 release 模式下关闭
- 使用 assert 语句进行调试检查
- 避免在生产代码中使用 debugPrint
- 使用常量构造函数优化性能