最近闲来无事学习flutter模仿开发一个应用用来练手, 准备将学习过程记录成一系列文章备忘, 本文为该系列第(2)篇,全部代码已上传: github 首页布局

导航

1. 布局结构说明
2. 开发

布局结构说明

image.png

首页整体布局分为4部分

1. 轮播图
2. 分类导航
3. 店铺列表
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,
          )