Flutter Console 鸿蒙使用指南

最新推荐文章于 2025-12-21 22:17:06 发布

原创最新推荐文章于 2025-12-21 22:17:06 发布 · 676 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#flutter #harmonyos #华为

1. 插件介绍

flutter_console 是一个在 Flutter 端提供可视化控制台的组件，它可以将控制台窗口置于页面最顶层，方便开发者进行调试和日志输出。该插件支持折叠、拉伸、清除日志等功能，是开发过程中调试的好帮手。

主要功能特性：

可视化控制台：在应用界面上显示实时日志
灵活控制：支持折叠、拉伸、清除、关闭等操作
实时日志：支持通过流的方式持续推送日志
鸿蒙适配：已适配 OpenHarmony 平台，支持鸿蒙应用开发

2. 插件使用

2.1 包的引入

由于这是一个自定义修改版本的三方库，需要以 Git 形式引入。在项目的 pubspec.yaml 文件中添加以下依赖配置：

dependencies:
  flutter:
    sdk: flutter
  flutter_console:
    git:
      url: "https://gitcode.com/openharmony-sig/flutter_console.git"

配置完成后，执行以下命令获取依赖：

flutter pub get

2.2 API 的调用

2.2.1 基本使用流程

创建导航器 Key：用于获取 overlay 层
创建日志流：用于推送日志消息
显示控制台：将控制台浮窗显示在 overlay 层上
推送日志：通过日志流推送需要显示的日志

2.2.2 核心 API 介绍

ConsoleStream

日志流对象，用于推送日志消息：

方法名	描述	参数	返回值
push	推送日志消息	Object? message	void
pause	暂停日志流	-	void
resume	恢复日志流	-	void
destroy	销毁日志流	-	void

ConsoleOverlay

控制台浮窗管理对象，用于显示和控制控制台：

方法名	描述	参数	返回值
show	显示控制台浮窗	OverlayState baseOverlay, ConsoleStream contentStream, double y = 200	void
unfoldWidgetUpdate	更新展开状态的浮窗组件	-	void
foldAction	折叠控制台窗口	-	void
refresh	刷新浮窗内容	-	void

2.3 使用示例

以下是一个完整的使用示例：

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  // 创建导航器Key，用于获取overlay层
  final navKey = GlobalKey<NavigatorState>();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      navigatorKey: navKey,
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Flutter Console Demo'),
        ),
        body: Center(
          child: GestureDetector(
            onTap: showLog,
            child: Container(
              height: 50,
              width: 100,
              color: Colors.purple,
              child: Center(
                child: Text(
                  '显示日志',
                  style: TextStyle(color: Colors.white, fontSize: 18),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }

  void showLog() {
    // 创建日志流
    ConsoleStream logStream = ConsoleStream();

    // 显示控制台浮窗
    ConsoleOverlay().show(
      baseOverlay: navKey.currentState!.overlay!,
      contentStream: logStream,
      y: 300,
    );

    // 推送日志
    pushLog(logStream);
  }

  void pushLog(ConsoleStream cr) {
    // 推送当前时间戳作为日志
    cr.push('日志时间: ' + DateTime.now().millisecondsSinceEpoch.toString());

    // 每隔1秒推送一次日志
    Future.delayed(const Duration(milliseconds: 1000), () {
      pushLog(cr);
    });
  }
}

2.4 控制台功能说明

控制台窗口提供了以下功能按钮（从左至右）：

折叠按钮：将整个控制台窗口折叠为一个小窗口，点击小窗口可以恢复大窗口
拉伸按钮：用于将控制台窗口进行上下拉伸，调整窗口大小
清除按钮：可以将当前所有日志清除
关闭按钮：将控制台窗口关闭
至底按钮：将控制台窗口滚动到最底部，查看最新日志

3. 约束与限制

3.1 兼容性

在以下版本中已测试通过：

Flutter: 3.7.12-ohos-1.0.6; SDK: 5.0.0(12); IDE: DevEco Studio: 5.0.13.200; ROM: 5.1.0.120 SP3;
Flutter: 3.22.1-ohos-1.0.1; SDK: 5.0.0(12); IDE: DevEco Studio: 5.0.13.200; ROM: 5.1.0.120 SP3;