ProductList.dart

import 'package:flutter/material.dart';
import '../services/ScreenAdaper.dart';
import '../config/Config.dart';
import 'package:dio/dio.dart';
import '../model/ProductModel.dart';
import '../widget/LoadingWidget.dart'; class ProductListPage extends StatefulWidget {
Map arguments;
ProductListPage({Key key, this.arguments}) : super(key: key); _ProductListPageState createState() => _ProductListPageState();
} class _ProductListPageState extends State<ProductListPage> {
//通过事件打开侧边栏,需要全局声明一下:
final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();
//配置下拉加载更多:
ScrollController _scrollController = ScrollController();
//分页:
int _page = ;
//每一页有多少条数据:
int _pageSize = ;
//分页:
List _productList = [];
//排序:
String _sort = "";
//解决重复请求的问题:
bool flag = true; //是否有数据:
bool _hasMore = true; //是否有搜索的数据:
bool _hasData = true;
// 一级导航数据
/*
价格升序:sort=price_1
价格降序:sort=price_-1
销量升序:sort=salecount_1
销量降序:sort=salecount_-1
*/
List _subHeaderList = [
{"id": , "title": "综合", "fileds": 'all', "sort": -},
{"id": , "title": "销量", "fileds": 'salecount', "sort": -},
{"id": , "title": "价格", "fileds": 'price', "sort": -},
{"id": , "title": "筛选"},
];
int _selectHeaderId = ; //配置search搜索框的值:
var _initKeywordsController = new TextEditingController(); //cid
var _cid;
var _keywords; //初始化的时候获取的生命周期函数:
@override
void initState() {
super.initState();
this._cid = widget.arguments["cid"];
this._keywords = widget.arguments["keywords"]; //给search框框赋值:
this._initKeywordsController.text = this._keywords;
widget.arguments['keywords'] == null
? this._initKeywordsController.text = ""
: this._initKeywordsController.text = widget.arguments['keywords']; _getProductListData();
//监听滚动条滚动事件:
_scrollController.addListener(() {
// _scrollController.position.pixels //获取滚动条滚动高度
// _scrollController.position.maxScrollExtent //获取页面滚动高度:
if (_scrollController.position.pixels >
_scrollController.position.maxScrollExtent - ) {
if (this.flag && this._hasMore) {
_getProductListData();
}
}
});
} //获取商品列表的数据:
_getProductListData() async {
setState(() {
this.flag = false;
});
var api;
print(widget.arguments['keywords']);
if (this._keywords == null) {
api =
'${Config.domain}api/plist?cid=${this._cid}&page=${_page}&sort=${this._sort}&pageSize=${_pageSize}';
} else {
api =
'${Config.domain}api/plist?search=${this._keywords}&page=${_page}&sort=${this._sort}&pageSize=${_pageSize}';
} var result = await Dio().get(api);
var productList = ProductModel.fromJson(result.data);
print(productList.result); if (productList.result.length < this._pageSize) {
setState(() {
this._productList.addAll(productList.result);
this._hasMore = false;
this.flag = true;
// this._productList = productList.result;
});
} else {
setState(() {
this._productList.addAll(productList.result);
this._page++;
this.flag = true;
// this._productList = productList.result;
});
} //判断是否有搜索的数据:
if (productList.result.length == ) {
setState(() {
this._hasData = false;
});
} else {
setState(() {
this._hasData = true;
});
}
} //显示加载中的圈圈:
Widget _showMore(index) {
if (this._hasMore) {
return (index == this._productList.length - )
? LoadingWidget()
: Text('');
} else {
return (index == this._productList.length - )
? Text("---暂无其他数据了--")
: Text('');
}
} //商品列表:
Widget _productListWidget() {
if (this._productList.length > ) {
return Container(
padding: EdgeInsets.all(),
margin: EdgeInsets.only(top: ScreenAdaper.height()),
child: ListView.builder(
controller: _scrollController,
itemBuilder: (context, index) {
//处理图片:
String pic = this._productList[index].pic;
pic = Config.domain + pic.replaceAll('\\', '/');
//获得每一个元素:
return Column(
children: <Widget>[
Row(
children: <Widget>[
Container(
width: ScreenAdaper.width(),
height: ScreenAdaper.height(),
child: Image.network("${pic}", fit: BoxFit.cover),
),
Expanded(
flex: ,
child: Container(
height: ScreenAdaper.height(),
margin: EdgeInsets.only(left: ),
// color: Colors.red,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
"${this._productList[index].title}",
maxLines: ,
overflow: TextOverflow.ellipsis,
),
Row(
children: <Widget>[
Container(
height: ScreenAdaper.height(),
margin: EdgeInsets.only(right: ),
padding: EdgeInsets.fromLTRB(, , , ),
//注意:如果Container里面加上decoration属性,这个时候color属性必须放到BoxDecoration
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(),
// color:Color.fromRGBO(230, 230, 230, 0.9)
),
child: Text('4G'),
),
Container(
height: ScreenAdaper.height(),
margin: EdgeInsets.only(right: ),
padding: EdgeInsets.fromLTRB(, , , ),
//注意:如果Container里面加上decoration属性,这个时候color属性必须放到BoxDecoration
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(),
// color:Color.fromRGBO(230, 230, 230, 0.3)
),
child: Text('16G'),
)
],
),
Text("¥ ${this._productList[index].price}",
style:
TextStyle(color: Colors.red, fontSize: ))
],
),
),
)
],
),
Divider(
height: ,
),
this._showMore(index)
],
);
},
itemCount: this._productList.length,
),
);
} else {
return LoadingWidget();
}
} //导航改变的时候触发:
_subHeaderChange(id) {
if (id == ) {
_scaffoldKey.currentState.openEndDrawer();
}
setState(() {
this._selectHeaderId = id;
this._sort =
"${this._subHeaderList[id - 1]['fileds']}_${this._subHeaderList[id - 1]['sort']}"; //重置分页:
this._page = ;
//重置数据:
this._productList = []; this._subHeaderList[id - ]['sort'] =
this._subHeaderList[id - ]['sort'] * -; //回到顶部:
_scrollController.jumpTo(); //重置_hasMore
this._hasMore = true; //重新请求数据:
this._getProductListData();
});
} //显示Header icon
Widget _showIcon(id) {
if (id == || id == ) {
if (this._subHeaderList[id - ]['sort'] == ) {
return Icon(Icons.arrow_drop_down);
}
return Icon(Icons.arrow_drop_up);
}
return Text('');
} //筛选导航:
Widget _subHeaderWidget() {
return Positioned(
top: ,
height: ScreenAdaper.height(),
width: ScreenAdaper.width(),
child: Container(
height: ScreenAdaper.height(),
width: ScreenAdaper.width(),
// color: Colors.red,
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(
width: , color: Color.fromRGBO(, , , 0.9)))),
child: Row(
children: this._subHeaderList.map((value) {
return Expanded(
flex: ,
child: InkWell(
child: Padding(
padding: EdgeInsets.fromLTRB(
, ScreenAdaper.height(), , ScreenAdaper.height()),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
"${value['title']}",
textAlign: TextAlign.center,
style: TextStyle(
color: (this._selectHeaderId == value["id"])
? Colors.red
: Colors.black),
),
_showIcon(value['id'])
],
),
),
onTap: () {
_subHeaderChange(value["id"]);
},
),
);
}).toList()),
),
);
} @override
Widget build(BuildContext context) {
ScreenAdaper.init(context);
return Scaffold(
key: _scaffoldKey,
appBar: AppBar(
title: Container(
child: TextField(
controller: this._initKeywordsController,
autofocus: false,
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(),
borderSide: BorderSide.none)),
onChanged: (value) {
setState(() {
this._keywords = value;
});
},
),
height: ScreenAdaper.height(),
decoration: BoxDecoration(color: Color.fromRGBO(, , , 0.8)),
),
actions: <Widget>[
InkWell(
child: Container(
height: ScreenAdaper.height(),
width: ScreenAdaper.width(),
child: Row(
children: <Widget>[Text('搜索')],
),
),
onTap: () {
this._subHeaderChange();
},
)
],
),
endDrawer: Drawer(
child: Container(
child: Text('实现筛选功能'),
),
),
// body: Text("${widget.arguments}"),
body:_hasData?Stack(
children: <Widget>[_productListWidget(), _subHeaderWidget()],
):Center(
child: Text('没有您要浏览的数据')
),
);
}
}

