Flutter实战之自定义日志打印组件详解

在Flutter中,如果我们需要打印日志,如果不进行自定义,我们只能使用自带的 print() 或者 debugPrint() 方法进行打印,但是这两种打印,日志都是默认 Info 层级的日志,很不友好,所以如果需要日志打印层级分明,我们就需要自定义一个日志打印组件,以下就来介绍如何自定义日志打印组件。

如何让输出的日志层级分明?

换种方式想,如果我们能在Flutter代码中,能够调用到原始Android中的Log组件,岂不是就能解决日志打印问题?

如何进行关联

在Flutter中,可以使用 MethodChannel 进行关联,让Flutter调用特定平台(如Android、IOS)的相关API,对于 MethodChannel 的使用说明和相关介绍,可参考官方文档:点击查看

这里简单说明下, Flutter关于特定平台的API,主要是依赖其灵活的消息传递方式来执行的,而并非一套完整的代码生成的。啥意思呢?

  • Flutter可以通过平台通道向其宿主(Android、IOS)发送消息;
  • 其宿主监听平台通道,接收发送过来的消息;
  • 宿主平台通过接收到的消息执行宿主特有的API,然后将响应结果返回给客户端(也就是Flutter部分)更新状态。

下面用代码简单说明:

Step1 :创建Flutter平台客户端

import 'package:flutter/services.dart';

///一个日志打印工具类
class LogUtils {
 LogUtils._();

 //第一步:设置平台,并进行命名
 static const _platform = const MethodChannel('com.yancy.flutter.plugins/log');

 //第二步,设置相关需要传递的方法
 //invokeMethod方法接收的参数,第一个必选参数,设置的是方法的名称;后面的参数为可选的需要传递的参数
 static void i(String tag, String msg) {
 _platform.invokeMethod('logI', {'tag': tag, 'msg': msg});
 }

 static void d(String tag, String msg) {
 _platform.invokeMethod('logD', {'tag': tag, 'msg': msg});
 }

 static void v(String tag, String msg) {
 _platform.invokeMethod('logV', {'tag': tag, 'msg': msg});
 }

 static void w(String tag, String msg) {
 _platform.invokeMethod('logW', {'tag': tag, 'msg': msg});
 }

 static void e(String tag, String msg) {
 _platform.invokeMethod('logE', {'tag': tag, 'msg': msg});
 }

}

Step2 :宿主端建立对应通道接收端

package com.yancy.flutter.host;

import android.content.Context;
import android.util.Log;
import android.widget.Toast;

import io.flutter.plugin.common.BinaryMessenger;
import io.flutter.plugin.common.MethodChannel;

/**
 * 说明:
 *
 * @author Yancy
 * @date 2019/3/15
 */
public class CustomFlutterPlugins {

 //这里必选要跟Flutter平台名称对应上,否则无法接收消息
 private static final String LOG_CHANNEL_NAME = "com.yancy.flutter.plugins/log";

 public static void registerLogger(BinaryMessenger messenger) {
  new MethodChannel(messenger, LOG_CHANNEL_NAME).setMethodCallHandler((methodCall, result) -> {
   String tag = methodCall.argument("tag");
   String msg = methodCall.argument("msg");
   switch (methodCall.method) {
    case "logV":
     Log.v(tag, msg);
     break;
    case "logD":
     Log.d(tag, msg);
     break;
    case "logI":
     Log.i(tag, msg);
     break;
    case "logW":
     Log.w(tag, msg);
     break;
    case "logE":
     Log.e(tag, msg);
     break;
    default:
     Log.d(tag, msg);
     break;
   }
  });
 }
}

上面的 switch 里面的部分即对于flutter中 invokeMethod 方法中的第一个参数名称。

Step3 :然后我们在宿主的M ainActivity 中进行调用注册即可完成通道的建立。

public class MainActivity extends FlutterActivity {
 @Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 GeneratedPluginRegistrant.registerWith(this);

 CustomFlutterPlugins.registerLogger(getFlutterView());
 }
}

Step4 :Flutter中调用LogUtils相关方法,打印日志。

class MyApp extends StatelessWidget {

