Flutter：页面3，搜索汗青记载页面

view
利用内置的Chip简化布局

1. import 'package:chenyanzhenxuan/common/index.dart';
2. import 'package:ducafe_ui_core/ducafe_ui_core.dart';
3. import 'package:flutter/material.dart';
4. import 'package:get/get.dart';
5. import 'package:tdesign_flutter/tdesign_flutter.dart';
7. import 'index.dart';
9. class SearchGoodsPage extends GetView<SearchGoodsController> {
10.   const SearchGoodsPage({super.key});
12.   // 搜索
13.   Widget _buildSearch() {
14.     return <Widget>[
15.       SearchWidget(
16.         type: 'input',
17.         inputBgColor: AppTheme.pageBgColor,
18.         controller: controller.searchController,
19.         onChange: (value) {
20.           controller.onSearchChange(value);
21.         },
22.       ),
23.     ].toRow()
24.     .paddingAll(30.w)
25.     .card(shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(0)));
26.   }
28.   // 热门搜索
29.   Widget _buildHotSearch() {
30.     return <Widget>[
31.       <Widget>[
32.         TDImage(assetUrl: 'assets/img/hot.png',width: 34.w,height: 34.w,),
33.         SizedBox(width: 10.w,),
34.         TextWidget.body('热门搜索',size: 28.sp,),
35.       ].toRow().paddingHorizontal(30.w),
37.       <Widget>[
38.         for(var i = 0; i < 6; i++)
39.         Chip(
40.           label: TextWidget.body('热门搜索$i',size: 24.sp,color: AppTheme.color999,),
41.           backgroundColor: AppTheme.blockBgColor,
42.           shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10.w)),
43.         )
44.       ].toWrap(spacing: 20.w,runSpacing: 0,).paddingLeft(30.w),
45.     ].toColumn(crossAxisAlignment: CrossAxisAlignment.start);
46.   }
48.   // 历史记录
49.   Widget _buildHistory(BuildContext context) {
50.     return <Widget>[
51.       <Widget>[
52.         TextWidget.body('历史记录',size: 28.sp,),
53.         TDImage(assetUrl: 'assets/img/hot-del.png',width: 28.w,height: 32.w,).onTap(() {
54.           showGeneralDialog(
55.           context: context,
56.           pageBuilder: (BuildContext buildContext, Animation<double> animation,
57.               Animation<double> secondaryAnimation) {
58.             return TDAlertDialog(
59.               title: '清空搜索历史',
60.               content: '请确定清空搜索历史?',
61.               buttonWidget: <Widget>[
62.                 <Widget>[const TextWidget.body('取消')]
63.                     .toRow(mainAxisAlignment: MainAxisAlignment.center)
64.                     .card(color: const Color(0xffeeeeee))
65.                     .tight(width: 240.w, height: 80.w)
66.                     .onTap(() => Navigator.of(context).pop()),
67.                 <Widget>[
68.                   const TextWidget.body(
69.                     '确定',
70.                     color: Colors.white,
71.                   )
72.                 ]
73.                     .toRow(mainAxisAlignment: MainAxisAlignment.center)
74.                     .card(color: const Color(0xffE93323))
75.                     .tight(width: 240.w, height: 80.w)
76.                     .onTap(() {
77.                   controller.clearSearchHistory();
78.                   Navigator.of(context).pop();
79.                 }),
80.               ]
81.                   .toRow(mainAxisAlignment: MainAxisAlignment.spaceBetween)
82.                   .paddingOnly(left: 30.w, right: 30.w, bottom: 40.w),
83.             );
84.           },
85.         );
86.         }),
87.       ].toRow(mainAxisAlignment: MainAxisAlignment.spaceBetween).paddingHorizontal(30.w),
90.       <Widget>[
91.         for(var i = 0; i < controller.searchHistory.length; i++)
92.         Chip(
93.           label: TextWidget.body(controller.searchHistory[i],size: 24.sp,color: AppTheme.color999,),
94.           backgroundColor: AppTheme.blockBgColor,
95.           shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10.w)),
96.           deleteIconColor: AppTheme.color999,
97.           onDeleted: () {
98.             controller.deleteSearchHistory(controller.searchHistory[i]);
99.           },
100.         )
101.       ].toWrap(spacing: 20.w,runSpacing: 0,).paddingLeft(30.w),
102.     ].toColumn(crossAxisAlignment: CrossAxisAlignment.start);
103.   }
105.   // 主视图
106.   Widget _buildView(BuildContext context) {
107.     return <Widget>[
108.       _buildSearch(),
109.       // SizedBox(height: 30.w,),
110.       // _buildHotSearch(),
111.       SizedBox(height: 30.w,),
112.       _buildHistory(context),
113.       controller.searchHistory.isEmpty ? const EmptyState() : const SizedBox()
114.     ].toColumn();
115.   }
117.   @override
118.   Widget build(BuildContext context) {
119.     return GetBuilder<SearchGoodsController>(
120.       init: SearchGoodsController(),
121.       id: "search_goods",
122.       builder: (_) {
123.         return Scaffold(
124.           backgroundColor: AppTheme.pageBgColor, // 自定义颜色
125.           appBar: const TDNavBar(
126.             height: 44,
127.             title: "搜索",
128.             titleFontWeight: FontWeight.w600,
129.             backgroundColor: Colors.white,
130.             screenAdaptation: true,
131.             useDefaultBack: true,
132.           ),
133.           body: SingleChildScrollView(
134.             child: _buildView(context),
135.           ),
136.         );
137.       },
138.     );
139.   }
140. }

