Flutter界面检查与调试插件inspector的使用

Flutter提供了丰富的工具来帮助开发者进行界面开发和调试，inspector插件就是其中之一。它可以帮助你更方便地检查和调试Flutter应用程序中的Widgets。本文将详细介绍inspector插件的功能、安装方法以及如何在项目中使用它。

inspector

inspector是一个用于检查Flutter Widgets的包。它还带有颜色拾取器和放大镜功能。对于调试Widgets和QA测试非常有用。

支持键盘快捷键，如果你使用的是物理键盘。

你可以查看示例Web应用程序了解更多。

灵感来源于inspx。

WIP

警告：该包的开发仍在进行中，某些功能可能会破坏你的应用程序。

Features

• ✅ 颜色拾取
• ✅ 尺寸检查
• ✅ 内边距检查
• ✅ 键盘快捷键
• ✅ 放大
• ❌ BorderRadius检查（未实现）
• ✅ TextStyle检查

Installing

添加依赖：

$ flutter pub add inspector

导入包：

import 'package:inspector/inspector.dart';

用Inspector包裹MaterialApp.builder或WidgetsApp.builder：

MaterialApp(
  home: ExampleApp(),
  builder: (context, child) => Inspector(child: child!), // 包裹[child]与[Inspector]
),

可选地，你可以通过传递isEnabled给Inspector来禁用它。默认情况下，当kReleaseMode == true时，检查器是禁用的。

Usage

如果启用了检查器，则会在屏幕右侧出现一个面板，带有按钮以切换尺寸检查和颜色拾取器。

使用起来非常简单，只需点击你想测量的Widget，或者点击像素获取其颜色。

您还可以使用键盘快捷键 - Shift会切换颜色拾取器，Z会切换缩放，而Alt或Cmd则会切换Widget检查器。

Examples

Contact me

如果有任何问题，欢迎联系我：

E-mail: kk.erzhan@gmail.com

示例代码

以下是一个简单的例子，展示了如何在项目中使用inspector插件。

import 'package:flutter/material.dart';
import 'package:inspector/inspector.dart';

void main() {
  runApp(
    MaterialApp(
      home: ExampleApp(),
      theme: ThemeData.light(),
      darkTheme: ThemeData.dark(),
      themeMode: ThemeMode.system,
      builder: (context, child) => Inspector(
        child: child!,
        isEnabled: true,
      ),
    ),
  );
}

class ExampleApp extends StatefulWidget {
  const ExampleApp({Key? key}) : super(key: key);

  @override
  _ExampleAppState createState() => _ExampleAppState();
}

class _ExampleAppState extends State<ExampleApp> {
  Widget _buildListItem(int index) {
    return ListTile(
      title: Text('Item #$index'),
      subtitle: Text('A subtitle'),
      leading: Container(
        width: 32.0,
        height: 32.0,
        decoration: BoxDecoration(
          color: Theme.of(context).primaryColor,
          shape: BoxShape.circle,
        ),
        alignment: Alignment.center,
        child: Text(
          '$index',
          style: TextStyle(
            color: Colors.white,
            fontWeight: FontWeight.w600,
          ),
        ),
      ),
      trailing: IconButton(
        icon: Icon(Icons.add),
        onPressed: () {},
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Example'),
      ),
      body: ListView.builder(
        itemCount: 100,
        itemBuilder: (context, i) => _buildListItem(i),
      ),
    );
  }
}

希望这篇文章能够帮助你在Flutter项目中更好地使用inspector插件。如果你有任何疑问或需要进一步的帮助，请随时联系我！