一、商品列表页搭建
-
自定义筛选切换
image.png
Widget _subHeaderWidget() {
return Positioned(
top: 0,
width: ScreenAdaper.width(750),
height: ScreenAdaper.height(80),
child: Container(
width: ScreenAdaper.width(750),
height: ScreenAdaper.height(80),
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(
width: 1, color: Color.fromRGBO(233, 233, 233, 0.9)))),
child: Row(
children: this._subHeaderList.map((value) {
return Expanded(
flex: 1,
child: InkWell(
child: Padding(
padding: EdgeInsets.fromLTRB(
0, ScreenAdaper.height(16), 0, ScreenAdaper.height(16)),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
"${value["title"]}",
textAlign: TextAlign.center,
style: TextStyle(
color: (this._selectHeaderId == value["id"])
? Colors.red
: Colors.black54),
),
_showIcon(value["id"])
],
),
),
onTap: () {
_subHeaderChange(value["id"]);
},
),
);
}).toList(),
),
),
);
}
添加抽屉界面和自定义导航栏
自定义导航栏左侧和右侧按钮
和Drawer抽屉效果实现
_scaffoldKey是一个全局key，用来弹出抽屉
class _ProductListPageState extends State<ProductListPage> {
final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();
在点击的时候调用
_scaffoldKey.currentState.openEndDrawer();
return Scaffold(
key: _scaffoldKey,
appBar: AppBar(
title: Text("商品列表"),
// leading: Text(""),
actions: <Widget>[Text("")],
),
endDrawer: Drawer(
child: Container(
child: Text("实现筛选功能"),
),
),
body: Stack(
children: <Widget>[
_productListWidget(),
_subHeaderWidget(),
],
));
使用自带的下拉刷新
定义ScrollController用于监听listView滚动
ScrollController _scrollController = ScrollController();
给listView的controller属性加上就可以监听滚动了
//监听滚动条滚动事件
_scrollController.addListener(() {
//_scrollController.position.pixels //获取滚动条滚动的高度
//_scrollController.position.maxScrollExtent //获取页面高度
if (_scrollController.position.pixels >
_scrollController.position.maxScrollExtent - 20) {
if (this.flag && this._hasMore) {
_getProductListData();
}
}
});
页面传参
class ProductListPage extends StatefulWidget {
Map arguments;
ProductListPage({Key key, this.arguments}) : super(key: key);
@override
_ProductListPageState createState() => _ProductListPageState();
}
获取参数直接用widget.arguments获取，路由也带上参数arguments就可以了
解决崩溃的bug
if (mounted) {
setState(() {
this._bannerList = list.result;
});
}
自定义搜索框
在Tabs里添加会直接覆盖单页面的AppBar
return Scaffold(
appBar: _currentIndex != 3
? AppBar(
leading: IconButton(
icon: Icon(Icons.center_focus_weak,
size: 28, color: Colors.black87),
onPressed: null,
),
title: InkWell(
child: Container(
height: ScreenAdaper.height(68),
decoration: BoxDecoration(
color: Color.fromRGBO(233, 233, 233, 0.8),
borderRadius: BorderRadius.circular(30)),
padding: EdgeInsets.only(left: 10),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Icon(Icons.search),
Text("笔记本",
style: TextStyle(fontSize: ScreenAdaper.size(28)))
],
),
),
onTap: () {
Navigator.pushNamed(context, '/Search');
},
),
actions: <Widget>[
IconButton(
icon: Icon(Icons.message, size: 28, color: Colors.black87),
onPressed: null,
)
],
)
: AppBar(
title: Text("用户中心"),
),