复制代码

controller

1. import 'package:chenyanzhenxuan/common/index.dart';
2. import 'package:get/get.dart';
3. import 'package:flutter/material.dart';
4. class SearchGoodsController extends GetxController {
5.   SearchGoodsController();
6.   // 搜索框
7.   final searchController = TextEditingController();
8.   // 搜索关键词
9.   String searchKey = '';
10.   // 搜索历史
11.   List<String> searchHistory = [];
13.   @override
14.   void onReady() {
15.     super.onReady();
16.     _initData();
17.   }
19.   @override
20.   void onClose() {
21.     super.onClose();
22.     searchController.dispose();
23.   }
25.   // 初始化数据
26.   void _initData() {
27.     searchHistory = Storage().getList('search_history');
28.     update(["search_goods"]);
29.   }
32.   // 搜索框发送改变
33.   void onSearchChange(String value) {
34.     if(value.isEmpty) return Loading.toast("请输入搜索内容");
35.     searchController.text = value;
36.     // 查找是否存在该搜索词
37.     final index = searchHistory.indexOf(value);
38.     // 如果已存在，删除旧值
39.     if (index != -1) {
40.       searchHistory.removeAt(index);
41.     }
42.     // 将新搜索词添加到数组开头
43.     searchHistory.insert(0, value);
44.     // 限制历史记录条数
45.     if (searchHistory.length > 20) {
46.       searchHistory = searchHistory.sublist(0, 20);
47.     }
48.     // 保存更新后的搜索历史
49.     Storage().setList('search_history', searchHistory);
50.     // 使用 Get.toNamed 的返回回调来刷新数据
51.     Get.toNamed('/goods_list_page', arguments: {
52.       'searchValue': value,
53.       'title': '搜索',
54.       'type': 1,
55.     })?.then((_) {
56.       searchController.text = '';
57.       _initData(); // 返回时重新加载数据
58.     });
59.     update(["search_goods"]);
60.   }
62.   // 清空搜索历史
63.   void clearSearchHistory() {
64.     searchHistory = [];
65.     Storage().setList('search_history', searchHistory);
66.     update(["search_goods"]);
67.   }
69.   // 删除单个历史记录
70.   void deleteSearchHistory(String value) {
71.     searchHistory.remove(value);
72.     Storage().setList('search_history', searchHistory);
73.     update(["search_goods"]);
74.   }
76.   
78. }

复制代码

SearchWidget

1. import 'package:ducafe_ui_core/ducafe_ui_core.dart';
2. import 'package:flutter/material.dart';
3. import 'package:get/get.dart';
4. import 'package:tdesign_flutter/tdesign_flutter.dart';
5. import 'package:chenyanzhenxuan/common/index.dart';
8. class SearchWidget extends StatelessWidget {
9.   // 类型
10.   final String type;
11.   // 搜索框控制器
12.   final TextEditingController? controller;
13.   // 输入框背景色
14.   final Color? inputBgColor;
15.   // 搜索框发送改变
16.   final Function(String value)? onChange;
20.   const SearchWidget({
21.     super.key,
22.     required this.type,
23.     this.controller,
24.     this.inputBgColor,
25.     this.onChange,
26.   });
29.   @override
30.   Widget build(BuildContext context) {
31.     return <Widget>[
32.       <Widget>[
33.         TDImage(
34.           assetUrl: type == 'text' ? 'assets/img/search.png' : 'assets/img/search.png',
35.           width: 32.w,
36.           height: 32.w,
37.         ),
38.         SizedBox(width: 20.w),
39.         type == 'text' ? TextWidget.body('搜索您要找的商品名称', size: 28.sp, color: AppTheme.color999)
40.         : InputWidget(
41.           placeholder: "搜索您要找的商品名称",
42.           controller: controller,
43.         ).width(450.w),
44.       ].toRow(),
45.       <Widget>[
46.         TextWidget.body('搜索', size: 26.sp, color: AppTheme.colorfff),
47.       ].toRow(mainAxisAlignment: MainAxisAlignment.center)
48.       .card(color: AppTheme.error,shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(30.w)))
49.       .tight(width: 120.w,height: 60.w)
50.       .onTap(() {
51.         if(type == 'text'){
52.           Get.toNamed('/search_goods_page');
53.         }else{
54.           if(type == 'input' && controller?.text != null){
55.             onChange!(controller!.text);
56.           }
57.         }
58.       }),
59.     ]
60.     .toRow(mainAxisAlignment: MainAxisAlignment.spaceBetween)
61.     .paddingOnly(left: 30.w,right: 4.w)
62.     .card(
63.       color: inputBgColor,
64.       shape: RoundedRectangleBorder(
65.         borderRadius: BorderRadius.circular(30.w)
66.       )
67.     )
68.     .tight(width: 690.w, height: 68.w)
69.     .onTap(() {
70.       if(type == 'text'){
71.         Get.toNamed('/search_goods_page');
72.       }
73.     });
74.   }
75. }

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

继续阅读请点击广告