Search.dart

import 'package:flutter/material.dart';
import 'package:flutter_jdshop/services/ScreenAdaper.dart'; class SearchPage extends StatefulWidget {
SearchPage({Key key}) : super(key: key); _SearchPageState createState() => _SearchPageState();
} class _SearchPageState extends State<SearchPage> {
var _keywords;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Container(
child: TextField(
autofocus: true,
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(),
borderSide: BorderSide.none)),
onChanged: (value){
this._keywords=value;
},
),
height: ScreenAdaper.height(),
decoration: BoxDecoration(
color: Color.fromRGBO(, , , 0.8),
borderRadius: BorderRadius.circular()),
),
actions: <Widget>[
InkWell(
child: Container(
height: ScreenAdaper.height(),
width: ScreenAdaper.width(),
child: Row(
children: <Widget>[Text('搜索')],
),
),
onTap: () {
print();
Navigator.pushReplacementNamed(context,'/productList',arguments: {
"keywords":this._keywords
});
},
)
],
), body: Container(
padding: EdgeInsets.all(),
child: ListView(
children: <Widget>[
Container(
child: Text('热搜', style: Theme.of(context).textTheme.title),
),
Divider(),
Wrap(
children: <Widget>[
Container(
padding: EdgeInsets.all(),
margin: EdgeInsets.all(),
decoration: BoxDecoration(
color: Color.fromRGBO(, , , 0.9),
borderRadius: BorderRadius.circular()),
child: Text('女装'),
),
Container(
padding: EdgeInsets.all(),
margin: EdgeInsets.all(),
decoration: BoxDecoration(
color: Color.fromRGBO(, , , 0.9),
borderRadius: BorderRadius.circular()),
child: Text('女装'),
),
Container(
padding: EdgeInsets.all(),
margin: EdgeInsets.all(),
decoration: BoxDecoration(
color: Color.fromRGBO(, , , 0.9),
borderRadius: BorderRadius.circular()),
child: Text('女装'),
),
Container(
padding: EdgeInsets.all(),
margin: EdgeInsets.all(),
decoration: BoxDecoration(
color: Color.fromRGBO(, , , 0.9),
borderRadius: BorderRadius.circular()),
child: Text('女装'),
),
Container(
padding: EdgeInsets.all(),
margin: EdgeInsets.all(),
decoration: BoxDecoration(
color: Color.fromRGBO(, , , 0.9),
borderRadius: BorderRadius.circular()),
child: Text('女装'),
)
],
),
SizedBox(height: ),
Container(
child: Text('历史记录', style: Theme.of(context).textTheme.title),
),
Divider(),
Column(
children: <Widget>[
ListTile(
title: Text('女装'),
),
Divider(),
ListTile(
title: Text('女装'),
),
Divider(),
ListTile(
title: Text('女装'),
),
Divider(),
ListTile(
title: Text('女装'),
),
Divider(),
],
),
SizedBox(height: ),
InkWell(
onTap: (){ },
child: Container(
width: ScreenAdaper.width(),
height: ScreenAdaper.height(),
decoration: BoxDecoration(
border: Border.all(color: Colors.black54, width: )),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[Icon(Icons.delete), Text('清空历史记录')],
),
),
)
],
),
));
}
}

