美文网首页
Flutter 项目的一些问题记录

Flutter 项目的一些问题记录

作者: sun_argc | 来源:发表于2020-09-10 16:46 被阅读0次

    While there is life,there is hope.
    一息若存,希望不灭。

    前言

    基于flutter每个版本可能会出现语法或者底层变动导致的项目的不正确性,记录的问题可能因版本不会出现同类问题,因此记录一下当前项目的版本flutter为1.17.1,dart为2.8.2。

    记录

    一:flutter中关于手势事件onTap刚进build就会调用

    GestureDetector中的onTap用的是方法时,会在build时直接调用一次,在(){}里调用即可
    onTap: () {
         // 不会出现问题
         _xxxfunc();
    },
    // 会直接调用
    onTap: _xxxfunc  
    

    二:flutter Android的webview会受到iOS的info.plist的io.flutter的缺失导致加载不出来

    // 在info.plist里加入
    <key>io.flutter.embedded_views_preview</key>
    <string>YES</string>
    

    三:flutter中关于软键盘弹起导致Android页面闪动的问题

    原因:
    1. 当布局高度写死时,例如设置为屏幕高度,这时候键盘弹起页面上会出现布局overflow的提示
    2. 软键盘弹起后遮挡输入框
    在flutter中,键盘弹起时系统会缩小Scaffold的高度并重建界面导致Android的闪动,iOS不会因为键盘重绘界面
    
    方法1:
    overflow提示的两种办法:
    1)把Scaffold的resizeToAvoidBottomInset属性设置为false,这样在键盘弹出时将不会resize
    2)把写死的高度改为 原高度 - MediaQuery.of(context).viewInsets.bottom,键盘弹出时布局将重建,
    而这个MediaQuery.of(context).viewInsets.bottom变量在键盘弹出前是0,键盘弹起后的就是键盘的高度
    
    方法2:
    将输入框放进可滚动的Widget中即可,当输入框获取焦点后,系统会自动将它滑动到可视区域
    

    四:flutter中double转成int

    如果是使用 num 声明的变量,可以随意的转换类型,
    但是如果是使用了int 或者 double 明确的声明,那么就只能通过截取手段了,所以一般情况使用num去接收;
    // 截取方法:
    String str = double.toStringAsFixed(0);
    int value = int.tryParse(str);
    

    五:flutter tabBarView切换页面 页面会重绘

    方法1:
    1).被重绘的tab页要 混入AutomaticKeepAliveClientMixin
    // with 混入
    class DevicePageLayout extends  WidgetState<DevicePage>  with AutomaticKeepAliveClientMixin
    
    2).实现wantKeepAlive方法 ,返回值改成true
    @override
    // TODO: implement wantKeepAlive
    bool get wantKeepAlive => true;
    
    3).build中加入 super.build(context);
    @override
    Widget build(BuildContext context) {
        super.build(context);
    }
    
    方法2:
    使用IndexedStack来保证页面不会被重绘。
    

    六:flutter Text带黄线

    decoration: TextDecoration.none,
    

    七:flutter text overflow 总是会超出布局

    今天使用横向布局row 并且在里面添加了一个图标和一行文字,但是总是会超出布局,即使设置了overflow再调试时也会出现如下的情况

    Row(
      crossAxisAlignment: CrossAxisAlignment.center,
      children: <Widget>[
           Image.asset(
               "images/list_icon.png",
               width: 10,
               height: 10,
               fit: BoxFit.fill,
           ),
           Text(
               "  "+hotService[index]['servicename'],
               maxLines: 1,
               overflow: TextOverflow.ellipsis,
           )
       ],
    ),
    

    解决方法:
    在Text外面包一层Expanded

    八:iOS和Android打出的release包太大

    1、删除无用代码和无用资源
    2、压缩资源图片或者使用svg格式图片
    3、服务端下发插件或者资源
    如果上面方法不理想的话,通过iOS和Android各自减少cpu架构可以极大的减少app体积

    Android方案:

    1、so优化:Flutter打包Apk会包含三种CPU架构信息以适配不同架构的设备(x86_64,arm64-v8a,armeabi-v7a),目前大部分手机都是armeabi-v7a这个架构,所以我们可以分架构分别打包,包体减小较明显,但是需要舍弃小部分机型

    打包命令:flutter build apk --target-platform android-arm,android-arm64,android-x64 --split-per-abi

    • 首先 flutter build apk 表示当前构建 release 包;
    • 后面 android-arm,android-arm64,android-x64则是指定生成对应架构的release包;
    • 最后的 --split-per-abi则表示告知需要按照我们指定的类型分别打包,如果移除则直接构建包含所有 CPU 架构的 Apk 包。

    2、混淆:可以增加逆向难度还有减少Apk大小

    混淆打包命令():flutter build apk --obfuscate --split-debug-info=xx

    • --obfuscate:开启混淆操作;
    • --split-debug-info=:将因混淆生成的 map 符号表缓存到此位置

    so优化和混淆同时使用打包命令:flutter build apk --obfuscate --split-debug-info=debugInfo --target-platform android-arm,android-arm64,android-x64 --split-per-abi

    PS:经过测试android原debug包 104.9MB ,release包 73.5MB ,如果仅仅使用v7a架构包大小为 29.1MB

    iOS方案:

    1、配置编译选项

    Build Settings->Generate Debug Symbols 设置为NO,这个配置选项应该会让你减去小半的体积。

    2、舍弃架构armv7

    Build Settings->Valid Architectures 删除armv7 cpu架构

    3、编译器优化级别

    Build Settings->Optimization Level有几个编译优化选项,release版选择Fastest, Smalllest[-Os],这个选项会开启那些不增加代码大小的全部优化,并让可执行文件尽可能小

    4、去除符号信息

    Strip Debug Symbols During Copy 和 Symbols Hidden by Default 在 release 版本设为YES,可以去除不必要的调试符号。

    5、release缩减 product

    Build Settings->Strip Linked Product:debug下设为NO,release下设为YES,用于release模式下缩减app的大小.

    九:flutter判断iOS机型

    // 在SafaArea中获取不到
    if (Platform.isIOS) {
      final double bottomPadding = MediaQuery.of(context).viewPadding.bottom;
      top = bottomPadding >= 34 ? 40 : 0;
      height = bottomPadding >= 34 ? 680 : 580;
      rechargeHeight = bottomPadding >= 34 ? 280 : 260;
    }
    

    十:升级flutter为1.20.0,运行项目报错

    解决过程:
    修改项目目录android/build.gradle里的maven仓库 无效!!!

    flutter的issue搜索问题: Could not resolve the package ‘characters’ in ‘package:characters/characters.dart’.

    解决方法,运行如下命令:
    flutter pub cache repair
    flutter clean

    相关文章

      网友评论

          本文标题:Flutter 项目的一些问题记录

          本文链接:https://www.haomeiwen.com/subject/cnspektx.html