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()
        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
    with  AutomaticKeepAliveClientMixin{
  @override
  bool get wantKeepAlive => true;

并且在build方法里面调用super方法
  Widget build(BuildContext context) {
    super.build(context);

你可能感兴趣的:(flutter踩坑)