刚入门Flutter3个月,终于进入项目打包阶段,发现之前编译环境下都正常的UI,忽然有小部分出现异常,不显示UI部分了。查了2个小时都没发现原因。因为编译环境下,Android、iOS端都正常显示。但是进入打包安装后,iOS端就出现了异常。这种情况很神奇,一时摸不着头脑。
最后经过反复试验代码,分割替换代码,发现原来是自己前期刚学时写的代码不规范。UI嵌套部分,没有遵守Flutter的规则。接下来拿出代码示例:
错误的示范:Scaffold->Column->Position
return Scaffold(backgroundColor: Colors.black,body: Column(children: [Selector<GlobalData, int>(builder: (context, Cct, child) {return ctCtrol;},selector: (context, model) => model.Cct),Selector<GlobalData, int>(builder: (context, Temp, child) {return ctCtrol;},selector: (context, model) => model.Temp),const SizedBox(height: 20),Positioned(left: ScreenUtil().setWidth(70),width: (AppDataSingleton.getInstance().screenWidth,bottom: ScreenUtil().setHeight(75),child: CTSceneBar(onSceneBarSelected: (model) {},)),],),);
首先Column中嵌套Position是不正确的。虽然编译时没有报错,也可以正常显示,但是打包后,就不会显示这种非正确的UI嵌套。这种问题,对于初学者来说很容易犯,并且不容易发现。
以上代码的正确方式:就是去除Position嵌套。