最近閑來無事學(xué)習(xí)flutter模仿開發(fā)一個(gè)應(yīng)用用來練手, 準(zhǔn)備將學(xué)習(xí)過程記錄成一系列文章備忘, 本文為該系列第(2)篇,全部代碼已上傳: github 首頁(yè)布局
導(dǎo)航
- 布局結(jié)構(gòu)說明
- 開發(fā)
布局結(jié)構(gòu)說明
image.png
首頁(yè)整體布局分為4部分
- 輪播圖
- 分類導(dǎo)航
- 店鋪列表
- 底部導(dǎo)航
開發(fā)
?? 整體布局分為4塊. 由于第3塊之后是店鋪列表,列表往下有下拉加載更多店鋪功能.
其中整體節(jié)目是一個(gè)listview再加上底部一個(gè)導(dǎo)航欄. listview元素為店鋪數(shù)量在加3(輪播圖,分類導(dǎo)航,底部加載更多動(dòng)畫)
下面是list的builder代碼
Widget _buildItem(BuildContext context, int index) {
if (index == 0) {
return new HomeBanner(); //頂部輪播圖
} else if (index == 1) {
return new HomeCategory(); // 分類導(dǎo)航
} 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. 輪播圖
輪播圖使用的是一個(gè)flutter_swiper庫(kù)
2. 分類導(dǎo)航
分類導(dǎo)航使用的是一個(gè)GridView. 但這里要取消掉gridview的滾動(dòng)效果, 代碼如下:
@override
Widget build(BuildContext context) {
return Container(
height: 220,
child: GridView.builder(
physics: new NeverScrollableScrollPhysics(), //取消滑動(dòng)
itemBuilder: _buildItem, // 標(biāo)簽
itemCount: this.categorys.length,
padding: new EdgeInsets.all(20.0),
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
mainAxisSpacing: 10.0,
crossAxisSpacing: 20.0,
crossAxisCount: 4,
)),
);
}
3. 店鋪列表
店鋪布局是一個(gè)column分為上下2個(gè)部分,上面是名稱圖標(biāo)欄. 下面商品列表為一個(gè)listview設(shè)置滾動(dòng)方向?yàn)闄M向 scrollDirection: Axis.horizontal
商品結(jié)構(gòu)為一個(gè)column 上面是圖,下面是標(biāo)題價(jià)格等信息
滑動(dòng)到最下面是加載更多.下滑加載更多的代碼如下
// 首先在listview添加一個(gè)controller
....
child: ListView.builder(
itemBuilder: _buildItem,
itemCount: brands.length + 3,
controller: _scrollController, //添加controller
),
.....
// 增加監(jiān)聽
_scrollController.addListener(lostenerScrollController);
// 監(jiān)聽是否滾動(dòng)到最底部.
void lostenerScrollController() {
if (_scrollController.position.pixels ==
_scrollController.position.maxScrollExtent) {
if(!isEnd) {
_getMore();
}
}
}
4. 底部導(dǎo)航
底部導(dǎo)航是一個(gè)BottomNavigationBar很常規(guī), 要注意的是type需要設(shè)置成BottomNavigationBarType.fixed不然圖標(biāo)一多會(huì)自動(dòng)隱藏下面的文字描述
BottomNavigationBar(
iconSize: 20.0,
fixedColor: Colors.black,
items: [
BottomNavigationBarItem(
icon: Icon(
Icons.home,
),
title: Text('首頁(yè)', style: _iconTitleTextStyle),
),
BottomNavigationBarItem(
icon: Icon(
Icons.crop_original,
),
title: Text('當(dāng)家', style: _iconTitleTextStyle),
),
BottomNavigationBarItem(
icon: Icon(
Icons.shopping_cart,
),
title: Text('購(gòu)物車', style: _iconTitleTextStyle),
),
BottomNavigationBarItem(
icon: Icon(
Icons.account_box,
),
title: Text('會(huì)員', style: _iconTitleTextStyle),
),
],
//設(shè)置顯示的模式
type: BottomNavigationBarType.fixed,
)