router.dart

import 'package:flutter/material.dart';
import '../pages/tabs/Tabs.dart';
import '../pages/Search.dart';
import '../pages/ProductList.dart';
//配置路由的地方:
final routes = {
'/': (context) => Tabs(),
'/search': (context) => SearchPage(),
'/productList': (context,{arguments}) => ProductListPage(arguments:arguments),
};
//固定写法:
var onGenerateRoute = (RouteSettings settings) {
// 统一处理
final String name = settings.name;
final Function pageContentBuilder = routes[name];
if (pageContentBuilder != null) {
if (settings.arguments != null) {
final Route route = MaterialPageRoute(
builder: (context) =>
pageContentBuilder(context, arguments: settings.arguments));
return route;
} else {
final Route route =
MaterialPageRoute(builder: (context) => pageContentBuilder(context));
return route;
}
}
};

Tabs.dart

import 'package:flutter/material.dart';
import '../../services/ScreenAdaper.dart'; import 'Home.dart';
import 'Cart.dart';
import 'Category.dart';
import 'User.dart'; class Tabs extends StatefulWidget {
Tabs({Key key}) : super(key: key); _TabsState createState() => _TabsState();
} class _TabsState extends State<Tabs> {
int _currentIndex = ;
PageController _pageController;
void initState() {
super.initState();
this._pageController = new PageController(initialPage: this._currentIndex);
} List<Widget> _pageList = [HomePage(), CategoryPage(), CartPage(), UserPage()];
@override
Widget build(BuildContext context) {
ScreenAdaper.init(context); return Container(
child: Scaffold(
appBar:_currentIndex!=?AppBar(
leading: IconButton(
icon:
Icon(Icons.center_focus_weak, size: , color: Colors.black87),
onPressed: null,
),
title:InkWell(
child: Container(
height: ScreenAdaper.height(),
decoration: BoxDecoration(
color: Color.fromRGBO(,,, 0.8),
borderRadius: BorderRadius.circular()
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Icon(Icons.search),
Text('笔记本',style:TextStyle(
fontSize: ScreenAdaper.size()
))
],
),
),
onTap: (){
Navigator.pushNamed(context,'/search');
},
),
actions: <Widget>[
IconButton(
icon: Icon(Icons.message,
size: , color: Colors.black87),
onPressed: null,
)
],
):AppBar(
title: Text('用户中心'),
),
//页面状态保持第一种方法:
//保持所有的页面状态,使用indexedStack
// body:IndexedStack(
// index: this._currentIndex,
// children:_pageList
// ),
//保持部分页面的状态:
// body: PageView(
//修改的部分:
controller: this._pageController,
children: this._pageList,
onPageChanged:(index){
setState(() {
this._currentIndex=index;
});
},
// physics: NeverScrollableScrollPhysics(), //禁止pageView滑动
),
bottomNavigationBar: BottomNavigationBar(
currentIndex: this._currentIndex,
onTap: (index) {
this.setState(() {
this._currentIndex = index;
this._pageController.jumpToPage(this._currentIndex);
});
},
type: BottomNavigationBarType.fixed,
fixedColor: Colors.red,
items: [
BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('首页')),
BottomNavigationBarItem(
icon: Icon(Icons.category), title: Text('分类')),
BottomNavigationBarItem(
icon: Icon(Icons.shopping_cart), title: Text('购物车')),
BottomNavigationBarItem(icon: Icon(Icons.people), title: Text('我的'))
],
),
),
);
}
}

