本项目借用 逛丢 网站的部分数据,仅作为 flutter 开发学习之用。 逛丢官方网址:https://guangdiu.com/
flutter 项目实战三 json数据解析以及Gson格式化flutter 项目实战二 网络请求
flutter 项目实战五 item 点击跳转,webview加载
flutter 项目实战七 bottomNavigationBar
前几章实现了 网络数据获取、列表展示、跳转详情展示。本章进行到了侧边栏列表展示了,呈上 kotlin 项目页面的示例图
侧边栏的数据比较固定,所以我们在配置文件里面给的数组
var index_type=[
{
"title" : "==",
"mall" : "",
"cate" : "",
"type":"==",
"country":"cn"
},
{
"title" : "全部",
"mall" : "",
"cate" : "",
"type":"all",
"country":"cn"
},
{
"title" : "只看热门",
"mall" : "",
"cate" : "",
"type":"hot",
"country":"cn"
},
{
"title" : "==",
"mall" : "",
"cate" : "",
"type":"==",
"country":"cn"
},
{
"title" : "京东",
"mall" : "京东商城",
"cate" : "",
"type":"mall",
"country":"cn"
},
{
"title" : "亚马逊中国",
"mall" : "亚马逊中国",
"cate" : "",
"type":"mall",
"country":"cn"
},
{
"title" : "天猫",
"mall" : "天猫",
"cate" : "",
"type":"mall",
"country":"cn"
},
{
"title" : "==",
"mall" : "",
"cate" : "",
"type":"==",
"country":"cn"
},
{
"title" : "数码",
"mall" : "",
"cate" : "digital",
"type":"cate",
"country":"cn"
},
{
"title" : "母婴",
"mall" : "",
"cate" : "baby",
"type":"cate",
"country":"cn"
},
{
"title" : "服装",
"mall" : "",
"cate" : "clothes",
"type":"cate",
"country":"cn"
},
{
"title" : "食品",
"mall" : "",
"cate" : "food",
"type":"cate",
"country":"cn"
},
{
"title" : "旅行",
"mall" : "",
"cate" : "travel",
"type":"cate",
"country":"cn"
},
{
"title" : "家电",
"mall" : "",
"cate" : "electrical",
"type":"cate",
"country":"cn"
},
{
"title" : "日用",
"mall" : "",
"cate" : "daily",
"type":"cate",
"country":"cn"
},
{
"title" : "囤货",
"mall" : "",
"cate" : "stockup",
"type":"cate",
"country":"cn"
},
{
"title" : "运动户外",
"mall" : "",
"cate" : "sport",
"type":"cate",
"country":"cn"
},
{
"title" : "美妆配饰",
"mall" : "",
"cate" : "makeup",
"type":"cate",
"country":"cn"
},
{
"title" : "汽车用品",
"mall" : "",
"cate" : "automobile",
"type":"cate",
"country":"cn"
},
{
"title" : "促销活动",
"mall" : "",
"cate" : "sale",
"type":"cate",
"country":"cn"
}
];
此处将 == 号作为分割线使用
修改方法 _listInfos()
Widget _listInfos(){
return Scaffold(
key: _globalKeyState,
body: ListView.builder(
itemCount: _listData==null?0:_listData.length,
itemBuilder: (content,index){
RstData data=_listData[index];
return GestureDetector(
child: IndexItem(rstData: data,),
onTap: (){
_itemClick(data);
},
);
}
),
drawer: _setDrawerList(),//侧边栏
);
}
通过 _globalKeyState 控制侧边栏的打开与关闭动作,GlobalKey<ScaffoldState> _globalKeyState=GlobalKey();
//切换侧边栏的打开与关闭
void _changeDrawer(){
if(_globalKeyState.currentState.isDrawerOpen){
_globalKeyState.currentState.openEndDrawer();
}else{
_globalKeyState.currentState.openDrawer();
}
}
侧边栏的列表
//侧边栏列表
Widget _setDrawerList(){
var type=index_type;
return Container(
width: 200,
color: Colors.white,
child: ListView.builder(
itemCount: type.length,
itemBuilder: (context,index){
Map<String,String> map=type[index];
return _drawerItem(map);
}),
);
}
//侧边栏 item
Widget _drawerItem(Map<String,String> map){
if(map["title"]=="=="){
return Container(
height: 1,
decoration: BoxDecoration(
color: Colors.black54,
),
);
}else{
return GestureDetector(
child: Container(
height: 35,
padding: EdgeInsets.only(left: 5),
alignment: Alignment.centerLeft,
child: Text(map["title"]),
),
onTap: (){
_drawerItemClick(map);
},
);
}
}
//侧边栏点击事件
void _drawerItemClick(Map<String,String> map){
FormData formData=FormData();
if(_listData!=null && _listData.length>0){
formData.add("markid", "${_listData[0].id}");
}else {
formData.add("markid", "5685521");
}
if(map["type"]=="all"){
setState(() {
title = "首页";
});
}else {
setState(() {
title = "首页-${map["title"]}";
});
if (map["type"] == "hot") {
formData.add("onlyhots", 1);
} else if (map["type"] == "mall") {
formData.add("mall", map["mall"]);
} else if (map["type"] == "cate") {
formData.add("cate", map["cate"]);
}
}
_getGuangdiuIndexData(formData);
_changeDrawer();
}
在侧边栏选中不同的类型之后,需要根据选中的类型重新获取数据
修改后的 HomeIndex 代码
import 'package:flutter/material.dart';
import 'table/resp_result.dart';
import 'util/http_util.dart';
import 'package:dio/dio.dart';
import 'widget/index_item.dart';
import 'ItemInfoDetail.dart';
import 'configure/type.dart';
class HomeIndex extends StatefulWidget{
@override
State<StatefulWidget> createState() {
// TODO: implement createState
return IndexWidget();
}
}
class IndexWidget extends State<HomeIndex>{
List<RstData> _listData;//设置列表数据
GlobalKey<ScaffoldState> _globalKeyState=GlobalKey();
String title="首页";
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(
title: Text(title,style: TextStyle(color: Colors.white),),
leading: IconButton(
icon: Icon(Icons.menu,color: Colors.white,),
onPressed: (){
_changeDrawer();//切换drawer的关闭打开
}),
backgroundColor: Colors.green[500],
),
body: _listInfos(),
);
}
//list列表
Widget _listInfos(){
return Scaffold(
key: _globalKeyState,
body: ListView.builder(
itemCount: _listData==null?0:_listData.length,//此处展示需要写成 3,实际适用时 _listData==null?0:_listData.length
itemBuilder: (content,index){
RstData data=_listData[index];
return GestureDetector(
child: IndexItem(rstData: data,),
onTap: (){
_itemClick(data);
},
);
}
),
drawer: _setDrawerList(),
);
}
//切换侧边栏的打开与关闭
void _changeDrawer(){
if(_globalKeyState.currentState.isDrawerOpen){
_globalKeyState.currentState.openEndDrawer();
}else{
_globalKeyState.currentState.openDrawer();
}
}
//侧边栏列表
Widget _setDrawerList(){
var type=index_type;
return Container(
width: 200,
color: Colors.white,
child: ListView.builder(
itemCount: type.length,
itemBuilder: (context,index){
Map<String,String> map=type[index];
return _drawerItem(map);
}),
);
}
//侧边栏 item
Widget _drawerItem(Map<String,String> map){
if(map["title"]=="=="){
return Container(
height: 1,
decoration: BoxDecoration(
color: Colors.black54,
),
);
}else{
return GestureDetector(
child: Container(
height: 35,
padding: EdgeInsets.only(left: 5),
alignment: Alignment.centerLeft,
child: Text(map["title"]),
),
onTap: (){
_drawerItemClick(map);
},
);
}
}
//侧边栏点击事件
void _drawerItemClick(Map<String,String> map){
FormData formData=FormData();
if(_listData!=null && _listData.length>0){
formData.add("markid", "${_listData[0].id}");
}else {
formData.add("markid", "5685521");
}
if(map["type"]=="all"){
setState(() {
title = "首页";
});
}else {
setState(() {
title = "首页-${map["title"]}";
});
if (map["type"] == "hot") {
formData.add("onlyhots", 1);
} else if (map["type"] == "mall") {
formData.add("mall", map["mall"]);
} else if (map["type"] == "cate") {
formData.add("cate", map["cate"]);
}
}
_getGuangdiuIndexData(formData);
_changeDrawer();
}
void _itemClick(RstData data){
Navigator.push(context, MaterialPageRoute(builder: (cx)=>ItemInfoDetail(id: data.id,title: data.title,)));
}
@override
void initState() {
// TODO: implement initState
super.initState();
FormData formData=FormData();
formData.add("markid", "5685521");
_getGuangdiuIndexData(formData);
}
void _getGuangdiuIndexData(FormData formData) async{
String url="getlist.php";
Response resp=await HttpUtil().post(url,data: formData).then((resp){
RespResult respResult=RespResult.fromJson(resp.data);
setState(() {
_listData=respResult.data;
});
});
}
}
app示例图
码云 git 下载
kotlin版本的源码下载:git下载地址