 @override
 Widget build(BuildContext context) {
 print('print------');
 debugPrint('debugPrint-----');
 LogUtils.v('yancy', 'v-------');
 LogUtils.d('yancy', 'd-------');
 LogUtils.i('yancy', 'i-------');
 LogUtils.w('yancy', 'w-------');
 LogUtils.e('yancy', 'e-------');

 return MaterialApp(
  title: 'Flutter Demo',
  theme: ThemeData(
  primarySwatch: Colors.blue,
  ),

  home: MyHomePage(title: 'Flutter Demo Home Page'),
 );
 }
}

控制台输出的打印结果如下:

至此,一个简单的日志打印组建就开发完成啦。希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Flutter实现文本组件、图标及按钮组件的代码

    •文本组件 文本组件(text)负责显示文本和定义显示样式,下表为text常见属性 Text组件属性及描述 属性名 类型 默认值 说明 data String   要显示的文本 maxLines int 0 文本要显示的最大行数 style TextStyle null 文本样式,可定义文本的字体大小.颜色.粗细等 textAlign TextAlign TextAlign.center 文本水平方向的对齐方式,取值有center.end.justify.left.right.start.val

  • Flutter实现webview与原生组件组合滑动的示例代码

    最近在用Flutter写一个新闻客户端, 新闻详情页中的内容 需要用Flutter的本地Widget和WebView共同展示 . 比如标题/上方的视频播放器是用本地Widget展示, 新闻内容的富文本文字使用webview展示html, 这样就要求标题/视频播放器与webview可以 组合滑动 . ps: 如果把新闻详情页都用html画出, 就不用考虑组合滑动的问题. 找到支持与本地组件共存的webview控件 找一个可以与本地组件共存的webview控件是首要任务, 以下是我测试过的几个库:

  • Flutter实现容器组件、图片组件 的代码

    •容器组件 容器组件(Container)可以理解为在Android中的RelativeLayout或LinearLayout等,在其中你可以放置你想布局的元素控件,从而形成最终你想要的页面布局.当然Flutter中的容器组件作为一个"容器",肯定会有一些给我们提供一些属性来约束我们容器内的组件,下面介绍一下容器组件(Container)的一些常用属性及描述: 属性名 类型 说明 key Key Container唯一标识符,用于查找更新 alignment AlignmentGeom

  • flutter 输入框组件TextField的实现代码

    TextField 顾名思义文本输入框,类似于iOS中的UITextField和Android中的EditText和Web中的TextInput.主要是为用户提供输入文本提供方便.相信大家在原生客户端上都用过这个功能,就不在做具体介绍了,接下来还是具体介绍下Flutter中TextField的用法. 以下内容已更新到 github TextField的构造方法: const TextField({ Key key, this.controller, //控制器,控制TextField文字 thi

  • Flutter实战之自定义日志打印组件详解

    在Flutter中,如果我们需要打印日志,如果不进行自定义,我们只能使用自带的 print() 或者 debugPrint() 方法进行打印,但是这两种打印,日志都是默认 Info 层级的日志,很不友好,所以如果需要日志打印层级分明,我们就需要自定义一个日志打印组件,以下就来介绍如何自定义日志打印组件. 如何让输出的日志层级分明? 换种方式想,如果我们能在Flutter代码中,能够调用到原始Android中的Log组件,岂不是就能解决日志打印问题? 如何进行关联 在Flutter中,可以使用 M

  • 微信小程序自定义模态弹窗组件详解

    小程序自带一个showModal弹窗,调用很简单,但是限制很多,title有字数限制,中间的content也只能放文字不能放组件,所以作为一个前端碰到那种连续好几个跟微信自带的模态弹窗风格一模一样,但是功能又花里胡哨的UI稿,就不能忍受频繁的复制粘贴了.自己写了一个组件,虽然调用起来比微信自带的麻烦一点,但是还蛮实用的. 效果大概长这样. 上代码: wxml: <!-- 自定义模态弹窗 --> <view class="modalDIY" wx:if="{{

  • IOS实战之自定义转场动画详解

    转场动画这事,说简单也简单,可以通过presentViewController:animated:completion:和dismissViewControllerAnimated:completion:这一组函数以模态视图的方式展现.隐藏视图.如果用到了navigationController,还可以调用pushViewController:animated:和popViewController这一组函数将新的视图控制器压栈.弹栈. 下图中所有转场动画都是自定义的动画,这些效果如果不用自定义动

  • springboot整合mybatis将sql打印到日志的实例详解

    在前台请求数据的时候,sql语句一直都是打印到控制台的,有一个想法就是想让它打印到日志里,该如何做呢? 见下面的mybatis配置文件: <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE configuration PUBLIC "-//mybatis.org//DTD Config 3.0//EN" "http://mybatis.org/dtd/mybatis-3-

  • logback自定义json日志输出示例详解

    目录 前言 依赖的jar maven坐标 配置Appender节点 appender配置说明: 配置logger节点 logger配置说明: 前言 先说下楼主的使用场景吧,将程序的某些方法调用以json格式的内容记录到文件中,提供给大数据做数据分析用.当然这个需求实现起来很简单,通过aop拦截切面统一输出内容到文件即可.下面要介绍的就是通过logback日志体系以及logstash提供的json log依赖将数据以json格式记录到日志文件的例子. 依赖的jar logstash-logback

  • python 工具类之Queue组件详解用法

    目录 简述 环境 单向队列 先进后出队列 优先级队列 双向队列 完整代码 总结 简述 队列一直都是工程化开发中经常使用的数据类型,本篇文章主要介绍一下python queue的使用,会边调试代码,边说明方法内容. 环境 python: 3.6.13 单向队列 初始化单向队列 放置一些数据 可以使用full()方法判断队列是否已经塞满数据,可以通过qsize()方法查看队列内元素数量. 这时候我们从队列取出数据,看先取到的是什么. 现在队列里面只有两个数,我们再塞入3个数看一下. 这个时候我们继续

  • Flutter学习LogUtil封装与实现实例详解

    目录 一. 为什么要封装打印类 二. 需要哪些类 三. 打印输出的抽象类 四. 格式化日志内容 格式化堆栈 堆栈裁切工具类 格式化堆栈信息 格式化JSON 五. 需要用到的常量 六. 为了控制多个打印器的设置做了一个配置类 七. Log的管理类 九. 调用LogUtil 十. 定义一个Flutter 控制台打印输出的方法 十一. 现在使用前初始化log打印器一次 使用 一. 为什么要封装打印类 虽然 flutter/原生给我们提供了日志打印的功能,但是超出一定长度以后会被截断 Json打印挤在一

  • SpringBoot集成P6Spy实现SQL日志的记录详解

    目录 P6Spy简介 应用场景 pom application.yml entity Mapper 启动类 测试类 P6Spy入门使用 spy.properties P6SPYConfig application.yml P6Spy简介 P6Spy是一个可以用来在应用程序中拦截和修改数据操作语句的开源框架. 通过P6Spy可以对SQL语句进行拦截,相当于一个SQL语句的记录器,这样我们可以用它来作相关的分析,比如性能分析. 应用场景 pom <dependencies> <depende

  • Angular2入门教程之模块和组件详解

    本文呢主要给大家介绍的关于Angular2模块和组件的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍: 一.初步了解模块和组件 之前给大家介绍了构建工程,这篇文章简单讲述一下Angular2中的模块和组件. app文件夹下有五个文件,其中,app.component.spec.ts应该是和模块测试有关的文件,目前不用管它.剩下的四个文件就是典型的模块+组件的文件组成模式. Angular2应用由模块和组件构成,每个模块这样明明name.module.ts,组件则是name.compo

  • python logging日志模块的详解

    python logging日志模块的详解 日志级别 日志一共分成5个等级,从低到高分别是:DEBUG INFO WARNING ERROR CRITICAL. DEBUG:详细的信息,通常只出现在诊断问题上 INFO:确认一切按预期运行 WARNING:一个迹象表明,一些意想不到的事情发生了,或表明一些问题在不久的将来(例如.磁盘空间低").这个软件还能按预期工作. ERROR:更严重的问题,软件没能执行一些功能 CRITICAL:一个严重的错误,这表明程序本身可能无法继续运行 这5个等级,也

随机推荐