一、

App首页框架搭建--Scaffold与PageView

 

二、

App首页框架搭建--Scaffold与PageView

 

开发导航框架,分为“首页”、“搜索”、“旅拍"、"我的",并实现界面之间的跳转

三、实现首页导航需要哪些材料?

--Scaffold

---BottomNavigationBar

--PageView

---PageController

1、什么是Scaffold widget?

Scaffold 是一个实现了基本的material design的布局结构

App首页框架搭建--Scaffold与PageView

从Scaffold源码中,可以看出它接收如上的几个参数。

appBar:也就是app顶部的NavigavigationBar,如下图所示

 

App首页框架搭建--Scaffold与PageView

 

 

body:除appBar之外的部分,如下图

App首页框架搭建--Scaffold与PageView

 

floatingActionButton:默认情况下会在右下角有一个悬浮的按钮

draw:类似于Android侧拉效果的导航栏

 

四、顶部导航

App首页框架搭建--Scaffold与PageView

 

App首页框架搭建--Scaffold与PageView

 

App首页框架搭建--Scaffold与PageView

 

body里面使用TabBarView, TabBarView类似于可以滑动的TabView,它里面接收一个widget数组,通过choices这个数组创建了这些widget,

App首页框架搭建--Scaffold与PageView

choices数组中定义的元素

ChoiceCard是页面要展示的部分

 

五、底部导航菜单

App首页框架搭建--Scaffold与PageView

1、通过Scaffold的bottomNavigationBar来实现。

bottomNavigationBar里面接受一个BottomNavigationBar的一个widget。

BottomNavigationBar里面有一个currentIndex,也就是默认显示哪个页面

在点击事件onTap()中,通过控制_controller来控制跳到哪个页面,通过setState()方式来改变当前页面

type接受两个枚举,一个是fixed,一个是shifting。fixed:永远显示底部的lable,就是图标下面的label是永远显示的,还有一个是shifting,它是在tab被选中的时候才会显示

items接收BottomNavigationBarItem,是一个BottomNavigationBarItem的一个数组,这个数组里面可以定义要显示的icon,以及底部的文案

App首页框架搭建--Scaffold与PageView

 

五、侧拉栏菜单

App首页框架搭建--Scaffold与PageView

 

App首页框架搭建--Scaffold与PageView

 

Scaffold里面有drawer这样一个参数,这个参数是用来定义侧拉菜单的效果,它接收一个array,这个array里可以放ListView这样一个数组,ListView其实返回的是一个数组的集合

App首页框架搭建--Scaffold与PageView

 

listview里面可以放DrawerHeader以及ListTile

 

App首页框架搭建--Scaffold与PageView

 

App首页框架搭建--Scaffold与PageView

 

六、什么是PageView?

PageView是一个可以完成页面之间滚动的widget。

App首页框架搭建--Scaffold与PageView

 

 

 

 

 

相关文章: