筛选 初步布局

lib/models/library.dart

@@ -342,6 +342,21 @@ class BookDetailModel {
     return map;
   }
 
+
+
+}
+
+class FilterModel {
+  FilterModel({
+    required this.id,
+    required this.name,
+    this.selected = false
+  });
+
+  String id;
+  String name;
+  late bool selected = false;
+
 }
 
 

lib/pages/library/controller.dart

@@ -24,10 +24,35 @@ class LibraryController extends GetxController with GetTickerProviderStateMixin{
   int _page = 1;
   bool _noMore = false;
 
+  late AnimationController _controller;
+  bool _show = false;
+
+  bool get show => _show;
+  void setShow(bool value) {
+    _show = !value;
+    if (_show) {
+      /// 开启动画
+      _controller.forward();
+    }
+    else {
+      /// 收回动画
+      _controller.reverse();
+    }
+    update();
+  }
+
+
+  AnimationController get controller => _controller;
+
   @override
   void onInit() {
     // 获取分类数据
     _getTabs();
+
+    _controller = AnimationController(
+      vsync: this,
+      duration: const Duration(milliseconds: 100),
+    );
     super.onInit();
 
   }

lib/pages/library/index.dart

@@ -24,3 +24,4 @@ part 'controller.dart';
 part 'widgets/cell.dart';
 part 'widgets/content.dart';
 part 'widgets/subject.dart';
+part 'widgets/filter.dart';
\ No newline at end of file

lib/pages/library/view.dart

@@ -26,9 +26,12 @@ class _LibraryPageState extends State<LibraryPage> with AutomaticKeepAliveClient
                 },
               ),
             ],
-            bottom: PreferredSize(
-              preferredSize: const Size.fromHeight(38),
-              child: Container(
+          ),
+          body: Stack(
+            children: [
+              Column(
+                children: [
+                  Container(
                     color: Colors.white,
                     width: double.infinity,
                     child: Container(
@@ -54,6 +57,22 @@ class _LibraryPageState extends State<LibraryPage> with AutomaticKeepAliveClient
                             ),
                           ),
                           GestureDetector(
+                            onTap: (){
+                              controller.setShow(controller.show);
+                              // showModalBottomSheet(
+                              //   context: context,
+                              //   isScrollControlled: true, // 设置为 true
+                              //   builder: (BuildContext context) {
+                              //     return Container(
+                              //       height: MediaQuery.of(context).size.height * 0.9, // 设置高度
+                              //       decoration: BoxDecoration(
+                              //         color: Colors.white, // 替换为你的背景颜色
+                              //       ),
+                              //       child: FilterPage(),
+                              //     );
+                              //   },
+                              // );
+                            },
                             child: Container(
                               padding: const EdgeInsets.symmetric(horizontal: 10),
                               alignment: Alignment.center,
@@ -82,10 +101,6 @@ class _LibraryPageState extends State<LibraryPage> with AutomaticKeepAliveClient
                       ),
                     ),
                   ),
-            ),
-          ),
-          body: Column(
-            children: [
                   Container(
                     height: 43,
                     color: Colours.cF9,
@@ -118,6 +133,19 @@ class _LibraryPageState extends State<LibraryPage> with AutomaticKeepAliveClient
                   ),
                 ],
               ),
+              Visibility(
+                visible: controller.show,
+                child: FilterPage(
+                  controller: controller,
+                  sureTap: (){
+                    controller.setShow(controller.show);
+                },
+                  resetTap: (){
+
+                },),
+              ),
+            ],
+          )
         ),
     );
   }

lib/pages/library/widgets/filter.dart

