5、Flutter 实现 ViewPager、bottomNavigationBar 界面切换
1、前言
首先我们想一下,如果在 Android 中实现 布局切换,通常的思路是:
- 做一个 viewpager
- 一组 Fragment
- 每个 Fragment 绑定一个 xml
- 最后填充至 viewpager
2、Flutter 实现
上边提到的用安卓原生做,思路是很明确,但是代码量还是有的,那么来看一下, Flutter 如何使用 Viewpager 实现的。
2.1、创建有状态 Widget
首先创建有状态 StatefulWidget,然后构建 state:_ApplicationPageState
class ApplicationPage extends StatefulWidget {
//@override
//_ApplicationPageState createState() => new _ApplicationPageState();
等同于上边注释掉的 createState();
@override
State<StatefulWidget> createState() {
// TODO: implement createState
return _ApplicationPageState();
} }
2.2、state
Scaffold 实现了基本的纸墨设计布局结构。所以我们 new Scaffold 然后 return 即可。
class _ApplicationPageState extends State<ApplicationPage> { int _currentPageIndex = 0;
var _pageController = new PageController(initialPage: 0); @override
Widget build(BuildContext context) {
return new Scaffold(
appBar:
new AppBar(
title: new Text("我是AppBar"),
centerTitle: true,
),
body: new PageView.builder(
onPageChanged:_pageChange,
controller: _pageController,
itemBuilder: (BuildContext context,int index){
return index==1?new Text("我是第一页"):new Text("我是第二页");
},
itemCount: 2,
),
bottomNavigationBar: new BottomNavigationBar(items: [
BottomNavigationBarItem(
icon: new Icon(Icons.category), title: new Text("首页")),
BottomNavigationBarItem(
icon: new Icon(Icons.message), title: new Text("我的")),
],
currentIndex: _currentPageIndex,
onTap: onTap,
),
);
} // bottomnaviagtionbar 和 pageview 的联动
void onTap(int index) {
// 过pageview的pagecontroller的animateToPage方法可以跳转
_pageController.animateToPage(index,
duration: const Duration(milliseconds: 300), curve: Curves.ease);
} void _pageChange(int index) {
setState(() {
if (_currentPageIndex != index) {
_currentPageIndex = index;
}
});
} }
关于上边有几个方法:
- appBar:显示在界面顶部的一个 AppBar,也就是 Android 中的 ActionBar 、Toolbar
- body:当前界面所显示的主要内容 Widget
- bottomNavigationBar: 显示在页面底部的导航栏
2.3、navBar和pageview如何联动?
通过上边的代码也可以发现,pageView有个 onPageChanged 属性,并且类中定义了一个 _pageChange 方法,
通过 pageview 的 pagecontroller 的 animateToPage 方法实现的界面跳转;
5、Flutter 实现 ViewPager、bottomNavigationBar 界面切换的更多相关文章
- 自定义viewpager的界面切换动画
核心操作: 1.创建一个类实现 android.support.v4.view.ViewPager.PageTransformer 根据 position 实现判断哪个界面进行界面切换动画 publi ...
- Flutter -------- BottomNavigationBar 界面切换
Android 中有BottomNavigationBar+Fragment切换 而在Flutter也有的BottomNavigationBar 效果图 底部有两种情况 底部导航栏的类型更改其项目的显 ...
- 给 Flutter 界面切换来点特效
本文微信公众号「AndroidTraveler」首发. 背景 我们知道页面之间如果直接切换,会比较生硬,还会让用户觉得很突兀,用户体验不是很好. 因此一般情况下,页面之间的切换为了达到平滑过渡,都会添 ...
- Unity iOS混合开发界面切换思路
Unity iOS混合开发界面切换思路 最近有很多博友QQ 私信 或则 留言联系我,请教iOS和Unity界面之前相互切换的问题,源代码就不私下发你们了,界面跳转功能的代码我直接贴到下面好了,顺带说i ...
- Linux启动界面切换:图形界面-字符界面(转)
Linux字符界面切换到图形界面 由字符界面切换到图形界面可用两种简单方法实现: 1.在字符界面输入startx或init 5 . 2.通过编辑/etc/inittab文件实现默认进入图形界面. 把其 ...
- Html5 Egret游戏开发 成语大挑战(五)界面切换和数据处理
经过前面的制作,使用Egret的Wing很快完成了开始界面和选关卡界面,下面通常来说就是游戏界面,但此时界面切换和关卡数据还没有准备好,这次讲解界面的切换和关卡数据的解析.前面多次修改了Main.ts ...
- Android ViewPager实现选项卡切换
ViewPager实现选项卡切换,效果图如下: 步骤一:这里使用兼容低版本的v4包进行布局,这里eclipse没有输入提示,所以要手动输入,文件名称“activity_main.xml” <Re ...
- android笔记:ViewPager实现界面的滑动
最近在学习ViewPager实现界面的滑动,拜读了郭神的博客文章,并抽取归纳了自己对ViewPager的理解. ViewPager实现界面滑动的步骤如下: 1.在xml布局内加入控件android.s ...
- php-- Linux图形界面与字符界面切换
转自:http://blog.163.com/wang_ly2442/blog/static/9494340720128355054551/ 1. 启动时进入字符界面,后来想切换到图形界面:使用sta ...
随机推荐
- 20.1翻译系列:EF 6中自动数据迁移技术【EF 6 Code-First系列】
原文链接:https://www.entityframeworktutorial.net/code-first/automated-migration-in-code-first.aspx EF 6 ...
- 您还差宝贝一张语文教学光盘!教你如何制作ISO文件
1 大家没有发现 宝宝初上小学无法专心地做作业.读书? 我家的宝贝就是这样 做作业时 总是东搞搞,西弄弄 完全无法专心 再不就是不耐心 读一遍课本就觉得累 读三两遍就说学习是个苦差事儿 2 一直以来 ...
- [ci]容器ci索引
伙计们: 有任何意见或建议或看不懂的请在对应的文章下留言(请注明上下文) 我会及时改动. 这是以前的一些在物理机上搞过 [ci]容器ci索引 http://www.cnblogs.com/iiiihe ...
- crawler_exa3
优化中... #! /usr/bin/env python # -*- coding:utf-8 -*- # Author: Tdcqma ''' v1.0: 由于网站结构存在变更的可能性,一旦爬虫爬 ...
- 浅谈.net中数据库操作事务
.net中的事务 关键几点 概念:1:什么是事务 2:什么时候用事务 3:基本的语法 (1): 事务(Transaction)是访问并可能更新数据库中各种数据项的一个程序执行单元(unit).事务通常 ...
- idea 下 encodings.xml 的正确位置
在多个module存在的情况下 encodings.xml在 project 下的.idea 下面 这个就是最父级project
- mysql 批量导入 Packets larger than max_allowed_packet are not allowed
解决方法 :http://blog.csdn.net/gtosky4u/article/details/8581281
- websocket Tomcat JSP Demo
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...
- [原]Jenkins(一)---我理解的jenkins是这样的(附全套PDF下载)
/** * lihaibo * 文章内容都是根据自己工作情况实践得出. *版权声明:本博客欢迎转发,但请保留原作者信息! http://www.cnblogs.com/horizonli/p/5330 ...
- [Sublime] Sublime Text 3126 lincense
—– BEGIN LICENSE —– Michael Barnes Single User License EA7E- 8A353C41 872A0D5C DF9B2950 AFF6F667 C45 ...