search_app_bar.dart 4.7 KB

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