正文
flutter首页模块,flutter基础组件
小程序:扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序
【扫一扫了解最新限行尾号】
复制小程序
Flutter初步探索(二)使用Tabs
在Material的设计准则里面,tabs是一个常用的模块。Flutter里面包含了 material library 创建tab布局的简便方法
为了使tab起作用,我们需要保持选中的tab和相关内容同步。这就是 TabController 的职责。
我们可以手动创建 TabController ,也可以使用 DefaultTabController 小部件。使用 DefaultTabController 是最简单的选项,因为它将为我们创建一个 TabController ,并使它可用于所有子类Widget。
现在我们已经有个一个 TabController ,我们可以 TabBar Widget去使用创建我们的tab。在这个示例中,我们将会在一个 AppBar 下.创建一个包含3个 Tab Widgets 的 TabBar 。
默认情况下, TabBar 在Widget树中查找最近的 DefaultTabController 。如果是手动创建的 TabController ,则需要将其传递到“TabBar”。
既然我们有了选项卡,那么我们就需要在选择选项卡时显示相关的内容。因此,我们将使用 TabBarView Widget.
备注: 顺序很重要,必须与 TabBar 中的选项卡的顺序相对应!
1. Flutter初步探索(二)使用Tabs
1. Working with Tabs
Flutter初始化
新建一个Flutter工程,android模块。
1,只有一个Activity组件,它是Dart层绘制Widget的容器。
2,Application配置FlutterApplication。
应用Application配置io.flutter.app.FlutterApplication类,App首次启动时,初始化。
调用FlutterMain.startInitialization()方法。
initConfig方法,从AndroidManfest.xml配置的applicaion节点获取meta-data数据,初始化以下默认值。
这些值都是使用中用到的name,例如,抽取apk中asset资源时,flutter_assets打包目录,打包产物data名称。
initResources方法, 初始化资源。
在Flutter打包apk的asset目录下,包括fluttter_asset目录/资源项,将资源从apk中抽取,保存在 Context.getDir("flutter", 0) 目录下。
/data/user/0/包名/app_flutter目录。
在目录中创建一个时间戳文件,根据apk版本和包信息记录的lastUpdateTime更新时间,第二次启动时,若apk未更新,不需要再次抽取。
加载so库,libflutter.so,System.loadLibrary()。
主页面继承FlutterActivity,配置启动模式singleTop。
FlutterActivity类在io.flutter.app包, (区别io.flutter.embedding.android包), 组件生命周期委托给FlutterActivityDelegate类。
组件启动,onCreate方法。
FlutterMain.ensureInitializationComplete方法,确保资源成功抽取完成,创建FlutterView视图(io.flutter.view),继承SurfaceView类,setContentView方法,设置组件主布局即FlutterView视图。
最后,根据Bundle路径,runBundle()加载运行,
调用FlutterView的runFromBundle方法,入口点在dart的main方法,
通过FlutterNativeView,调用FlutterJNI的native方法。
nativeRunBundleAndSnapshotFromLibrary方法。
任重而道远
Flutter/IOS混和开发情况下,项目内首个Flutter页面导航无返回问题
在Flutter内部机制中,默认使用自动管理导航机制,该机制在Flutter与原生混和开发情况下,Flutter页面不一定作为项目的首页面,所以出现需要在首个Flutter页面使用导航返回的需求。
Flutter的AppBar中定义有属性:
该属性默认为YES,即默认为自动管理导航栏,该情况下其会在非第一个Flutter页面创建导航返回按钮,我们在AppBar中将其设置为false:
并且手动添加导航返回按钮:
完成
Flutter开发--如何布局?
相对于iOS开发,Flutter的布局更具有灵活性,每个页面设计都不一样,相同页面可选择的布局方式也不一样,如果单纯的说应该如何去布局,我觉得不现实,大家可以参考下 Flutter官方的布局教程 。接下来,笔者,通过项目中的一个页面,来一步一步的拆解布局的流程。整个过程,基本上按照拆解、组件封装、具体布局这三步来的。
根据设计图,可以看出整体可以分成两部分,上面一部分是系统介绍模块,下面一部分是真正的登录内容,因为涉及到叠加,因此考虑用Stack;
系统介绍模块部分:整体也是涉及到叠加,考虑用Stack,分为四部分。最底部渐变色背景用一个contanier,无须指定位置,全视图扩展;载放logo图标在上一层,用Image。最后两个Text同级放在最上层。Image,Text各用Positioned包裹去指定位置。
登录内容模块是最外层是一个Contanier容器,去控制背景色和圆角。然后是一个Column元素,逐行排列。
第一行为Image,
第二行为Text,
第三行可以看成一个小Column,分两块进行布局
第四行可以看成一个小Column,分两块进行布局
第五行可以看作一个TextButton,
第六行可以看作一个Row,分三块进行布局
通过上面这样一步一步的分析后,基本上对大致的布局有了一个了解,最外层的控件大致选对(只要能实现的话,就是复杂度以及效率的问题),然后一步一步的拆解每一行的元素,如果有重复的或者觉得可以封装出来的部分,则进行下一步。
每一行的拆解,大致也是按照这个思路来进行,因此笔者在这里就不做讲解了。
在做到第三第四行的时候,发现这两个很相似,而且设计到一些交互逻辑,笔者就想对第三第四行的这种展示进行封装,觉得今后的布局可能会用到,因此在这一步,可以先把这一块儿抽离出一个控件。利用TextField来实现这种输入操作,具体的实现笔者不再详细的描述了。
经过这一步,整体的规划设计图已经有了,各个组件也都有了,接下来的工作就是组装了。
具体布局设计到一些细节的地方,例如整体Column的居中对齐(crossAxisAlignment)、间隔(Padding或Container包裹,笔者更喜欢用SizedBox占位)、居左居右居中(Align)、点击事件(GestureDetector)以及圆角(BorderRadius)等一些特殊情况。
像第六行row是放在底部的,就可以在第六行前面增加一个Spacer()去填充空白区域。
对文字颜色大小等,可以用TextStyle直接设置。
对于输入框的删除按钮,可以用Offstage这种Flutter特有的控制显示隐藏的控件。