Flutter移动电商实战 --（26）列表页_使用Provide控制子类-2

怼烎@ 2023-06-01 05:59 16阅读 0赞

主要实现功能，点击一级分类，二级分类跟着变。这里主要用我们的provide

# 新建provide #

provide文件夹下创建：child\_category.dart

![1090399-20190901180044009-804640425.png][]

![1090399-20190901180055547-75086363.png][]

事件上就是这个实体：BxMallSubDto

![1090399-20190901180127072-974437915.png][]

这样我们的Provide类就写完了。

![1090399-20190901180158886-382463359.png][]

# 然后在main.dart中注册provide #

![1090399-20190901180232211-1379794361.png][]

import './provide/child_category.dart';

![1090399-20190901180300628-1677222974.png][]

# 继续category\_page.dart #

先引入我们的provide和childCategory的provide

import 'package:provide/provide.dart';
    import '../provide/child_category.dart';

给左侧的类别加事件

左侧每个元素的点击事件

![1090399-20190901180353405-1470528585.png][]

![1090399-20190901180414332-1270263159.png][]

# 右侧的小分类 #

![1090399-20190901180444532-1074995804.png][]

![1090399-20190901180509208-978630631.png][]

移动过来以后呢，这里就报错了，因为我们的list已经注释带掉了不用了。

![1090399-20190901180543579-395426997.png][]

![1090399-20190901180613671-333601203.png][]

# 效果展示 #

点击左侧大类会显示右侧的小类别

![1090399-20190901180646910-1755412431.png][]

# 增加点击的左侧大类，高亮效果 #

我们用setState去解决这个问题

![1090399-20190901180714623-550306816.png][]

# 最终展示效果 #

![1090399-20190901180756603-1731319771.png][]

# 最终代码 #

provide/child\_category.dart

import 'package:flutter/material.dart';
    import '../model/category.dart';
    
    class ChildCategory with ChangeNotifier{
     List<BxMallSubDto> childCategoryList=[];
      
      getChildCategory(List list)
      {
        childCategoryList=list;
        notifyListeners();//监听
      }
    }

lib/main.dart

import 'package:flutter/material.dart';
    import './pages/index_page.dart';
    import 'package:provide/provide.dart';
    import './provide/counter.dart';
    import './provide/child_category.dart';
    
    
    void main(){
     var counter=Counter();
     var providers=Providers();
     var childCategory=ChildCategory();
     //注册 依赖
     providers
     ..provide(Provider<Counter>.value(counter))
     ..provide(Provider<ChildCategory>.value(childCategory)); 
      runApp(ProviderNode(child: MyApp(),providers: providers,));
    }
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Container(
          child:MaterialApp(
            title:'百姓生活+',
            debugShowCheckedModeBanner: false,
            theme: ThemeData(
              primaryColor: Colors.pink
            ),
            home: IndexPage(),
          )
        );
      }
    }

category\_page.dart

