Flutter 开发项目(一)

      我们创建一个Flutter项目后,运行之后是一个空白页面,在lib 目录下有一个main.dart文件,main.dart文件中有一个 main函数,这个函数就是app 启动的入口,和iOS一样,有一个主函数,也是唯一的app入口。


app启动的图片(图片截图于实际项目不过多展示)


此处,runApp 方法,这个方法就是app 界面的入口,在此处他接受一个 MaterialApp 类。上图中  MyApp 返回一个MaterialApp 类型。在MyApp类中,重写Build方法,return 一个MaterialApp即可。如下图。


此图来自实战项目

在MaterialApp 中,需要调节很多参数去实现功能,相关属性可以参考官网中Widget的MaterailApp 学习,再次不做过多阐述。

这里的home 中 就可以展示widget 中的架构去写app 相关界面。


这里提醒一下iOS和安卓的区别,安卓在实体键或者最底下会有三个按钮其中坐左边有个实体键或者虚拟按键,具体功能是pop 控制器,这里有个强制回退界面的功能。再次需要设置Flutter 中一个属性 WillPopScope

在MyHomePage 类中,重写Build 方法,返回 WillPopScope 类,并且实现WillPopScope 中的onWillPop 方法 实现 方法如下图。这样,安卓的返回按键在这个界面就会失效,此时就可以维护好当前界面跳转返回的问题。

WillPopScope类中onWillPop方法的具体实现

在这个MyHomePage 中 的child : 属性中,添加整个App,    Scaffold 相当于iOS的 viewController,可以在这里添加控制器,这里面可以添加很多属性,很多功能直接实现,使用很方便,参考官网,上面已经给与了链接。

这里还有一小细节,阐述一下,一般app 中,刚开始是登录界面,登录界面 Flutter 的textfield ,会自动上浮整个界面,约束溢出,这样,就会出现溢出信息,黄黑条。这里有个小办法可以很好的解决这个问题,就是包一层SingleChildScrollView,这个类是一个简单scrollview ,可以跟随键盘滚动,且不会溢出,很简单。

在Scaffold 的body 中包一层SingleChildScrollView ,可以完美解决上述溢出问题。

这里就进入一个简单的app 界面,之后就可以在child 展示整个app逻辑和界面了。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • flutter 是什么 flutter是Google基于Dart语言开发的移动应用开发框架,在保持原生性能的条件下...
    ChaoWang阅读 5,278评论 0 2
  • 英文官网:https://flutter.io/中文网:https://flutterchina.club/ 首先...
    超威蓝猫l阅读 7,797评论 1 3
  • 1.自理能力得到提升 今年东北的冬天依然很寒冷,是无雪的那种干冷。家长们心疼宝贝把每个孩子武装成小豆包。大棉袄,二...
    吉林付巍巍阅读 3,772评论 3 9
  • 这周的周作业就是冥想十分钟。加入训练营之后也有尝试过冥想,不过时间更短一点,只有5分钟。早上起床后按照要求开...
    慢慢2016阅读 1,337评论 1 0
  • 不少爸妈说,早知道就好了,很多曾经发生过的意外都能避免。 场景1:妈妈厨房做饭时,男宝宝啃咬充电线 亲戚家一位年轻...
    幼儿说阅读 3,411评论 0 1

友情链接更多精彩内容