16 Flutter仿京东商城项目 跳转到搜索页面实现搜索功能 以及搜索筛选的更多相关文章

  1. 34 Flutter仿京东商城项目 用户注册 注册流程 POST发送验证码 倒计时功能 验证验证码

    加群452892873 下载对应34课文件,运行方法,建好项目,直接替换lib目录 以下列出的是本课涉及的文件. RegisterFirst.dart import 'package:flutter/ ...

  2. 01-02 Flutter仿京东商城项目 功能分析、底部导航Tab切换以及路由配置、架构搭建:(Flutter仿京东商城项目 首页布局以及不同终端屏幕适配方案)

    Flutter和Dart交流学习群:交流群:452892873 01Flutter仿京东商城项目 功能分析.底部导航Tab切换以及路由配置.架构搭建 02Flutter仿京东商城项目 首页布局以及不同 ...

  3. 10 Flutter仿京东商城项目 商品分类跳转到商品列表传值 商品列表页面布局

    pages下面新建: ProductList.dart import 'package:flutter/material.dart'; import '../services/ScreenAdaper ...

  4. 07-08 Flutter仿京东商城项目 商品分类页面布局:Flutter仿京东商城项目 商品分类页面数据渲染

    Flutter实战(交流群:452892873) 本项目是一个实战项目,根据目录建文件,并复制从第一节到最新更新的文章,可以构成完整的一个请求后台数据的项目: CateModel.dart class ...

  5. 42 Flutter仿京东商城项目 修改默认收货地址 显示默认收货地址

    CheckOut.dart import 'package:flutter/material.dart'; import '../services/ScreenAdapter.dart'; impor ...

  6. 41 Flutter 仿京东商城项目签名验证 增加收货地址、显示收货地址 事件广播

    加群452892873 下载对应41课文件,运行方法,建好项目,直接替换lib目录 AddressAdd.dart import 'package:dio/dio.dart'; import 'pac ...

  7. 39 Flutter仿京东商城项目 收货地址列表、增加 修改收货地址布局、弹出省市区选择器

    加群452892873 下载对应39课文件,运行方法,建好项目,直接替换lib目录 pubspec.yaml city_pickers: ^ AddressAdd.dart import 'packa ...

  8. 38 Flutter仿京东商城项目 渲染结算页面商品数据

    加群452892873 下载对应38课文件,运行方法,建好项目,直接替换lib目录 CartServices.dart import 'dart:convert'; import 'Storage.d ...

  9. 37 Flutter仿京东商城项目 结算页面布局

    加群452892873 下载对应34课文件,运行方法,建好项目,直接替换lib目录 CheckOut.dart import 'package:flutter/material.dart'; impo ...