+part of library;
+
+class FilterPage extends StatefulWidget {
+  final LibraryController controller;
+  final void Function() sureTap;
+  final void Function() resetTap;
+  const FilterPage({
+    Key? key,
+    required this.sureTap,
+    required this.resetTap,
+    required this.controller
+  }) : super(key: key);
+
+  @override
+  State<FilterPage> createState() => _FilterPageState();
+}
+
+class _FilterPageState extends State<FilterPage> {
+  @override
+  Widget build(BuildContext context) {
+    List<FilterModel> categories = widget.controller.categories.map((model) {
+      return FilterModel(id: model.categoryId.toString(), name: model.name??'');
+    }).toList();
+
+    List<FilterModel> labels = widget.controller.labels.map((model) {
+      return FilterModel(id: model.labelId.toString(), name: model.name??'');
+    }).toList();
+
+    return Container(
+      color: const Color(0xFF000000).withOpacity(0.5),
+      child: Column(
+        children: [
+          Container(
+            color: Colors.white,
+            width: double.infinity,
+            padding: EdgeInsets.only(bottom: 10),
+            child: Column(
+              children: [
+                Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
+                    _buildWrapWidget('分类', categories),
+                    _buildWrapWidget('标签', labels),
+                    _buildWrapWidget('是否收费', [FilterModel(id: '0', name: '收费'),FilterModel(id: '1', name: '免费')]),
+                    _buildWrapWidget('排序', [FilterModel(id: '0', name: '读过'),FilterModel(id: '1', name: '评分')]),
+                  ],
+                )
+              ],
+            ),
+
+          ),
+          Container(
+            padding: EdgeInsets.only(left:10,right:10,top:30,bottom:10),
+            color: Colors.white,
+            // margin: const EdgeInsets.symmetric(horizontal: 15),
+            child: Row(
+              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+              children: [
+                Expanded(
+                  child: GestureDetector(
+                    onTap: widget.resetTap,
+                    child: Container(
+                      alignment: Alignment.center,
+                      height: 35,
+                      decoration: BoxDecoration(
+                        borderRadius: BorderRadius.circular(17.5),
+                        border:Border.all(
+                            width: 0.5,
+                            color: Colours.c9
+                        ),
+                        // color: Colours.cE0.withOpacity(0.5),
+                      ),
+                      // padding: EdgeInsets.symmetric(vertical: 8),
+                      child: const Text('重置',style: TextStyle(fontSize: 13,color: Colours.c9,height: 1.5),),
+                    ),
+                  ),
+                ),
+                Gaps.hGaps10,
+                Expanded(
+                  child: GestureDetector(
+                    onTap: widget.sureTap,
+                    child: Container(
+                      decoration: BoxDecoration(
+                          borderRadius: BorderRadius.circular(17.5),
+                          color: AppTheme.primary.withOpacity(0.1)
+                      ),
+                      height: 35,
+                      alignment: Alignment.center,
+                      padding: const EdgeInsets.symmetric(vertical: 8),
+                      child: const Text('确定',style: TextStyle(fontSize: 13,color: AppTheme.primary,height: 1.5),),
+                    ),
+                  ),
+                )
+              ],
+            ),
+          )
+        ],
+      ),
+    );
+  }
+
+  Widget _buildWrapWidget(String title,List<FilterModel> data){
+
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        Container(
+            margin: EdgeInsets.only(left: 10,bottom: 10,top: 10),
+            child: Text(title,style: TextStyle(fontSize: 15,height:1.6,color: Colours.c3,fontWeight: Fonts.medium),)
+        ),
+        Wrap(
+          spacing: 10,
+          runSpacing: 10,
+          alignment: WrapAlignment.start,
+          runAlignment: WrapAlignment.start,
+          children: data.map((model){
+            return GestureDetector(
+              onTap: (){
+                print('================================');
+                setState(() {
+                  print('--------------------------------${model.selected}');
+                  model.selected = !model.selected;
+                });
+              },
+              child: Container(
+                height: 27,
+                decoration: BoxDecoration(
+                    borderRadius: BorderRadius.circular(13.5),
+                    color: model.selected?AppTheme.primary: Colours.cF4
+                ),
+                child: Padding(
+                  padding: const EdgeInsets.symmetric(horizontal:15,vertical: 5),
+                  child: model.name == '读过' || model.name == '评分'?Row(
+                    mainAxisSize: MainAxisSize.min,
+                    children: [
+                      Text(model.name,style: TextStyle(fontSize: 13,height: 1.4,color: model.selected?AppTheme.primary: Colours.c3),textAlign: TextAlign.center,),
+                      Image.asset('assets/images/down.png'),
+                    ],
+                  ):Text(model.name,style: TextStyle(fontSize: 13,height: 1.4,color: model.selected?AppTheme.primary: Colours.c3),textAlign: TextAlign.center,),
+                ),
+              ),
+            );
+          }).toList(),
+        )
+      ],
+    );
+  }
+}