Flutter 开发项目(一)

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


4182047-38a7e7728aa641d4.png
app启动的图片(图片截图于实际项目不过多展示)


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


4182047-3a4b2ba6a6cba2b5.png
此图来自实战项目

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

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


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

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

4182047-3e37ad8cbd8db033.png
WillPopScope类中onWillPop方法的具体实现

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

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

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

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

猜你喜欢

转载自blog.csdn.net/weixin_33935505/article/details/87219274