随机推荐

  1. TSN(Temporal Segment Networks)

    一.算法详解 二.代码解析(pytorch版) 训练代码:https://blog.csdn.net/u014380165/article/details/79058147 测试代码:https:// ...

  2. mysql 忘记/修改数据库密码

    window mysql 修改密码 方法1: 用SET PASSWORD命令 mysql -u root mysql> SET PASSWORD FOR 'root'@'localhost' = ...

  3. 用js刷剑指offer(用两个栈实现队列)

    题目描述 用两个栈来实现一个队列,完成队列的Push和Pop操作. 队列中的元素为int类型. 牛客网链接 js代码 let stack1 = [] let stack2 = [] function ...

  4. 一个异常研究InvalidApartmentStateChange

    微软资料:invalidApartmentStateChange MDA 地址:https://docs.microsoft.com/zh-cn/dotnet/framework/debug-trac ...

  5. 现代浏览器性能优化-CSS篇

    我来填坑了,CSS篇终于写出来了,如果你没看过前面的JS篇,可以在这里观看. 众所周知,CSS的加载会阻塞浏览器渲染或是引起浏览器重绘,目前业界普遍推荐把CSS放到<head>中,防止在C ...

  6. c语言:当指针成为参数后

    指针就是一种指向内存地址的变量,利用它的一些特性我们可以完成很多工作 两个数字从小到大排序(引申的业务场景,对企业大佬的银行存款金额进行排序,这当然通过交换变量对应的数值来实现,否则盖茨大爷的钱可能全 ...

  7. BZOJ 3589 动态树 (树链剖分+线段树)

    前言 众所周知,90%90\%90%的题目与解法毫无关系. 题意 有一棵有根树,两种操作.一种是子树内每一个点的权值加上一个同一个数,另一种是查询多条路径的并的点权之和. 分析 很容易看出是树链剖分+ ...

  8. socket编程和并发服务器

    socket这个词可以表示很多概念: 在TCP/IP协议中,“IP地址+TCP或UDP端口号”唯一标识网络通讯中的一个进程,“IP地址+端口号”就称为socket. 在TCP协议中,建立连接的两个进程 ...

  9. c实现队列

    使用链表实现队列的入队和出队 #include <iostream> #include <stdio.h> #include <string.h> #include ...

  10. array_merge与array+array的区别

    结果: