flutter 项目实战六 drawer侧边栏

本项目借用 逛丢 网站的部分数据，仅作为 flutter 开发学习之用。 逛丢官方网址：https://guangdiu.com/

flutter windows开发环境设置

flutter 项目实战一 新建 flutter 项目

flutter 项目实战二 网络请求

flutter 项目实战三 json数据解析以及Gson格式化flutter 项目实战二 网络请求

flutter 项目实战四 列表数据展示

flutter 项目实战五 item 点击跳转，webview加载

flutter 项目实战六 drawer侧边栏

flutter 项目实战七 bottomNavigationBar

flutter 项目实战八 下拉刷新 上拉加载

flutter 项目实战九 小时风云榜

前几章实现了 网络数据获取、列表展示、跳转详情展示。本章进行到了侧边栏列表展示了，呈上 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下载地址