import 'package:flutter/material.dart';
    import '../service/service_method.dart';
    import 'dart:convert';
    import '../model/category.dart';
    import 'package:flutter_screenutil/flutter_screenutil.dart';
    import 'package:provide/provide.dart';
    import '../provide/child_category.dart';
    
    class CategoryPage extends StatefulWidget {
      @override
      _CategoryPageState createState() => _CategoryPageState();
    }
    
    class _CategoryPageState extends State<CategoryPage> {
      @override
      Widget build(BuildContext context) {
        //_getCategory();
        return Scaffold(
          appBar: AppBar(title: Text('商品分类'),),
          body: Container(
            child: Row(
              children: <Widget>[
                LeftCategoryNav(),
                Column(
                  children: <Widget>[
                    RightCategoryNav()
                  ],
                )
              ],
            ),
          ),
        );
      }
    
     
    }
    
    //左侧大类导航
    class LeftCategoryNav extends StatefulWidget {
      @override
      _LeftCategoryNavState createState() => _LeftCategoryNavState();
    }
    
    class _LeftCategoryNavState extends State<LeftCategoryNav> {
      List list=[];
      var listIndex=0;
      @override
      void initState() { 
        super.initState();
        _getCategory();//请求接口的数据
      }
      @override
      Widget build(BuildContext context) {
        return Container(
          width: ScreenUtil().setWidth(180),
          decoration: BoxDecoration(
            border: Border(
              right: BorderSide(width:1.0,color: Colors.black12),//有边框
            )
          ),
          child: ListView.builder(
            itemCount: list.length,
            itemBuilder: (contex,index){
              return _leftInkWell(index);
            },
          ),
        );
      }
    
      Widget _leftInkWell(int index){
        bool isClick=false;
        isClick=(index==listIndex)?true:false;
        return InkWell(
          onTap: (){
            setState(() {
             listIndex=index; 
            });
            var childList=list[index].bxMallSubDto;//当前大类的子类的列表
            Provide.value<ChildCategory>(context).getChildCategory(childList);
          },
          child: Container(
            height: ScreenUtil().setHeight(100),
            padding: EdgeInsets.only(left:10.0,top:10.0),
            decoration: BoxDecoration(
              color: isClick?Colors.black26: Colors.white,
              border: Border(
                bottom: BorderSide(width: 1.0,color: Colors.black12)
              )
            ),
            child: Text(
              list[index].mallCategoryName,
              style: TextStyle(fontSize: ScreenUtil().setSp(28)),//设置字体大小，为了兼容使用setSp
            ),
          ),
        );
      }
       void _getCategory() async{
        await request('getCategory').then((val){
          var data=json.decode(val.toString());
          //print(data);
          CategoryModel category= CategoryModel.fromJson(data);
          setState(() {
           list=category.data; 
          });
          //list.data.forEach((item)=>print(item.mallCategoryName));
        });
      }
    }
    
    class RightCategoryNav extends StatefulWidget {
      @override
      _RightCategoryNavState createState() => _RightCategoryNavState();
    }
    
    class _RightCategoryNavState extends State<RightCategoryNav> {
      //List list = ['名酒','宝丰','北京二锅头','舍得','五粮液','茅台','散白'];
      @override
      Widget build(BuildContext context) {
        return Provide<ChildCategory>(
          builder: (context,child,childCategory){
            return  Container(
              height: ScreenUtil().setHeight(80),
              width: ScreenUtil().setWidth(570),//总的宽度是750 -180
              decoration: BoxDecoration(
                color: Colors.white,//白色背景
                border: Border(
                  bottom: BorderSide(width: 1.0,color: Colors.black12)//边界线
                )
              ),
              child: ListView.builder(
                scrollDirection: Axis.horizontal,
                itemCount: childCategory.childCategoryList.length,
                itemBuilder: (context,index){
                  return _rightInkWell(childCategory.childCategoryList[index]);
                },
              ),
            );
          }
        );
      }
    
      Widget _rightInkWell(BxMallSubDto item){
        return InkWell(
          onTap: (){},//事件留空
          child: Container(//什么都加一个container，这样好布局
            padding: EdgeInsets.fromLTRB(5.0, 10.0, 5.0, 10.0),//上下是10 左右是5.0
            child: Text(
              item.mallSubName,
              style:TextStyle(fontSize: ScreenUtil().setSp(28)),
            ),
          ),
        );
      }
    }

转载于:https://www.cnblogs.com/crazycode2/p/11407967.html

[1090399-20190901180044009-804640425.png]: /images/20230601/d6e7704aa5a54cb2b411f61f1b2a1665.png
[1090399-20190901180055547-75086363.png]: /images/20230601/0b940ae9670d455c9d60279df7c285e9.png
[1090399-20190901180127072-974437915.png]: /images/20230601/08a27b257ff64e50b0b404d16fb12558.png
[1090399-20190901180158886-382463359.png]: /images/20230601/fc4d7b471ac94d6db783351a6d4a877f.png
[1090399-20190901180232211-1379794361.png]: /images/20230601/d140a96479e64be0887dca691392ba55.png
[1090399-20190901180300628-1677222974.png]: /images/20230601/43b29dabc55d459b9f9113d653900fd4.png
[1090399-20190901180353405-1470528585.png]: /images/20230601/b3a4425357674f2ea448e0f6eabcc546.png
[1090399-20190901180414332-1270263159.png]: /images/20230601/3a67136eae6847a784afb0fa5fc94b4e.png
[1090399-20190901180444532-1074995804.png]: /images/20230601/aae8124ceb7b4fd198ab8feae96b93da.png
[1090399-20190901180509208-978630631.png]: /images/20230601/dc1d864e71b148f68a93f7bfcb85fb21.png
[1090399-20190901180543579-395426997.png]: /images/20230601/e4e3e1a301aa4817b07323b99ea5b4cc.png
[1090399-20190901180613671-333601203.png]: /images/20230601/02301d227d704649828b652765d0f405.png
[1090399-20190901180646910-1755412431.png]: /images/20230601/49d4d8a8610a49e7a6a7a9119d16a1a4.png
[1090399-20190901180714623-550306816.png]: /images/20230601/102204f923c54d1f8bcf0ff655a123d8.png
[1090399-20190901180756603-1731319771.png]: /images/20230601/d83efafc71204daca64fe9ec3921215f.png