Flutter 学习 - 基础框架
关于Flutter的安装以及完成helloword的开发大家可以参考
前言
在实际的项目开发中，我们目前市面上所看到的项目，如抖音、微信、淘宝
抖音_微信_淘宝.png
分析上图其基本框架大致如下
通用APP模版简图.png
正文 -- 效果图
下面我们就来实现上面图中内容的实现方式，先来看下效果图
基础框架_无沉浸式状态栏.gif
正文 -- 实现方式
- 布局分析
这里实现底部Tab控件父布局使用的是Flutter自带对BottomNavigationBar，Tab的每个Item则是实用BottomNavigationBarItem实现，整个app的内容是放在了Scaffold这个Widget中的,BottomNavigationBar 的上方显示主内容的区域的是PageView，来放置我们的各个页面，包括滑动切换（这里是用PageView的controller属性，下面会详细介绍）
基础框架布局简图.png
- 构建BottomNavigationBarItem
这里构建的时候是自己创建了一个类，来统一管理BottomNavigationBarItem的一些属性
NavigationIconView({Key key, String title, Widget icon, Widget activeIcon})
: _title = title,//title内容
_activeIcon = activeIcon,//选中的时候显示的图标
_icon = icon,//未选中的时候显示的图标
item = new BottomNavigationBarItem(
icon: icon,
activeIcon: activeIcon,
title: Text(
title,
style: TextStyle(fontSize: ScreenUtil.getInstance().setSp(32)),
),
backgroundColor: Colors.white);
然后就是添加我们的底部TabItem到一个Widget集合中，然后添加到我们的BottomNavigationBar中,这里我们实用for循环进行创建，你可以根据自己底部的数量进行添加，我是把这些数据全都添加到了一个配置项中，方便管理
for (var i = 0; i < TabConfig.HOME_TAB_TITLES.length; ++i) {
NavigationIconView navigationIconView = NavigationIconView(
title: TabConfig.HOME_TAB_TITLES[i],
icon: Image.asset(
TabConfig.HOME_TAB_NORMALICON[i],
width: TabConfig.width,
height: TabConfig.height,
),
activeIcon: Image.asset(
TabConfig.HOME_TAB_ACTIVEICON[i],
width: TabConfig.width,
height: TabConfig.height,
)
);
_navigationViews.add(navigationIconView);
}
- 构建 BottomNavigationBar
我们已经创建完成了BottomNavigationBarItem的集合，现在就是要把这个集合添加到我们BottomNavigationBar中
BottomNavigationBar navigationBar = BottomNavigationBar(
fixedColor: Color(AppColors.AppTabTextColor),
items: _navigationViews //底部BarItem的集合
.map((NavigationIconView navigationIconView) =>
navigationIconView.item)
.toList(),
currentIndex: _currentIndex,
type: BottomNavigationBarType.fixed,
onTap: (int index) {
setState(() {
_currentIndex = index;
});
});
- 布局添加
首先我们要先创建pageview所需的数据主界面中各个页面的集合
_pages = [
Container(color: Colors.green),
Container(color: Colors.blue),
Container(color: Colors.yellow),
Container(color: Colors.green),
我们的父布局是实用的Scaffold这个Widget 在实用的时候就可以直接创建
return Scaffold(
body: PageView.builder(
itemBuilder: (BuildContext context, int index) {
return _pages[index];
},
controller: _pageController,
itemCount: _pages.length,
onPageChanged: (int index) {
setState(() {
_currentIndex = index;
});
},
),
bottomNavigationBar: navigationBar,
);
这时我们就可以直接操作左右滑动各个page页面了，但是现在点击tab的时候还不能进行page之间的切换，我们还需要做个处理，上面的代码中我们有看到一个参数controller,这个就是我们来控制切换的,它的创建方式是
_pageController = new PageController(
initialPage: _currentIndex, keepPage: true, viewportFraction: 1.0);
这时候我们就需要在BottomNavigationBar的onTap方法中的onState()方法中添加一段代码，如下
onTap: (int index) {
setState(() {
_currentIndex = index;
_pageController.animateToPage(index,
duration: Duration(milliseconds: 200), curve: Curves.easeInOut);
});
优化细节
细心的朋友应该已经看出来了，我们上面的效果图是没有沉浸式的，现在沉浸式状态栏已经是app的标配了，Flutter当然也是支持的，下面就是带有沉浸式状态栏的效果
基础框架_沉浸式状态栏.gif
实现方式其实也很简单,我们只需要判断下平台是不是Android，然后调用
//对系统平台进行判断，如果是android则设置沉浸式状态栏
if(Platform.isAndroid){
//注意：这里要写在组件渲染之后，不然会被组件属性覆盖
SystemUiOverlayStyle systemUiOverlayStyle = SystemUiOverlayStyle(statusBarColor: Colors.transparent);
SystemChrome.setSystemUIOverlayStyle(systemUiOverlayStyle);
}
这样我们的基本框架就搭建完成了，后面就可以在各个页面中完成项目中所需要的UI,该项目已被放在Github上面进行开源，内容在不断更新中，后续还会有更多实际项目中所要用到的基础知识，如有问题，也欢迎大家留言，指正。
- Github 开源地址 Flutter_Wheel
