搜索界面

lib/pages/course/view.dart

@@ -21,7 +21,7 @@ class _CoursePageState extends State<CoursePage> {
                 readOnly:true,
                 hintText: '请输入书籍名称',
                 onTap: () {
-                  context.pushNamed(Routes.msgs);
+                  context.pushNamed(Routes.search);
                 }
               ),
             ),

lib/pages/library/index.dart

@@ -5,8 +5,10 @@ import 'package:flutter_book/theme.dart';
 import 'package:flutter_book/utils/index.dart';
 import 'package:flutter_screenutil/flutter_screenutil.dart';
 import 'package:get/get.dart';
+import 'package:go_router/go_router.dart';
 import 'package:ionicons/ionicons.dart';
 
+import '../../routes/index.dart';
 import '../../widgets/index.dart';
 import '../course/index.dart';
 import '../study/index.dart';

lib/pages/library/view.dart

@@ -22,6 +22,7 @@ class _LibraryPageState extends State<LibraryPage> with AutomaticKeepAliveClient
                 icon: const Icon(Icons.search_rounded),
                 tooltip: 'Open shopping cart',
                 onPressed: () {
+                  context.pushNamed(Routes.search);
                 },
               ),
             ],

lib/pages/search/controller.dart

+part of search;
+
+class SearchController extends GetxController {
+
+  late TextEditingController searchController = TextEditingController();
+
+  final int _maxStorageNum = 10;
+
+  late List<String> searchList;
+  @override
+  void onInit() {
+    searchList = _getHistory();
+    super.onInit();
+  }
+
+  ///获取搜索关键字数据
+  List<String> _getHistory(){
+    List <String>historys = [];
+    historys.addAll(StorageService.to.getList(kSearchHistory));
+    ///过滤空字符串
+    historys.remove('');
+    return historys;
+  }
+
+  ///存储搜索关键字
+  void saveHistory(){
+    Tools.unfocus();
+    var history = searchController.text;
+    ///过滤空字符串
+    if(history.isEmpty){
+      return;
+    }
+    List <String>historys = [];
+    historys.addAll(StorageService.to.getList(kSearchHistory));
+    historys.remove('');
+
+
+    if(historys.contains(history)){
+      historys.remove(history);
+      historys.insert(0, history);
+    }
+    else{
+      if (historys.length >= _maxStorageNum){
+        historys.remove(historys.last);
+        historys.insert(0, history);
+      }
+      else{
+        historys.insert(0, history);
+      }
+    }
+    StorageService.to.setList(kSearchHistory, historys);
+
+    searchList = _getHistory();
+    update();
+  }
+
+  ///清除搜索关键字
+  void clearHistory(){
+    StorageService.to.setList(kSearchHistory, []);
+    searchList = _getHistory();
+    update();
+  }
+
+
+
+  @override
+  void onClose() {
+    searchController.dispose();
+    super.onClose();
+  }
+
+}
\ No newline at end of file

lib/pages/search/index.dart

+library search;
+
+
+import 'package:flutter/material.dart';
+import 'package:flutter_book/widgets/index.dart';
+import 'package:get/get.dart';
+import 'package:get/get_state_manager/src/simple/get_controllers.dart';
+import 'package:go_router/go_router.dart';
+
+import '../../services/index.dart';
+import '../../theme.dart';
+import '../../utils/index.dart';
+
+part 'view.dart';
+part 'widgets/history.dart';
+part 'controller.dart';
\ No newline at end of file

lib/pages/search/view.dart

+part of search;
+
+class SearchPage extends StatefulWidget {
+  const SearchPage({Key? key}) : super(key: key);
+
+  @override
+  State<SearchPage> createState() => _SearchPageState();
+}
+
+class _SearchPageState extends State<SearchPage> {
+  @override
+  Widget build(BuildContext context) {
+    return GetBuilder<SearchController>(
+      init: SearchController(),
+      builder:(controller)=> Scaffold(
+        appBar: CustomAppBar(
+          automaticallyImplyLeading:false,
+          titleSpacing: 0,
+          title:  Padding(
+            padding:  EdgeInsets.symmetric(horizontal: AppTheme.margin),
+            child: CustomInputSearch(
+              controller: controller.searchController,
+              readOnly:false,
+              hintText: '请输入书籍名称',
+              onTap: () {
+                // context.pushNamed(Routes.msgs);
+              },
+              onEditingComplete: (){
+                controller.saveHistory();
+              },
+            ),
+          ),
+          actions: [
+            GestureDetector(
+              onTap: (){
+                context.pop();
+              },
+              child: Container(
+                padding: EdgeInsets.only(left: 10,top: 10,bottom: 10),
+                  child: Text('取消',style: TextStyle(fontSize: 14,height: 1.5,color: Colours.c3),),
+                // color: Colors.red,
+              ),
+            )
+          ],
+        ),
+        body: BuildHistory(),
+      ),
+    );
+  }
+}

lib/pages/search/widgets/history.dart

