123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193 |
- 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 '../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 = 35,
- this.searchBarBorderRadius = 17.25,
- this.searchBarBgColor,
- this.textHintColor,
- this.searchBarBorder,
- this.margin,
- this.textColor = Colors.white,
- 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? searchBarBgColor;
- 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: widget.searchBarBgColor ?? Color(0xFF4DCFF6).withOpacity(0.2), // 设置// 背景颜色和不透明度
- borderRadius: BorderRadius.circular(widget.searchBarBorderRadius), // 设置圆角
- border: widget.searchBarBorder,
- ),
- 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: widget.textHintColor ?? Color(0xFFAECAE5),
- fontSize: 15.0,
- fontWeight: FontWeight.w400,
- ),
- ),
- style: TextStyle(
- color: widget.textColor,
- 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();
- }
- }
|