最近闲来无事学习flutter模仿开发一个应用用来练手, 准备将学习过程记录成一系列文章备忘, 本文为该系列第(2)篇,全部代码已上传: github 首页布局
导航
- 布局结构说明
- 开发
布局结构说明
image.png
首页整体布局分为4部分
- 轮播图
- 分类导航
- 店铺列表
- 底部导航
开发
整体布局分为4块. 由于第3块之后是店铺列表,列表往下有下拉加载更多店铺功能.
其中整体节目是一个listview再加上底部一个导航栏. listview元素为店铺数量在加3(轮播图,分类导航,底部加载更多动画)
下面是list的builder代码
Widget _buildItem(BuildContext context, int index) {
if (index == 0) {
return new HomeBanner(); //顶部轮播图
} else if (index == 1) {
return new HomeCategory(); // 分类导航
} else if (index > this.brands.length + 1) {
if(isEnd) {
return RefreshWidget.loadMoreEnd(); //没有更多了
}
return RefreshWidget.loadMore(); //加载更多
} else if (index > 1 && this.brands.length > 0) {
index = index - 2;
return HomeBrand(brand: this.brands[index]); // 店铺
}
}
1. 轮播图
轮播图使用的是一个flutter_swiper库
2. 分类导航
分类导航使用的是一个GridView. 但这里要取消掉gridview的滚动效果, 代码如下:
@override
Widget build(BuildContext context) {
return Container(
height: 220,
child: GridView.builder(
physics: new NeverScrollableScrollPhysics(), //取消滑动
itemBuilder: _buildItem, // 标签
itemCount: this.categorys.length,
padding: new EdgeInsets.all(20.0),
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
mainAxisSpacing: 10.0,
crossAxisSpacing: 20.0,
crossAxisCount: 4,
)),
);
}
3. 店铺列表
店铺布局是一个column分为上下2个部分,上面是名称图标栏. 下面商品列表为一个listview设置滚动方向为横向 scrollDirection: Axis.horizontal
商品结构为一个column 上面是图,下面是标题价格等信息
滑动到最下面是加载更多.下滑加载更多的代码如下
// 首先在listview添加一个controller
....
child: ListView.builder(
itemBuilder: _buildItem,
itemCount: brands.length + 3,
controller: _scrollController, //添加controller
),
.....
// 增加监听
_scrollController.addListener(lostenerScrollController);
// 监听是否滚动到最底部.
void lostenerScrollController() {
if (_scrollController.position.pixels ==
_scrollController.position.maxScrollExtent) {
if(!isEnd) {
_getMore();
}
}
}
4. 底部导航
底部导航是一个BottomNavigationBar很常规, 要注意的是type需要设置成BottomNavigationBarType.fixed不然图标一多会自动隐藏下面的文字描述
BottomNavigationBar(
iconSize: 20.0,
fixedColor: Colors.black,
items: [
BottomNavigationBarItem(
icon: Icon(
Icons.home,
),
title: Text('首页', style: _iconTitleTextStyle),
),
BottomNavigationBarItem(
icon: Icon(
Icons.crop_original,
),
title: Text('当家', style: _iconTitleTextStyle),
),
BottomNavigationBarItem(
icon: Icon(
Icons.shopping_cart,
),
title: Text('购物车', style: _iconTitleTextStyle),
),
BottomNavigationBarItem(
icon: Icon(
Icons.account_box,
),
title: Text('会员', style: _iconTitleTextStyle),
),
],
//设置显示的模式
type: BottomNavigationBarType.fixed,
)
