分类列表右侧导航实现

mictang · Aug 1, 2019 · 0a55550 · 0a55550
1 parent f0eb344
commit 0a55550
Show file tree

Hide file tree

Showing 8 changed files with 168 additions and 7 deletions.
diff --git a/Shop/flutter_shop_center/lib/main.dart b/Shop/flutter_shop_center/lib/main.dart
@@ -2,7 +2,19 @@ import 'package:flutter/material.dart';
 
 import './pages/index_page.dart';
 
-void main()=>runApp(MyApp());
+import 'package:provide/provide.dart';
+import './provide/counter.dart';
+import './provide/child_category.dart';
+
+void main(){
+  var counter = Counter();
+  var childCategory = ChildCategory();
+  var provides = Providers();
+  provides..provide(Provider<Counter>.value(counter))
+  ..provide(Provider<ChildCategory>.value(childCategory));
+  runApp(ProviderNode(child: MyApp(), providers: provides));
+}
+
 
 class MyApp extends StatelessWidget {
   @override

diff --git a/Shop/flutter_shop_center/lib/pages/cart_page.dart b/Shop/flutter_shop_center/lib/pages/cart_page.dart
@@ -1,12 +1,48 @@
 import 'package:flutter/material.dart';
 
+import 'package:provide/provide.dart';
+import '../provide/counter.dart';
+
 class CartPage extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
       body: Center(
-        child: Text('购物车'),
+        child: Column(
+          children: <Widget>[
+            MyNumber(),
+            MyButton()
+          ],
+        )
+      ),
+    );
+  }
+}
+
+class MyNumber extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      margin: EdgeInsets.only(top: 200),
+      child: Provide<Counter>(
+          builder: (context, child, counter) {
+            return Text('${counter.value}', style: TextStyle(fontSize: 30),);
+          }
+      ),
+    );
+  }
+}
+
+class MyButton extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      child: RaisedButton(
+        onPressed: (){
+          Provide.value<Counter>(context).increment();
+        },
+        child: Text('递增'),
       ),
     );
   }
-}
+}
diff --git a/Shop/flutter_shop_center/lib/pages/category_page.dart b/Shop/flutter_shop_center/lib/pages/category_page.dart
@@ -5,6 +5,9 @@ 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
@@ -21,6 +24,11 @@ class _CategoryPageState extends State<CategoryPage> {
         child: Row(
           children: <Widget>[
             LeftCategoryView(),
+            Column(
+              children: <Widget>[
+                RightCategoryView(),
+              ],
+            )
           ],
         ),
       ),
@@ -29,41 +37,59 @@ class _CategoryPageState extends State<CategoryPage> {
 
 }
 
