flutter组件接受,flutter 组件通信

Flutter（二）StatefulWidget基础组件

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

相关问答

Q1: 【Flutter】多组件共用状态，父组件状态传递给子组件

场景：多个组件共用一个状态，子组件通过方法改变父组件状态

思路：状态和管理方法定义在父组件，通过构造函数传递给子组件

其他子组件按照同样方法接收即可共用该父组件的状态。

Q2: Flutter跨组建传递数据的三种方式

背景：flutter组件嵌套都很深，依次传递数据很麻烦，所以最好是能够跨组件传递。有三张跨组件的方式：InheritedWidget、Notification、Eventbus.

是一种自上而下的传递数据的方式。

使用步骤：

它的数据流动方式和InheritedWidget刚好相反，从子控件向上面传递。

具体使用

跟android 原生的eventbus原理和使用一样。

Q3: Flutter组件ListTile 使用说明

ListTile 通常用于在 Flutter 中填充 ListView。在这篇文章中，我将用可视化的例子来说明所有的参数。

title 参数可以接受任何小部件，但通常是文本小部件

副标题是标题下面较小的文本

使文本更小，并将所有内容打包在一起

将图像或图标添加到列表的开头。这通常是一个图标。

设置拖尾将在列表的末尾放置一个图像。这对于指示主-细节布局特别有用。

设置内容边距，默认是 16，但我们在这里设置为 0

如果选中列表的 item 项，那么文本和图标的颜色将成为主题的主颜色。

ListTile 可以检测用户的点击和长按事件，onTap 为单击，onLongPress 为长按。对于波纹效果是内置的

通过将 enable 设置为 false，来禁止点击事件

静态方法 divideTiles 可以在 titles 之间添加分隔符，这个颜色有点淡，需要看仔细点才能看出来，哈哈哈哈

Q4: Flutter组件TextFormField详解

TextFormField继承自FormField，是flutter表单提交相关组件，类似于html中的 input type="text" / ，是个文本输入框。需要在 Form 组件内部使用，否则无法正确提交数据。

未完待续

Q5: Flutter（六）Android与Flutter混合开发（Hybird）

如果我们目前的项目是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进行数据交互