YY-Hotel-Business-ER/packages/cs_widgets/lib/search_app_bar.dart

import 'package:flutter/material.dart';
import 'package:flutter_keyboard_visibility/flutter_keyboard_visibility.dart';
import 'package:get/get.dart';
import 'package:cs_resources/generated/assets.dart';
import 'package:widgets/ext/ex_widget.dart';
import '../utils/dark_theme_util.dart';
import 'my_load_image.dart';
import 'package:cs_resources/constants/color_constants.dart';

class SearchAppBar extends StatefulWidget {
  SearchAppBar({
    Key? key,
    // this.backPath,
    this.borderRadius = 5,
    this.autoFocus = false,
    this.focusNode,
    this.controller,
    this.height = 35,
    this.value,
    // this.leading,
    this.backgroundColor,
    this.suffix,
    this.actions = const [],
    this.hintText,
    this.onTap,
    this.onClear,
    this.onCancel,
    this.onChanged,
    this.onSearch,
    // this.onRightTap,
  }) : super(key: key);

  final double? borderRadius;
  final bool? autoFocus;
  final FocusNode? focusNode;
  final TextEditingController? controller;

  // 输入框高度 默认35
  final double height;

  // 默认值
  final String? value;

  //配置暗黑模式
  // final String? backPath;

  // 最前面的组件
  // final Widget? leading;

  // 背景色
  final Color? backgroundColor;

  // 搜索框内部后缀组件
  final Widget? suffix;

  // 搜索框右侧组件
  final List<Widget> actions;

  // 输入框提示文字
  final String? hintText;

  // 输入框点击回调
  final VoidCallback? onTap;

  // 清除输入框内容回调
  final VoidCallback? onClear;

  // 清除输入框内容并取消输入
  final VoidCallback? onCancel;

  // 输入框内容改变
  final ValueChanged<String>? onChanged;

  // 点击键盘搜索
  final ValueChanged<String>? onSearch;

  // 点击右边widget
  // final VoidCallback? onRightTap;

  @override
  _SearchAppBarState createState() => _SearchAppBarState();
}

class _SearchAppBarState extends State<SearchAppBar> {
  TextEditingController? _controller;
  FocusNode? _focusNode;

  bool get isFocus => _focusNode?.hasFocus ?? false; //是否获取焦点

  bool get isTextEmpty => _controller?.text.isEmpty ?? false; //输入框是否为空

  bool get isActionEmpty => widget.actions.isEmpty; // 右边布局是否为空

  bool isShowCancel = false;

  @override
  void initState() {
    _controller = widget.controller ?? TextEditingController();
    _focusNode = widget.focusNode ?? FocusNode();
    if (widget.value != null) _controller?.text = widget.value ?? "";
    // 焦点获取失去监听
    _focusNode?.addListener(() => setState(() {}));
    // 文本输入监听
    _controller?.addListener(() {
      setState(() {});
    });
    super.initState();
  }

  // 清除输入框内容
  void _onClearInput() {
    setState(() {
      _controller?.clear();
    });
    widget.onClear?.call();
  }

  // 取消输入框编辑失去焦点
  void _onCancelInput() {
    setState(() {
      _controller?.clear();
      _focusNode?.unfocus(); //失去焦点
    });
    // 执行onCancel
    widget.onCancel?.call();
  }

  Widget _suffix() {
    if (!isTextEmpty) {
      return InkWell(
        onTap: _onClearInput,
        child: SizedBox(
          width: widget.height,
          height: widget.height,
          child: Icon(Icons.cancel, size: 22, color: DarkThemeUtil.multiColors(const Color(0xFF999999), darkColor: Colors.white)),
        ),
      );
    }
    return widget.suffix ?? SizedBox();
  }

  List<Widget> _actions() {
    List<Widget> list = [];
    // if (isFocus || !isTextEmpty) {
    //   list.add(InkWell(
    //     onTap: widget.onRightTap ?? _onCancelInput,
    //     child: Container(
    //       constraints: BoxConstraints(minWidth: 48.w),
    //       alignment: Alignment.center,
    //       child: MyText(
    //         '搜索',
    //         fontColor: MyColors.color_666666,
    //         fontSize: 14.sp,
    //       ),
    //     ),
    //   ));
    // } else if (!isActionEmpty) {
    //   list.addAll(widget.actions);
    // }
    return list;
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsetsDirectional.only(end: 10),
      height: widget.height,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(widget.borderRadius ?? 0),
        border: Border.all(width: 0.5, color: DarkThemeUtil.multiColors(Colors.black, darkColor: Colors.white)!),
      ),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          //间距
          SizedBox(width: 10),

          //Search Icon
          MyAssetImage(
            Assets.baseLibBlackBack,
            width: 16,
            height: 16,
            color: DarkThemeUtil.multiColors(null, darkColor: Colors.white),
          ).onTap(() {
            String? searchStr = _controller?.text;

            if (widget.onSearch != null) {
              widget.onSearch!(searchStr!);
            }
          }),

          //间距
          SizedBox(width: 8),

          //输入框
          Expanded(
            // 权重
            child: IgnoreKeyboardDismiss(
              child: TextField(
                cursorColor: ColorConstants.appBlue,
                autofocus: widget.autoFocus ?? false,
                // 是否自动获取焦点
                focusNode: _focusNode,
                // 焦点控制
                controller: _controller,
                // 与输入框交互控制器
                //装饰
                decoration: InputDecoration(
                  isDense: true,
                  //清除垂直方向的填充
                  isCollapsed: true,
                  //让文字垂直居中
                  border: InputBorder.none,
                  hintText: widget.hintText ?? '搜索'.tr,
                  hintStyle: const TextStyle(
                    fontSize: 15,
                    color: const Color(0xff777777),
                    fontWeight: FontWeight.w500,
                  ),
                ),
                style: TextStyle(
                  fontSize: 15,
                  color: DarkThemeUtil.multiColors(Colors.black, darkColor: Colors.white),
                  fontWeight: FontWeight.w500,
                ),
                // 键盘动作右下角图标
                textInputAction: TextInputAction.search,
                textAlignVertical: TextAlignVertical.center,
                onTap: widget.onTap,
                // 输入框内容改变回调
                onChanged: widget.onChanged,
                onSubmitted: widget.onSearch, //输入框完成触发
              ),
            ),
          ),
          _suffix(),
        ],
      ),
    );
  }

  @override
  void dispose() {
    _controller?.dispose();
    _focusNode?.dispose();
    super.dispose();
  }
}