使用flutter开发一款应用

项目底部导航栏

底部导航栏使用的是BottomNavigationBar，通常用户Scaffold组件的底部，可以指定颜色和模式，接受点击回调，可以与PageView一起实现也main切换效果。

PageView可以容纳多个组件页面，可对它们进行滑动切换，可指定滑动的方向、是否反向、滑动控制器等属性。

Widget build(BuildContext context) {  
   return Scaffold(  
      bottomNavigationBar: BottomNavigationBar(  
        type: BottomNavigationBarType.fixed,  
        selectedFontSize: 14,  
        unselectedFontSize: 14,  
        iconSize: 24,  
        selectedItemColor: Theme.of(context).colorScheme.primary,  
        unselectedItemColor: Theme.of(context).colorScheme.onSurface,  
        items: _generateBottomNavList(),  
        currentIndex: _selectedItemIndex,  
        onTap: (index) {  
        _pageController.jumpToPage(index);  
        }),  
      body: PageView.builder(  
        physics: const NeverScrollableScrollPhysics(),  
        itemBuilder: (context, index) {  
          return _page[index];  
        },  
        onPageChanged: _onPageChanged,  
        controller: _pageController));  
}

主页自定义组件

主页由轮播图card_swiper三方组件和ListView组件组成，用来显示文章列表，外面嵌套了一个EasyRefresh下拉刷新组件，控制页面的下拉刷新和列表的上拉加载更多。

EasyRefresh.builder(  
//嵌套NestedScrollView的时候推荐使用这个MaterialHeader  
header: const MaterialHeader(clamping: true),  
controller: homeCtr.controller,  
onRefresh: homeCtr.refreshRequest,  
onLoad: homeCtr.loadMoreRequest,  
childBuilder: (context, physics) {  
return NestedScrollView(  
physics: physics,  
headerSliverBuilder:  
(BuildContext context, bool innerBoxIsScrolled) {  
return <Widget>[  
SliverToBoxAdapter(child: Obx(() => topBanner()))  
];  
},  
body: Obx(() => articlesList(physics)));  
});

SizedBox(  
height: 220,  
child: Swiper(  
itemCount: homeCtr.bannerList.length,  
pagination: const SwiperPagination(),  
autoplay: true,  
loop: true,  
onTap: (int index) {  
var item = homeCtr.articleList[index];  
Fluttertoast.showToast(msg: item.link);  
},  
itemBuilder: (context, index) {  
return Image.network(  
homeCtr.bannerList[index].imagePath.toString(),  
fit: BoxFit.fill);  
}));

ListView.builder(  
physics: physics,  
shrinkWrap: true,  
padding: const EdgeInsets.only(top: 5),  
itemCount: homeCtr.articleList.length,  
itemBuilder: (context, index) {  
var item = homeCtr.articleList[index];  
return ArticleItem(item: item,);  
});

体系自定义组件

体系页面主要由Tabbar和PageView一起实现顶部导航一级滑动列表页面切换。中间是列表ListView组件来展示文章列表数据。列表外层使用了EasyRefresh下拉刷新，上拉加载更多。

TabBar(  
controller: systemCtr.tabCtr,  
labelPadding:  
const EdgeInsets.symmetric(vertical: 10, horizontal: 10),  
padding: const EdgeInsets.only(top: 35),  
isScrollable: true,  
tabAlignment: TabAlignment.start,  
tabs: systemCtr.tabs.map((element) {  
return Text(element.name.toString(),style: const TextStyle(fontSize: 15,fontWeight: FontWeight.w700),);  
}).toList()),  
Expanded(  
child: TabBarView(  
controller: systemCtr.tabCtr,  
children: systemCtr.tabs.map((element) {  
return Column(children: [  
secondScreenList(element),  
Expanded(child: refreshList())  
]);  
}).toList()))  
]);

项目源码地址：wanandroid_flutter: flutter版玩android (gitee.com)