添加订单筛选页面

lib/pages/orders_page/orders_page.dart

@@ -1,5 +1,6 @@
 import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
+import 'package:zhiying_base_widget/pages/orders_page/views/order_filter.dart';
 import 'package:zhiying_base_widget/pages/orders_page/views/order_item_widget.dart';
 import 'package:zhiying_base_widget/pages/orders_page/views/order_serch_widget.dart';
 import 'package:zhiying_base_widget/pages/orders_page/views/order_tabbar_widget.dart';
@@ -75,6 +76,10 @@ class _OrdersContainerState extends State<_OrdersContainer>
     with TickerProviderStateMixin {
   TabController _tabController;
 
+  GlobalKey _tabKey = GlobalKey();
+
+  bool _isFilterShow = false;
+
   @override
   void initState() {
     _tabController = TabController(length: 6, vsync: this);
@@ -86,20 +91,37 @@ class _OrdersContainerState extends State<_OrdersContainer>
     return Column(
       children: <Widget>[
         OrderSearchWidget(),
-        OrderTabbarWidget(_tabController, [
-          '全部',
-          '已付款',
-          '已结算',
-          '已失效',
-          '全部',
-          '已付款',
-        ]),
+        OrderTabbarWidget(
+          _tabController,
+          [
+            '全部',
+            '已付款',
+            '已结算',
+            '已失效',
+            '全部',
+            '已付款',
+          ],
+          key: _tabKey,
+          onMoreClick: () {
+            setState(() {
+              _isFilterShow = !_isFilterShow;
+            });
+          },
+        ),
         Expanded(
-          child: ListView.builder(
-              itemCount: 20,
-              itemBuilder: (context, index) {
-                return OrderItemWidget();
-              }),
+          child: Stack(
+            children: <Widget>[
+              ListView.builder(
+                  itemCount: 20,
+                  itemBuilder: (context, index) {
+                    return OrderItemWidget();
+                  }),
+              Visibility(
+                visible: _isFilterShow,
+                child: OrderFilterWidget(),
+              )
+            ],
+          ),
         )
       ],
     );

lib/pages/orders_page/views/order_filter.dart

@@ -0,0 +1,199 @@
+import 'package:flutter/material.dart';
+import 'package:zhiying_base_widget/widgets/others/action_date_alert/action_date_alert.dart';
+
+class OrderFilterWidget extends StatefulWidget {
+  @override
+  _OrderFilterWidgetState createState() => _OrderFilterWidgetState();
+}
+
+class _OrderFilterWidgetState extends State<OrderFilterWidget> {
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      width: double.infinity,
+      height: double.infinity,
+      color: Color(0x55555555),
+      child: Column(
+        mainAxisAlignment: MainAxisAlignment.start,
+        children: <Widget>[
+          _creteTitle('订单来源'),
+          _createTags(),
+          _creteTitle('订单类型'),
+          _createTags(),
+          _creteTitle('订单时间'),
+          _creteTime(),
+          Container(
+            width: double.infinity,
+            height: 0.5,
+            color: Color(0xffe3e3e3),
+          ),
+          _createButtons(),
+        ],
+      ),
+    );
+  }
+
+  Widget _creteTitle(String title) {
+    return Container(
+      padding: EdgeInsets.only(left: 12.5, right: 12.5, top: 4, bottom: 4),
+      width: double.infinity,
+      color: Colors.white,
+      child: Text(
+        title,
+        style: TextStyle(
+            color: Color(0xff333333),
+            fontSize: 14,
+            fontWeight: FontWeight.bold),
+      ),
+    );
+  }
+
+  Widget _createTags() {
+    return Container(
+      width: double.infinity,
+      padding:
+          const EdgeInsets.only(left: 12.5, right: 12.5, bottom: 5, top: 5),
+      color: Colors.white,
+      child: Wrap(
+        crossAxisAlignment: WrapCrossAlignment.start,
+        spacing: 20,
+        runSpacing: 10,
+        children: List.generate(10, (index) {
+          return Container(
+            padding: EdgeInsets.only(left: 8, right: 8, top: 4, bottom: 4),
+            decoration: BoxDecoration(
+                color: Colors.blue, borderRadius: BorderRadius.circular(5)),
+            child: Text(
+              'aaaa',
+              style: TextStyle(fontSize: 12),
+            ),
+          );
+        }).toList(),
+      ),
+    );
+  }
+
+  Widget _createButtons() {
+    return Container(
+      height: 54,
+      width: double.infinity,
+      decoration: BoxDecoration(
+        color: Colors.white,
+        borderRadius: BorderRadius.only(
+          bottomLeft: Radius.circular(12.5),
+          bottomRight: Radius.circular(12.5),
+        ),
+      ),
+      child: Row(
+        children: <Widget>[
+          Expanded(
+            child: Container(
+              color: Colors.transparent,
+              child: Center(
+                child: Text(
+                  '重置',
+                  style: TextStyle(fontSize: 15, color: Color(0xff999999)),
+                ),
+              ),
+            ),
+          ),
+          Container(
+            margin: EdgeInsets.only(top: 12, bottom: 12),
+            height: double.infinity,
+            width: 0.5,
+            color: Color(0xffe3e3e3),
+          ),
+          Expanded(
+            child: Container(
+              color: Colors.transparent,
+              child: Center(
+                child: Text(
+                  '确定',
+                  style: TextStyle(fontSize: 15, color: Colors.redAccent),
+                ),
+              ),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+
+  Widget _creteTime() {
+    return Container(
+      color: Colors.white,
+      padding: EdgeInsets.only(left: 12, right: 12, top: 4, bottom: 20),
+      child: Row(
+        children: <Widget>[
+          GestureDetector(
+            child: Container(
+              width: 125,
+              height: 25,
+              margin: EdgeInsets.only(right: 10),
+              decoration: BoxDecoration(
+                  color: Color(0xfff1f1f1),
+                  borderRadius: BorderRadius.circular(5)),
+              child: Center(
+                child: Text(
+                  '2020-06',
+                  style: TextStyle(
+                    fontSize: 12,
+                    color: Color(0xff999999),
+                  ),
+                ),
+              ),
+            ),
+            onTap: () {
+              _selectDate();
+            },
+          ),
+          Text(
+            '至',
+            style: TextStyle(
+              fontSize: 12,
+              color: Color(0xff999999),
+            ),
+          ),
+          GestureDetector(
+            child: Container(
+              width: 125,
+              height: 25,
+              margin: EdgeInsets.only(left: 10),
+              decoration: BoxDecoration(
+                  color: Color(0xfff1f1f1),
+                  borderRadius: BorderRadius.circular(5)),
+              child: Center(
+                child: Text(
+                  '2020-06',
+                  style: TextStyle(
+                    fontSize: 12,
+                    color: Color(0xff999999),
+                  ),
+                ),
+              ),
+            ),
+            onTap: () {
+              _selectDate();
+            },
+          ),
+        ],
+      ),
+    );
+  }
+
+  void _selectDate() async {
+    DateTime dateTime = await showModalBottomSheet(
+        context: context,
+        builder: (context) {
+          return ActionDateAlert(
+            title: '选择起始日期',
+          );
+        },
+        isScrollControlled: false,
+        backgroundColor: Colors.transparent);
+    if (dateTime != null) {
+      String timeStamp =
+          (dateTime.millisecondsSinceEpoch / 1000).ceil().toString();
+    }
+  }
+}

lib/pages/orders_page/views/order_tabbar_widget.dart

@@ -3,11 +3,13 @@ import 'package:flutter/material.dart';
 class OrderTabbarWidget extends StatelessWidget {
   final TabController controller;
   final List<String> titles;
+  final VoidCallback onMoreClick;
 
   const OrderTabbarWidget(
     this.controller,
     this.titles, {
     Key key,
+    this.onMoreClick,
   }) : super(key: key);
 
   @override
@@ -28,13 +30,20 @@ class OrderTabbarWidget extends StatelessWidget {
                     .toList(),
               ),
             ),
-            Container(
-              width: 40,
-              height: 40,
-              child: Icon(
-                Icons.filter_4,
-                size: 14,
+            GestureDetector(
+              child: Container(
+                width: 40,
+                height: 40,
+                child: Icon(
+                  Icons.filter_4,
+                  size: 14,
+                ),
               ),
+              onTap: () {
+                if (onMoreClick != null) {
+                  onMoreClick();
+                }
+              },
             )
           ],
         ));