Flutte系列笔记--实战项目中遇到的问题

老李code
375 阅读3分钟

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第2天，点击查看活动详情。

新手入门Flutter一些常见的问题总结，希望能帮到大家。

实战项目入门一些常见问题

  • 布局溢出 边框出现黄色条纹

  • 原因：组件本身的宽、高没有确定从而大于屏幕尺寸导致布局溢出。
  • 解决方法：给定宽高度或者套用滑动组件即可。

  • 黑屏黄字

  • 原因：这是Flutter默认的风格，根布局没有加入Material风格或者iOS风格组件导致。
  • 解决方案：加上主题风格根布局。

  • 进入页面弹窗报错

  • 原因：在initState方法内弹窗，因build方法还没执行完，页面还没加载完毕就加载弹窗导致。
  • 解决方案：在build执行完毕的回调中进行弹窗操作。

WidgetsBinding.instance?.addPostFrameCallback((timeStamp) {
/// 执行弹窗操作
}

  • iOS上点击其他地方不关闭软键盘

  • 原因：在有输入框的页面，iOS 中需要我们自己去处理键盘的弹出与关闭，Android部分系统自动处理了。
  • 解决方案：参考以下代码，在页面根布局套用KeyboardDismissOnTap插件统一处理即可。
  • 参考插件：flutter_keyboard_visibility
// 点击其他部位关闭键盘
return ```
// 点击其他部位关闭键盘
return KeyboardDismissOnTap(
    child: Material(
        color: Theme.of(context).backgroundColor,
        child: Stack(
          children: [child, _page(context)],
        )));
```(
    child: Material(
        color: Theme.of(context).backgroundColor,
        child: Stack(
          children: [child, _page(context)],
        )));

  • 资源文件获取不到

  • 原因：配置文件没有声明
  • 解决方案：配置文件进行声明即可，例如：下方声明images下全部文件
assets:
  - assets/images/

  • 引入插件失败

image.png

  • 原因：未对齐左侧，yaml文件对缩进字符有非常严格的要求。对齐即可。 image.png

  • Contailer color设置无效

  • 原因：可能你设置了 decoration 样式，decoration与color互斥。

  • 解决办法：使用decoration里的color值。

  • setState()刷新无效

  • 原因：1、页面传值，A页面传递B页面，在A页面刷新，setState只会更新build方法，不会刷新B页面的构造方法，所以数据不会更新。

  • 解决办法：使用状态管理组件进行刷新，建议一般情况下，如果不是刷新整个页面，尽量不使用setState()方法。 参考链接：juejin.cn/post/706336…

  • 原因：2、异步函数中调用，setState一定要放到主线程去调用才会更新页面。

  • 解决办法：在异步函数回调中更新页面.

.then((value){
 setState()
}

总结

实战开发中，我们需要对Android、iOS原生知识有一个初步的了解，至少对一端有比较深刻的理解才能更好的利用Flutter进行跨平台开发，实际开发过程中，遇到问题在所难免，不过目前我遇到的所有问题基本都很好的解决了，包括官方的bug，（被我们中文社区技术大牛的修复了，点名表扬），之后我可能会分享一些我所用到的一些第三方功能比如：地图、统计、推送等遇到的一些问题以及解决方案。End

avatar
文章
阅读
粉丝