IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> 移动开发 -> Flutter实战项目《模仿京东App》第二篇 字节跳动调试工具、静态资源及阿里图标库 -> 正文阅读

[移动开发]Flutter实战项目《模仿京东App》第二篇 字节跳动调试工具、静态资源及阿里图标库

概要

  • 配置字节跳动调试工具
  • 图片配置
  • 配置阿里图标库
  • 语言汉化

? ? ?参考信息:https://github.com/bytedance/flutter_ume

一、安装包

dev_dependencies: # Don't use UME in release mode
? flutter_ume: ^0.3.0+1
? flutter_ume_kit_ui: ^0.3.0+1
? flutter_ume_kit_device: ^0.3.0
? flutter_ume_kit_perf: ^0.3.0
? flutter_ume_kit_show_code: ^0.3.0
? flutter_ume_kit_console: ^0.3.0
? flutter_ume_kit_dio: ^0.3.0

二、配置引用


import 'dart:async';
import 'package:flutter/material.dart';
import 'flavors.dart';
import 'main.dart';
import 'package:flutter_ume/flutter_ume.dart'; // UME 框架
import 'package:flutter_ume_kit_ui/flutter_ume_kit_ui.dart'; // UI 插件包
import 'package:flutter_ume_kit_perf/flutter_ume_kit_perf.dart'; // 性能插件包
import 'package:flutter_ume_kit_show_code/flutter_ume_kit_show_code.dart'; // 代码查看插件包
import 'package:flutter_ume_kit_device/flutter_ume_kit_device.dart'; // 设备信息插件包
import 'package:flutter_ume_kit_console/flutter_ume_kit_console.dart'; // debugPrint 插件包
import 'package:flutter_ume_kit_dio/flutter_ume_kit_dio.dart'; // Dio 网络请求调试工具

class AppStart {
  static void run() {
    //捕获异常
    catchException(() => init().then((e) => {
      if (F.isPrd) {
        runApp(const MyApp())
      }else{
        PluginManager.instance                                 // 注册插件
          ..register(const WidgetInfoInspector())
          ..register(const WidgetDetailInspector())
          ..register(const ColorSucker())
          ..register(AlignRuler())
          ..register(const ColorPicker())                            // 新插件
          ..register(const TouchIndicator())                         // 新插件
          ..register(Performance())
          ..register(const ShowCode())
          ..register(const MemoryInfoPage())
          ..register(CpuInfoPage())
          ..register(const DeviceInfoPanel())
          ..register(Console()),
        runApp(
          const UMEWidget(
            child: MyApp(),
            enable: true
          )
        ) // 初始化
      }
    }));
  }

  ///启动前准备-可在此初始化信息
  static Future init() async {

  }
  ///异常捕获处理
  static void catchException<T>(T Function() callback) {
    //捕获异常的回调
    FlutterError.onError = (FlutterErrorDetails details) {
      reportErrorAndLog(details);
    };
    runZonedGuarded<Future<void>>(
      () async {
        callback();
      },
      (Object obj, StackTrace stack) {
        var details = makeDetails(obj, stack);
        reportErrorAndLog(details);
      },
      zoneSpecification: ZoneSpecification(
        print: (Zone self, ZoneDelegate parent, Zone zone, String line) {
          collectLog(parent, zone, line); // 收集日志
        },
      ),
    );
  }

  //日志拦截, 收集日志
  static void collectLog(ZoneDelegate parent, Zone zone, String line) {
    parent.print(zone, "日志拦截: $line");
  }

  //上报错误和日志逻辑
  static void reportErrorAndLog(FlutterErrorDetails details) {
    print(details);
  }

  // 构建错误信息
  static FlutterErrorDetails makeDetails(Object obj, StackTrace stack) {
    return FlutterErrorDetails(stack: stack, exception: obj);
  }
}

????????

启动app即可看见字节跳动的调试工具

三、图片配置

? ? ? ? 打开pubspec.yaml文件,找到assets:节点,在此指定静态资源的路径,如下所有的静态图片存放在以下两个路径。

  assets:
    - assets/images/
    - assets/icon/

使用图片

Image.asset(
           'assets/images/jidonglog.png',
            height: 30,
            width: 30,
          );

四、配置阿里图标库

????????打开pubspec.yaml文件,找到fonts:节点,在此指定图标库文件的路径。、

  fonts:
    - family: iconfont
      fonts:
        - asset: assets/iconfont/iconfont.ttf

使用图标库,将&#xe8f1中&#替换成0

Icon(
    IconData(0xe8f1,fontFamily:'iconfont'),
     color: UserColor.color_1,
     size:15
);

五、语言汉化

MaterialApp(
    locale: Locale('zh', 'CN'),
      localizationsDelegates: const [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
      ],
      supportedLocales: const [
        Locale('zh', 'CN'),
      ],
)

  移动开发 最新文章
Vue3装载axios和element-ui
android adb cmd
【xcode】Xcode常用快捷键与技巧
Android开发中的线程池使用
Java 和 Android 的 Base64
Android 测试文字编码格式
微信小程序支付
安卓权限记录
知乎之自动养号
【Android Jetpack】DataStore
上一篇文章      下一篇文章      查看所有文章
加:2022-05-14 10:04:13  更:2022-05-14 10:05:50 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/25 1:41:47-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码