-
+//左侧竖向导航栏
 class LeftCategoryView extends StatefulWidget {
   @override
   _LeftCategoryViewState createState() => _LeftCategoryViewState();
 }
 
 class _LeftCategoryViewState extends State<LeftCategoryView> {
 
+  //数据源数组
   List<Data> list = [];
+  //当前选中
+  int currentIndex = 0;
 
   @override
   void initState() {
     super.initState();
     _getRequest();
   }
 
+  //数据请求
   void _getRequest() async {
     await requestPost('getCategory').then((val){
       var data = json.decode(val.toString());
       CategoryModel listModel = CategoryModel.fromJson(data);
       setState(() {
         list = listModel.data;
       });
+      //解决第一次进入分类界面时，右侧导航没有值
+      Provide.value<ChildCategory>(context).getChildCategoryList(list[0].bxMallSubDto);
     });
   }
 
+  //每一个类别,例如：饮料
   Widget _leftItem(int index){
+
+    //改变点击时的颜色
+    bool isClick = false;
+    isClick = (index == currentIndex)? true:false;
+
     return InkWell(
-      onTap: (){},
+      onTap: (){
+        var childList = list[index].bxMallSubDto;
+        Provide.value<ChildCategory>(context).getChildCategoryList(childList);
+        setState(() {
+          currentIndex = index;
+        });
+      },
       child: Container(
         padding: EdgeInsets.only(left: 10, top: 20),
         height: ScreenUtil().setHeight(100),
         //decoration之后就不能再用color
         decoration: BoxDecoration(
-            color: Colors.white,
+            color:  isClick?Color.fromRGBO(244, 244, 244, 1):Colors.white,
             border: Border(
                 bottom: BorderSide(color: Colors.black12, width: 1)
             )
@@ -94,3 +120,45 @@ class _LeftCategoryViewState extends State<LeftCategoryView> {
     );
   }
 }
+
+//右侧每个导航详情
+class RightCategoryView extends StatefulWidget {
+  @override
+  _RightCategoryViewState createState() => _RightCategoryViewState();
+}
+
+class _RightCategoryViewState extends State<RightCategoryView> {
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      height: ScreenUtil().setHeight(70),
+      width: ScreenUtil().setWidth(750.0-180.0),
+      decoration: BoxDecoration(
+        color: Colors.white,
+        border: Border(bottom: BorderSide(color: Colors.black12,width: 1))
+      ),
+      child: Provide<ChildCategory>(
+        builder: (context, child, childCategory){
+          return ListView.builder(
+            scrollDirection: Axis.horizontal,
+            itemCount: childCategory.childCategoryList.length,
+            itemBuilder: (context, index){
+              return _rightTitleItem(childCategory.childCategoryList[index]);
+            },
+          );
+        },
+      ),
+    );
+  }
+
+  Widget _rightTitleItem(BxMallSubDto item){
+    return InkWell(
+      onTap: (){},
+      child: Container(
+        padding: EdgeInsets.fromLTRB(8, 10, 8, 10),
+        child: Text(item.mallSubName, style: TextStyle(fontSize: ScreenUtil().setSp(28)),),
+      ),
+    );
+  }
+}
diff --git a/Shop/flutter_shop_center/lib/pages/member_page.dart b/Shop/flutter_shop_center/lib/pages/member_page.dart
@@ -1,11 +1,18 @@
 import 'package:flutter/material.dart';
 
+import 'package:provide/provide.dart';
+import '../provide/counter.dart';
+
 class MemberPage extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
       body: Center(
-        child: Text('会员中心'),
+        child: Provide<Counter>(
+            builder: (context, child, counter) {
+              return Text('${counter.value}', style: TextStyle(fontSize: 30),);
+            }
+        ),
       ),
     );
   }

diff --git a/Shop/flutter_shop_center/lib/provide/child_category.dart b/Shop/flutter_shop_center/lib/provide/child_category.dart
@@ -0,0 +1,20 @@
+import 'package:flutter/material.dart';
+import '../model/category.dart';
+
+class ChildCategory with ChangeNotifier{
+
+  List<BxMallSubDto> childCategoryList = [];
+
+  getChildCategoryList(List<BxMallSubDto> list){
+
+    BxMallSubDto all = BxMallSubDto();
+    all.mallSubName = '全部';
+    all.comments = 'null';
+    all.mallCategoryId = '00';
+    all.mallSubId = '00';
+    childCategoryList = [all];
+    childCategoryList.addAll(list);
+    notifyListeners();
+  }
+
+}
diff --git a/Shop/flutter_shop_center/lib/provide/counter.dart b/Shop/flutter_shop_center/lib/provide/counter.dart
@@ -0,0 +1,10 @@
+import 'package:flutter/material.dart';
+
+class Counter with ChangeNotifier {
+  int value =0 ;
+
+  increment(){
+    value++;
+    notifyListeners();
+  }
+}
diff --git a/Shop/flutter_shop_center/pubspec.lock b/Shop/flutter_shop_center/pubspec.lock
@@ -116,6 +116,13 @@ packages:
       url: "https://pub.flutter-io.cn"
     source: hosted
     version: "1.7.0"
+  provide:
+    dependency: "direct main"
+    description:
+      name: provide
+      url: "https://pub.flutter-io.cn"
+    source: hosted
+    version: "1.0.2"
   quiver:
     dependency: transitive
     description:

diff --git a/Shop/flutter_shop_center/pubspec.yaml b/Shop/flutter_shop_center/pubspec.yaml
@@ -28,6 +28,7 @@ dependencies:
   flutter_screenutil: ^0.5.1
   url_launcher: ^5.0.1
   flutter_easyrefresh: ^1.2.7
+  provide: ^1.0.2
 
 dev_dependencies:
   flutter_test: