189 8069 5689
MaterialApp 是我们app开发中常用的符合MaterialApp Design设计理念的入口Widget。MaterialApp这个组件里面的参数比较多，而且一般在应用入口会用到，所以这里把它内部的所有参数都列出来了
创新互联建站是一家集网站建设,木兰企业网站建设,木兰品牌网站建设,网站定制,木兰网站建设报价,网络营销,网络优化,木兰网站推广为一体的创新建站企业，帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿，时刻以成就客户成长自我，坚持不断学习、思考、沉淀、净化自己，让我们为更多的企业打造出实用型网站。
基本用法：
可以看到我们在 App 的最外层直接使用了 MaterialApp ，可以指定App的名称（ title ），App的主题样式（ theme ），首页的组件（ home ），路由跳转配置）（ routes ），关于路由跳转我们在后面的章节中会介绍
Scaffold 实现了基本的 Material Design 布局结构， Scaffold 在英文中的解释为角手架，我们可以理解为楼体中的钢架结构，通过它可以构建一个页面
在Flutter应用开发中，我们可以将 Scaffold 理解为一个布局的容器。可以在这个容器中绘制我们的用户界面
下面是 MaterialApp + Scaffold 的组合的基本用法
AppBar 就是顶部的导航栏组件，支持自定义标题，左右两侧的工具栏按钮等
BottomNavigationBar 是底部的菜单栏组件
使用方法：
一般我们会定义一个全局变量如 _currentIndex 用于记录当前选中的下标。然后在 onTap 属性的回调方法中调用
setState(() { _currentIndex = index;}); 更新 _currentIndex 就可以实现底部菜单的切换。 BottomNavigationBar 一般会配合 BottomNavigationBarItem 一起使用（如下所示）
RefreshIndicator 是Flutter中的下拉刷新组件，一般配合 ListView 组件一起使用
Image 就类似于android中的 ImageView ，可以自定义图片显示的宽高
从网络中加载图片
从本地（File文件）加载图片
从本地资源加载图片
可以将byte数组加载成图片
TextField 就类似于android的 EditText
PageView 就类似于android中的 ViewPager
场景：多个组件共用一个状态，子组件通过方法改变父组件状态
思路：状态和管理方法定义在父组件，通过构造函数传递给子组件
其他子组件按照同样方法接收即可共用该父组件的状态。
背景：flutter组件嵌套都很深，依次传递数据很麻烦，所以最好是能够跨组件传递。有三张跨组件的方式：InheritedWidget、Notification、Eventbus.
是一种自上而下的传递数据的方式。
使用步骤：
它的数据流动方式和InheritedWidget刚好相反，从子控件向上面传递。
具体使用
跟android 原生的eventbus原理和使用一样。
ListTile 通常用于在 Flutter 中填充 ListView。在这篇文章中，我将用可视化的例子来说明所有的参数。
title 参数可以接受任何小部件，但通常是文本小部件
副标题是标题下面较小的文本
使文本更小，并将所有内容打包在一起
将图像或图标添加到列表的开头。这通常是一个图标。
设置拖尾将在列表的末尾放置一个图像。这对于指示主-细节布局特别有用。
设置内容边距，默认是 16，但我们在这里设置为 0
如果选中列表的 item 项，那么文本和图标的颜色将成为主题的主颜色。
ListTile 可以检测用户的点击和长按事件，onTap 为单击，onLongPress 为长按。对于波纹效果是内置的
通过将 enable 设置为 false，来禁止点击事件
静态方法 divideTiles 可以在 titles 之间添加分隔符，这个颜色有点淡，需要看仔细点才能看出来，哈哈哈哈
TextFormField继承自FormField，是flutter表单提交相关组件，类似于html中的 input type="text" / ，是个文本输入框。需要在 Form 组件内部使用，否则无法正确提交数据。
未完待续
如果我们目前的项目是Android的，但是接下来我们希望部分页面可以使用Flutter进行开发，甚至我们希望在Native页面中嵌入FlutterUI组件，那么我们该如何实现呢？
假设你现在Android项目的目录的结构是这样的
这时候如果你想创建一个Flutter模块，使得Android模块和Flutter模块之间可以进行交互，我们可以通过Android Studio新建一个Flutter Module，具体过程是：File — New — New Module ，之后选择Flutter Module，指定Project Location的路径为
也就是说，最终你的项目结构会是这样的
接下来在Android Module的 build.gradle 文件中添加flutter依赖
先创建一个Flutter页面
这里比较重要的是 window.defaultRouteName 这个字段，这个字段可以接收从Native传递过来的参数 （下文我们会介绍原生传递参数的方法），也就是说通过这个字段我们就可以进行Flutter页面的路由的分发
我们可以直接在Android的 MainActivity 中启动一个 FlutterActivity ，这里的 initialRoute 方法中传递的参数就对应Flutter层的 window.defaultRouteName
注意：需要在 AndroidManifest.xml 注册 FlutterActivity
自己创建一个 FlutterAppActivity 继承自 FlutterActivity
在 MainActivity 中启动 FlutterAppActivity （另外别忘了在 AndroidManifest.xml 中注册 FlutterAppActivity ）
两种启动方式的区别
如果单纯只是想打开一个Flutter页面，两种方式实际上基本没有太大区别，第一种方式也许还会更简单一点。但是，在Flutter开发中，我们往往还需要开发一些Native插件供Flutter调用，如果使用复写 FlutterActivity 的方式更有利于我们在 FlutterActivity 中注册我们的Native插件，所以实际开发中一般推荐使用第二种方式
扩展思考
initialRoute 从名称上看起来是Flutter提供给我们进行Native与Flutter交互的路由跳转的，但是实际上他就是一个字符串，我们不仅仅可以传递一个路由名称，有时候我们也可以通过这个参数传递一串JSON数据，然后在Flutter端进行解析，这样我们就可以通过这个参数做更多的事情
activity_main.xml
FrameLayout 用于承载Flutter组件
MainActivity.java
使用 FragmentManager 将 FlutterFragment 添加到 FrameLayout 容器中
运行结果
上半部分是原生的TextView，下半部分是Flutter的Text组件
本节主要介绍了Native和Flutter之间的页面跳转，以及同一个页面中Native与Flutter组件的组合。接下来会介绍如何编写Android插件与Flutter进行数据交互