search_app_bar.dart 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200
  1. import 'package:flutter/cupertino.dart';
  2. import 'package:flutter/material.dart';
  3. import 'package:flutter_keyboard_visibility/flutter_keyboard_visibility.dart';
  4. import 'package:get/get.dart';
  5. import 'package:cs_resources/generated/assets.dart';
  6. import 'package:widgets/ext/ex_widget.dart';
  7. import '../utils/dark_theme_util.dart';
  8. import 'my_load_image.dart';
  9. import 'package:cs_resources/constants/color_constants.dart';
  10. class SearchAppBar extends StatefulWidget {
  11. SearchAppBar({
  12. Key? key,
  13. this.value,
  14. this.autoFocus = false,
  15. this.focusNode,
  16. this.controller,
  17. this.actions = const [],
  18. this.hintText,
  19. this.onTap,
  20. this.searchBarHeight = 35,
  21. this.searchBarBorderRadius = 17.25,
  22. this.searchBarBgColor,
  23. this.textHintColor,
  24. this.searchBarBorder,
  25. this.margin,
  26. this.textColor = Colors.white,
  27. this.textFontSize = 15.0,
  28. this.showSearchIcon = true,
  29. this.onChanged,
  30. this.onSearch,
  31. }) : super(key: key);
  32. final bool? autoFocus;
  33. final FocusNode? focusNode;
  34. final TextEditingController? controller;
  35. // 搜索框右侧组件
  36. final List<Widget> actions;
  37. // 输入框提示文字
  38. final String? hintText;
  39. // 输入框点击回调
  40. final VoidCallback? onTap;
  41. double searchBarHeight;
  42. double searchBarBorderRadius;
  43. EdgeInsetsGeometry? margin;
  44. Color? searchBarBgColor;
  45. Color? textHintColor;
  46. Color textColor;
  47. double? textFontSize;
  48. BoxBorder? searchBarBorder;
  49. String? value;
  50. bool showSearchIcon = true;
  51. // 输入框内容改变
  52. final ValueChanged<String>? onChanged;
  53. // 点击键盘搜索
  54. final ValueChanged<String>? onSearch;
  55. @override
  56. _SearchAppBarState createState() => _SearchAppBarState();
  57. }
  58. class _SearchAppBarState extends State<SearchAppBar> {
  59. TextEditingController? _controller;
  60. FocusNode? _focusNode;
  61. bool get isFocus => _focusNode?.hasFocus ?? false; //是否获取焦点
  62. bool get isTextEmpty => _controller?.text.isEmpty ?? false; //输入框是否为空
  63. bool get isActionEmpty => widget.actions.isEmpty; // 右边布局是否为空
  64. bool isShowCancel = false;
  65. @override
  66. void initState() {
  67. _controller = widget.controller ?? TextEditingController();
  68. _focusNode = widget.focusNode ?? FocusNode();
  69. //赋值要显示的文本
  70. if (widget.value != null) _controller?.text = widget.value ?? "";
  71. super.initState();
  72. }
  73. // 更新输入框的文本内容
  74. void updateValue(String newValue) {
  75. setState(() {
  76. _controller?.text = newValue;
  77. });
  78. }
  79. //失去焦点和隐藏软键盘
  80. void _unFocus() {
  81. setState(() {
  82. _focusNode?.unfocus();
  83. });
  84. }
  85. @override
  86. void didUpdateWidget(covariant SearchAppBar oldWidget) {
  87. super.didUpdateWidget(oldWidget);
  88. if (widget.value != oldWidget.value) {
  89. _controller?.text = widget.value ?? "";
  90. }
  91. }
  92. @override
  93. Widget build(BuildContext context) {
  94. return Container(
  95. height: widget.searchBarHeight,
  96. padding: EdgeInsets.only(left: 15, right: 11),
  97. margin: widget.margin ?? EdgeInsets.only(right: 15),
  98. decoration: BoxDecoration(
  99. color: widget.searchBarBgColor ?? Color(0xFF4DCFF6).withOpacity(0.2), // 设置// 背景颜色和不透明度
  100. borderRadius: BorderRadius.circular(widget.searchBarBorderRadius), // 设置圆角
  101. border: widget.searchBarBorder,
  102. ),
  103. child: Row(
  104. mainAxisSize: MainAxisSize.max,
  105. crossAxisAlignment: CrossAxisAlignment.center,
  106. children: [
  107. //输入框
  108. IgnoreKeyboardDismiss(
  109. child: TextField(
  110. cursorColor: widget.textColor,
  111. cursorWidth: 1.5,
  112. autofocus: false,
  113. maxLines: 1,
  114. minLines: 1,
  115. // 是否自动获取焦点
  116. focusNode: _focusNode,
  117. // 焦点控制
  118. controller: _controller,
  119. // 与输入框交互控制器
  120. //装饰
  121. decoration: InputDecoration(
  122. isDense: true,
  123. //清除垂直方向的填充
  124. isCollapsed: true,
  125. //让文字垂直居中
  126. border: InputBorder.none,
  127. hintText: widget.hintText,
  128. hintStyle: TextStyle(
  129. color: widget.textHintColor ?? Color(0xFFAECAE5),
  130. fontSize: widget.textFontSize?? 15.0,
  131. fontWeight: FontWeight.w400,
  132. ),
  133. ),
  134. style: TextStyle(
  135. color: widget.textColor,
  136. fontSize: 15.0,
  137. fontWeight: FontWeight.w400,
  138. ),
  139. // 键盘动作右下角图标
  140. textInputAction: TextInputAction.search,
  141. textAlignVertical: TextAlignVertical.center,
  142. onSubmitted: (value) {
  143. widget.onSearch?.call(value);
  144. _unFocus();
  145. },
  146. //输入框完成触发
  147. onChanged: (value) {
  148. widget.value = value;
  149. widget.onChanged?.call(value);
  150. },
  151. ),
  152. ).expanded(),
  153. //搜索图标
  154. widget.showSearchIcon? MyAssetImage(Assets.cptJobSearchIcon, width: 15, height: 15).marginOnly(left: 10).onTap(() {
  155. widget.onSearch?.call(_controller?.text ?? "");
  156. _unFocus();
  157. }): SizedBox.shrink(),
  158. ],
  159. ),
  160. );
  161. }
  162. @override
  163. void dispose() {
  164. _controller?.dispose();
  165. _focusNode?.dispose();
  166. super.dispose();
  167. }
  168. }