flutter 项目实战六 drawer侧边栏

最新推荐文章于 2024-05-15 23:13:48 发布
最新推荐文章于 2024-05-15 23:13:48 发布
阅读量2k 收藏 4
点赞数
分类专栏： flutter android studio flutter 文章标签： flutter flutter android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41191134/article/details/88872678
版权

本项目借用 逛丢 网站的部分数据，仅作为 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下载地址

禾枇-余
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
Flutter中的抽屉组件Drawer
越陌度阡
12-27 1543
1. 配置抽屉组件 1. drawer 左侧抽屉。值的类型为Widget； 2.endDrawer 右侧抽屉。值的类型为Widget； 代码示例： import "package:flutter/material.dart"; class CategoryPage extends StatefulWidget { CategoryPage({Key key}) : super(key: key); _CategoryPageState createState() => .
Flutter Drawer、DrawerHeader、 UserAccountsDrawerHeader 以及侧边栏内容布局
06-04
此资源是关于移动端框架Flutter（基于Android）的一些常见组件的介绍...此资源介绍的相关内容有：Drawer、DrawerHeader、 UserAccountsDrawerHeader 以及侧边栏内容布局。 适合新手学习移动端开发，也适合老司机参考。
Flutter侧边栏组件Drawer
juer2017的博客
07-19 740
Flutter侧边栏组件Drawer
Flutter 中的 Drawer 小部件：全面指南
最新发布
smileKH的博客
05-15 557
Drawer是一种用于移动应用的导航抽屉，它包含了一系列的菜单项，用户可以通过滑动手势将其打开和关闭。Drawer可以包含文本、图标、头像等，通常用于展示应用的导航选项。DrawerDrawer(elevation: 16, // 设置抽屉的阴影大小index'),// 处理点击事件// 关闭 Drawer},},),
flutter学习（七）Drawer实现侧边栏抽屉
小松与蘑菇
06-17 1651
在主页面上，
Flutter 抽屉组件之Drawer滑动侧边栏
June.1
03-22 1万+
Drawer配置 以下布局是系统方法,当然可以根据需求自定义布局。 class HomePageSet extends StatefulWidget { HomePageSet({Key key}) : super(key: key); @override _HomePageSetState createState() => _HomePageSetState(); } cl...
Flutter 手动控制Drawer的打开和关闭
qq_37124515的博客
04-01 2154
写了一个类似于淘宝筛选的页面功能，点击头部导航栏的按钮打开drawer，点击确定查询后关闭drawer 给Scaffold设置Key 在头部添加一个搜索的按钮，加上一个endDrawer，右侧划入，在child里面加入自己想要写的组件。 打开enddrawer可以使用调用Scaffold里面的openEndDrawer方法，如果你是用的drawer，就调用openDrawer。 关闭抽屉就是使用Navigator.pop(context);就可以啦 页面图来一个 ...
Element组件 Drawer 抽屉的关闭问题
热门推荐
u011280778的博客
09-07 2万+
场景 我使用的Drawer 抽屉是从上往下开的效果，点击搜索图标，从上往下开没问题，输入关键字搜索，搜索出来的列表放置于搜索栏下面，所以使用了一个子组件 问题就来了 搜出来的列表item，点击任意一条，地址栏的路由是变化了，但是这个Drawer 抽屉不会主动关闭， 解决思路 把父组件关于Drawer的实例，传到子组件去，代码如下 再在子组件里通过pros接收 ，代码如下 ...
Flutter高级项目实战视频课程.zip
02-24
网盘文件永久链接 非常经典的一套全新Flutter实战教程，课程内容由一线工程师为同学们倾力主讲，课程讲解内容包括了Flutter技术精讲和Flutter项目实施的全过程，很多细节技术都有涉及。
myflutter.zip Flutter项目实战
10-08
代码里面包含了一个Flutter完整的中型项目，包含列表的使用，各种布局的使用；比如：背景图片、水平垂直布局、定位、栅格布局等
Flutter 自定义Drawer 滑出位置的大小实例代码详解
08-19
Flutter 中的 Drawer 控件是一个非常常用的控件，它可以侧边栏滑出导航菜单，类似于 iOS 开发或者 Android 开发中的“抽屉”效果。_drawer 控件的使用频率也是比较高的，特别是在移动端开发中。今天，我们将来讨论...
Flutter上线项目实战记录之路由篇
01-20
1. 应用场景 开发中经常遇到 路由跳转时拿不到context怎么办，eg: token失效/异地登录跳转登录页面。 获取不到当前路由名称怎么办，eg: 点击push推送跳转指定路由，如果已经在当前页面就replace，如果不在就push。...
如何添加关闭el-drawer功能
weixin_44099060的博客
05-14 1910
在方法中加入 this.$refs.drawerRefName.closeDrawer() 其中drawerRefName是抽屉ref属性值
【flutter】drawer
ivy_doudou的博客
08-01 135
左侧 drawer: new Drawer( child: new ListView( children: <Widget>[ ], ), ), 右侧 endDrawer: new Drawer( child: new ListView( ...
flutter 打开与关闭Drawer抽屉
microcosm1994的博客
09-24 5084
关闭 Navigator.pop(context); // close the drawer 打开 Scaffold.of(context).openDrawer(); // 这个可能会报Scaffold.of() called with a context that does not contain a Scaffold.的错误，在上一篇博文中有解决方法 ...
Flutter 搭建具有 Drawer 和 BottomNavigationBar 的静态项目框架
weixin_34321977的博客
02-22 151
文章目录 相关文章推荐 实现效果 实现分析 首页实现 侧边栏实现 源码 相关文章 Flutter 环境搭建以及填坑指南（Win10 系统且已有 Android 开发环境 ） Flutter 入门实现 ListView 列表页面以及收藏页面 Flutter Widget 静态布局实战 Flutter 容器类 Widget 实现效果截图 实现分析 首页实现分析 底部 tab 实现 F...
Flutter强大的下拉筛选菜单gzx_dropdown_menu
Dream It Possible
08-03 5902
是一个Flutter自定义功能强大的轻量级下拉筛选菜单Package，它支持iOS和Android。A custom is strong dropdown menu for Flutter. Easy to use and powerful for customization, it's up to you what you want to display in the dropdown menu!查看版本更新记录效果图展示了仿美团和淘宝的下拉筛选菜单。 目前已发布到Pub，你可以在Pub官网查看最新的版
Flutter drawer侧滑栏实现
杰森丶郭达斯坦森的博客
12-05 722
侧滑栏对于大部分App来说都是经常用到的，接下来我们来一步步的实现flutter的侧滑栏效果。这里需要使用flutter提供的 Drawer和DrawerHeader控件，DrawerHeader通常用作侧滑栏的头部控件，比如用户头像等。 该控件常用的属性就是child属性，child就是drawer里面显示的具体子item。 属性名 属性值类型 说明 decoration Decoration类型 装饰背景颜色等，常用BoxDec
Flutter-Drawer使用
shelutai的博客
05-18 985
Scaffold的drawer属性是一个Widget类型的组件，从左侧边栏拉出，通常就是用一个Drawer对象实现（Scaffold的endDrawer属性定义了一个从右侧边栏拉出的导航面板）；Drawer的child属性定义了其展示的内容，通常是用一个 ListView来实现，而在ListView最上面通常会有个 DrawerHeader来设置当前用户的基本信息，最常用的一个具体的 DrawerHeader 是 UserAccountsDrawerHeader。通常用于在抽屉中在顶部展示一些基本信息；
flutter drawer 禁用侧滑
07-28
要禁用Flutter中的侧滑栏，可以通过将Scaffold的drawer属性设置为null来实现。具体代码如下： ```dart Scaffold( appBar: AppBar( title: Text('App Title'), ), drawer: null, // 禁用侧滑栏 body: Container...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值