YYHome/packages/cs_widgets/lib/search_app_bar.dart

import 'package:cs_resources/theme/app_colors_theme.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_keyboard_visibility/flutter_keyboard_visibility.dart';
import 'package:cs_resources/generated/assets.dart';
import 'package:widgets/ext/ex_widget.dart';
import 'package:widgets/utils/dark_theme_util.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.value,
    this.autoFocus = false,
    this.focusNode,
    this.controller,
    this.actions = const [],
    this.hintText,
    this.onTap,
    this.searchBarHeight = 33,
    this.searchBarBorderRadius = 17.25,
    this.searchBarBorderColor,
    this.textHintColor,
    this.searchBarBorder,
    this.margin,
    this.textColor = Colors.black,
    this.onChanged,
    this.onSearch,
  }) : super(key: key);

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

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

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

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

  double searchBarHeight;

  double searchBarBorderRadius;

  EdgeInsetsGeometry? margin;

  Color? searchBarBorderColor;

  Color? textHintColor;

  Color textColor;

  BoxBorder? searchBarBorder;

  String? value;

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

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

  @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 ?? "";

    super.initState();
  }

  // 更新输入框的文本内容
  void updateValue(String newValue) {
    setState(() {
      _controller?.text = newValue;
    });
  }

  //失去焦点和隐藏软键盘
  void _unFocus() {
    setState(() {
      _focusNode?.unfocus();
    });
  }

  @override
  void didUpdateWidget(covariant SearchAppBar oldWidget) {
    super.didUpdateWidget(oldWidget);
    if (widget.value != oldWidget.value) {
      _controller?.text = widget.value ?? "";
    }
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      height: widget.searchBarHeight,
      padding: const EdgeInsets.only(left: 15, right: 11),
      margin: widget.margin ?? const EdgeInsets.only(right: 15),
      decoration: BoxDecoration(
        color: Colors.transparent,
        borderRadius: BorderRadius.circular(widget.searchBarBorderRadius), // 设置圆角
        border: widget.searchBarBorder ?? Border.all(
          color: widget.searchBarBorderColor ?? DarkThemeUtil.multiColors(context, context.appColors.searchFiledBorder,darkColor: Colors.white12)??context.appColors.searchFiledBorder, // 边框颜色
          width: 1.0, // 边框宽度
        ),
      ),
      child: Row(
        mainAxisSize: MainAxisSize.max,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          //输入框
          IgnoreKeyboardDismiss(
            child: TextField(
              cursorColor: widget.textColor,
              cursorWidth: 1.5,
              autofocus: false,
              maxLines: 1,
              minLines: 1,
              // 是否自动获取焦点
              focusNode: _focusNode,
              // 焦点控制
              controller: _controller,
              // 与输入框交互控制器
              //装饰
              decoration: InputDecoration(
                isDense: true,
                //清除垂直方向的填充
                isCollapsed: true,
                //让文字垂直居中
                border: InputBorder.none,
                hintText: widget.hintText,
                hintStyle: TextStyle(
                  color: DarkThemeUtil.multiColors(context, widget.textHintColor ?? Color(0xFFAECAE5),darkColor: Colors.white),
                  fontSize: 15.0,
                  fontWeight: FontWeight.w400,
                ),
              ),
              style: TextStyle(
                color: DarkThemeUtil.multiColors(context, widget.textColor,darkColor: Colors.white),
                fontSize: 15.0,
                fontWeight: FontWeight.w400,
              ),
              // 键盘动作右下角图标
              textInputAction: TextInputAction.search,
              textAlignVertical: TextAlignVertical.center,
              onSubmitted: (value) {
                widget.onSearch?.call(value);
                _unFocus();
              },
              //输入框完成触发
              onChanged: (value) {
                widget.value = value;
                widget.onChanged?.call(value);
              },
            ),
          ).expanded(),

          //搜索图标
          const MyAssetImage(Assets.baseLibSearchIcon, width: 15, height: 15).marginOnly(left: 10).onTap(() {
            widget.onSearch?.call(_controller?.text ?? "");
            _unFocus();
          }),
        ],
      ),
    );
  }

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