search_app_bar.dart 5.2 KB

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