flutter踩坑

1. 三方库使用:

https://pub.dev/ 这上面有丰富的flutter三方库及评分

2. 图片设置格式问题

assets:
  - images/icon_no_data.png
  - images/icon_logo_small.png

///如果格式不是这个图片显示不出来,如少空格等;
需要在pubspec.yaml中添加图片,不需要@2x这种

图片资源很多的时候不想每张图片都去声明呢,这时候可以只需要声明文件夹,这样就会把文件夹里面所有资源识别到,就像这样:

assets:
    - images/
    - images/2.0x/
    - images/3.0x/

3. 使用FlutterEngine

使用FlutterEngine方式,调用 setInitialRoute 方法会无效,在Flutter端拿到的永远是“/”根目录符号,这是Flutter SDK的一个BUG,因此如果必须依赖 setInitialRoute 参数,那么可以使用直接 new FlutterViewController再使用路由

// 这种 setInitialRoute不生效 
func handleButtonAction() {
        let flutterEngine = (UIApplication.shared.delegate as? AppDelegate)?.flutterEngine
        let flutterViewController = FlutterViewController(engine: flutterEngine, nibName: nil, bundle: nil)!
        flutterViewController.setInitialRoute("test1")

        self.navigationController?.pushViewController(flutterViewController, animated: true)
    }
// new FlutterViewController
 @objc func handleButtonAction2(){
        let flutterViewController = FlutterViewController()
        flutterViewController.setInitialRoute("test1")
        
        self.navigationController?.pushViewController(flutterViewController, animated: true)
    }

4. native给flutter交互传值

setMethodCallHandler result native原生给flutter传值 json类型的value需要转为string类型

// 路由
    func configRoute() {
        var initialRoute = Dictionary<String, String>()
        initialRoute["pageRoue"] = "order_list_page"
        initialRoute["url"] = "t8x"
        self.setInitialRoute(initialRoute.ff_toJson())
    }

5.热更新

Only Flutter apps in debug mode can be hot reloaded. 只有==debug==模式下可用

6.debug和release模式

Debug 模式对应Dart的 JIT 模式,该模式会打开所有的断言(assert),调试信息等,并支持 Hot reload(热重载),但是并没有优化代码执行速度、二进制包大小和部署,所以在debug模式下我们会感觉到卡顿,不流畅等问题

Release模式对应Dart的 AOT 模式,该模式会关闭所有断言,尽可能多的调试信息。此外还优化了应用快速启动,代码快速执行,以及二进制包的大小,所以在release模式下,才是Flutter真正的实力,非常流畅。

7. 混编页面黑屏

iOS和flutter混编加载页面,iOS需要设置页面颜色,否则会闪黑屏

8.Listview监听滚动状态

child: NotificationListener(
  onNotification: (notification){
    switch (notification.runtimeType){
      case ScrollStartNotification:
       debugPrint("开始滚动");
        break;
      case ScrollUpdateNotification:
        debugPrint("正在滚动");
        break;
      case ScrollEndNotification:
        debugPrint("结束滚动");
        break;
      case OverscrollNotification:
        debugPrint("滚动到边界");
        break;
    }
  },
  child: ListView.builder(
    
  ),
));

9.热更新Error -32601 received from application: Method not found

flutter pub cache repair
flutter clean

10. 第一次加载flutter页面显示ios启动图

需要注意的是iOS原生跳转flutter时,第一次跳转会异步渲染flutter环境,因此,FlutterViewController实例有个splashScreenView属性,防止用户在打开flutter页面时会有一个中间的空档,如果我们没有设置此属性,iOS默认将app应用的LaunchStoryboard设置为此属性的值,默认可能设置成功也可能设置失败,取决于你APP的启动图片是否是用LaunchStoryboard来设置的,所以,没有特殊情况,最好手动设置一下此属性;

11. 混合栈问题

使用马蜂窝App方案,一个 Native 页面(ios vc 安卓activity/fregment)对应一个 flutter 页面;
问题:在跳转时候,由于原生导航栈push有动画效果,之前使用 MaterialPageRoute 路由也有默认动画,导致有两个动画
解决:flutter修改路由为 PageRouteBuilder ;自定义路由,默认无动画效果

在项目中建议使用闲鱼团队出的 flutterboost 框架,非常方便进行路由管理及解决混合栈问题。

12、iOS风格的AppBar

/**
 *  iOS风格导航栏
 *
 * const CupertinoNavigationBar({
    Key key,
    this.leading,//导航栏左侧组件
    this.automaticallyImplyLeading = true,//是否显示左边组件
    this.automaticallyImplyMiddle = true,//是否显示中间组件
    this.previousPageTitle,//导航栏左侧组件的右边的文本
    this.middle,////导航栏中间组件
    this.trailing,////导航栏右侧组件
    this.border = _kDefaultNavBarBorder,//
    this.backgroundColor = _kDefaultNavBarBackgroundColor,//背景色
    this.padding,//
    this.actionsForegroundColor = CupertinoColors.activeBlue,//左侧默认组件和左侧组件右边文本的颜色
    this.transitionBetweenRoutes = true,//
    this.heroTag = _defaultHeroTag,//transitionBetweenRoutes:false时才能设置
    })
 */
return new Scaffold(        
        appBar: new CupertinoNavigationBar(
          middle: new Text('test'), //title
          trailing: Material(child: IconButton(icon: Icon(Icons.settings))), //右侧导航icon      
        ),
 
        body: Text('test'),

13、TabBarView使用问题

在上下联动的结构中,使用到 TabBarView 组件,该组件切换的时候,每次都会重新触发子组建的initState方法
这时候可以设置

class OrderListState extends State<OrderListView>
    with  AutomaticKeepAliveClientMixin{
  @override
  bool get wantKeepAlive => true;

并且在build方法里面调用super方法
  Widget build(BuildContext context) {
    super.build(context);
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,340评论 5 467
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,762评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,329评论 0 329
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,678评论 1 270
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,583评论 5 359
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 47,995评论 1 275
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,493评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,145评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,293评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,250评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,267评论 1 328
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,973评论 3 316
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,556评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,648评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,873评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,257评论 2 345
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,809评论 2 339

推荐阅读更多精彩内容