+part of search;
+
+class BuildHistory extends StatefulWidget {
+  const BuildHistory({super.key});
+
+  @override
+  State<BuildHistory> createState() => _BuildHistoryState();
+}
+
+class _BuildHistoryState extends State<BuildHistory> {
+
+  // List<String> _searchList = [];
+
+  @override
+  Widget build(BuildContext context) {
+    return GetBuilder<SearchController>(
+      init: SearchController(),
+      builder:(controller)=> Container(
+        margin: const EdgeInsets.only(left: 13,top: 18),
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            Row(
+              mainAxisAlignment: MainAxisAlignment.spaceBetween,
+              children: [
+                const Text('搜索历史',style: TextStyle(fontSize: 14,height: 1.5,color: Colours.c3,fontWeight: Fonts.medium),),
+                GestureDetector(
+                  onTap: (){
+                    controller.clearHistory();
+                  },
+                  child: Container(
+                    padding: EdgeInsets.all(10),
+                    // width: 10,
+                    // height: 10,
+                    // color: Colors.cyan,
+                    child: Image.asset(
+                      'assets/images/del.png',
+                    ),
+                  ),
+                )
+              ],
+            ),
+            Wrap(
+              spacing: 10,
+              runSpacing: 10,
+              alignment: WrapAlignment.start,
+              runAlignment: WrapAlignment.start,
+              children: _buildItem(controller.searchList),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+
+  List <Widget> _buildItem(List<String> searchList){
+    print(searchList);
+    if (searchList == null || searchList.isEmpty){
+      List<Widget> list = [
+        Container(
+          width: 0,
+          height: 0,
+        )
+      ];
+      return list;
+    }else {
+      return searchList.map((e){
+        return GestureDetector(
+          child: Container(
+            height: 27,
+            decoration: BoxDecoration(
+              borderRadius: BorderRadius.circular(13.5),
+              color: Colours.cF4
+            ),
+            child: Padding(
+              padding: const EdgeInsets.symmetric(horizontal:15,vertical: 5),
+              child: Text(e,style: const TextStyle(fontSize: 13,height: 1.4,color: Colours.c3),textAlign: TextAlign.center,),
+            ),
+          ),
+        );
+      }).toList();
+    }
+  }
+}

lib/routes/index.dart

@@ -12,6 +12,7 @@ import 'package:flutter_book/pages/forget_pwd/index.dart';
 import 'package:flutter_book/pages/login/index.dart';
 import 'package:flutter_book/pages/main/index.dart';
 import 'package:flutter_book/pages/reset_pwd/index.dart';
+import 'package:flutter_book/pages/search/index.dart';
 import 'package:flutter_book/pages/splash/index.dart';
 import 'package:flutter_book/pages/study_report/index.dart';
 import 'package:flutter_book/pages/user_coin/index.dart';

lib/routes/routes.dart

@@ -9,11 +9,13 @@ abstract class Routes {
   static const ad = 'ad';
 
   static const web = 'web';
-  static const about = 'about';
+
   // 支付界面
   static const bookPay = 'book_pay';
   // 用户协议 和 隐私政策
   static const terms = 'terms';
+  // 搜索
+  static const search = 'search';
 
 
   /// 登录模块
@@ -25,6 +27,23 @@ abstract class Routes {
   static const resetPwd = 'reset_pwd';
 
 
+  /// 课程模块
+  // 详情
+  static const bookDetail = 'book_detail';
+  // 评分及书评
+  static const bookScore = 'book_score';
+  // 学习报告
+  static const studyReport = 'study_report';
+
+
+  /// 图书馆模块
+
+
+  /// 书架模块
+  static const creditPoints = 'credit_points';
+
+
+
   /// 我的模块
   // 个人信息
   static const userInfo = 'user_info';
@@ -44,18 +63,8 @@ abstract class Routes {
   static const coin = 'coin';
   // 消息
   static const msgs = 'msgs';
-
-
-  /// 课程模块
-  // 详情
-  static const bookDetail = 'book_detail';
-  // 评分及书评
-  static const bookScore = 'book_score';
-  // 学习报告
-  static const studyReport = 'study_report';
-
-  /// 书架模块
-  static const creditPoints = 'credit_points';
+  // 关于
+  static const about = 'about';
 
 
   static final GoRouter config = GoRouter(
@@ -227,6 +236,15 @@ abstract class Routes {
                 child: const CreditPointsPage()
             )
         ),
+        GoRoute(
+            path: '/$search',
+            name: search,
+            pageBuilder: (context, state) =>CupertinoPage(
+                name: state.uri.toString(),
+                key: state.pageKey,
+                child: const SearchPage()
+            )
+        ),
 
       ]
   );

lib/utils/constants.dart

@@ -9,6 +9,7 @@ const String kLocalAccessToken = 'local_access_token';
 const String kLocalAccount = 'local_account';
 const String kLocalPassword = 'local_password';
 const String kLocalUserInfo = 'local_user_info';
+const String kSearchHistory = 'search_history';
 
 
 

lib/utils/styles.dart

@@ -26,6 +26,7 @@ class Colours {
   static const cE2 = Color(0xFFE2E2E2);
   static const cE5 = Color(0xFFE5E5E5);
   static const cF2 = Color(0xFFF2F2F2);
+  static const cF4 = Color(0xFFF4F4F4);
   static const cF9 = Color(0xFFF9F9F9);
   static const cC7 = Color(0xFFC7C7C7);
   static const cE0 = Color(0xFFE0E0E0);

lib/widgets/input.dart

@@ -328,6 +328,7 @@ class CustomInputSearch extends StatelessWidget {
   final TextEditingController? controller;
   final bool readOnly;
   final void Function()? onTap;
+  final void Function()? onEditingComplete;
 
   const CustomInputSearch({
     Key? key,
@@ -336,6 +337,7 @@ class CustomInputSearch extends StatelessWidget {
     this.controller,
     this.readOnly = false,
     this.onTap,
+    this.onEditingComplete
   }) : super(key: key);
 
   EdgeInsetsGeometry get _padding {
@@ -349,6 +351,7 @@ class CustomInputSearch extends StatelessWidget {
   Widget build(BuildContext context) {
     final inputDecoration = Theme.of(context).inputDecorationTheme;
     return TextField(
+      onEditingComplete: onEditingComplete,
       readOnly: readOnly,
       controller: controller,
       onTap: onTap,