diff --git a/lib/pages/orders_page/orders_page.dart b/lib/pages/orders_page/orders_page.dart index f4ae594..c12e529 100644 --- a/lib/pages/orders_page/orders_page.dart +++ b/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: [ 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: [ + ListView.builder( + itemCount: 20, + itemBuilder: (context, index) { + return OrderItemWidget(); + }), + Visibility( + visible: _isFilterShow, + child: OrderFilterWidget(), + ) + ], + ), ) ], ); diff --git a/lib/pages/orders_page/views/order_filter.dart b/lib/pages/orders_page/views/order_filter.dart new file mode 100644 index 0000000..281141e --- /dev/null +++ b/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 { + @override + Widget build(BuildContext context) { + return Container( + width: double.infinity, + height: double.infinity, + color: Color(0x55555555), + child: Column( + mainAxisAlignment: MainAxisAlignment.start, + children: [ + _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: [ + 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: [ + 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(); + } + } +} diff --git a/lib/pages/orders_page/views/order_tabbar_widget.dart b/lib/pages/orders_page/views/order_tabbar_widget.dart index 14d2dd4..158687e 100644 --- a/lib/pages/orders_page/views/order_tabbar_widget.dart +++ b/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 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(); + } + }, ) ], ));