zhiying_base_widget/lib/widgets/team/input/team_input_widget.dart

import 'package:flutter/material.dart';
import 'package:zhiying_base_widget/pages/team_page/model/team_style_model.dart';
import 'package:cached_network_image/cached_network_image.dart';
import 'package:zhiying_base_widget/pages/team_page/notifier/team_page_notifier.dart';
import 'package:zhiying_comm/zhiying_comm.dart';
import 'package:provider/provider.dart';

class TeamInputWidget extends StatefulWidget {
  TeamStyleModel styleModel;
  TabController tabController;

  TeamInputWidget(this.styleModel, this.tabController);

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

class _TeamInputWidgetState extends State<TeamInputWidget> {
  TextEditingController _controller;
  FocusNode _focusNode;
  bool _showCancel = false;

  /// 搜索方法
  void _onSearchClick() {
    String text = _controller?.text?.toString()?.trim();
    if (!EmptyUtil.isEmpty(text) && text.length > 0) {
      widget?.tabController?.index = 0;
      Provider.of<TeamPageNotifier>(context, listen: false).searchReset(text);
    }
  }

  ///  点击取消输入
  void _cancel() {
    _controller?.clear();
  }

  void _onChange(text) {
    if (!EmptyUtil.isEmpty(text)) {
      if (!_showCancel) {
        setState(() {
          _showCancel = true;
        });
      }
    } else {
      if (_showCancel) {
        setState(() {
          _showCancel = false;
        });
      }
    }
  }

  @override
  void initState() {
    _controller = TextEditingController();
    _focusNode = FocusNode();
    super.initState();
  }

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
  }

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

  @override
  void deactivate() {
    super.deactivate();
    _focusNode?.unfocus();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      height: double.infinity,
      padding: const EdgeInsets.only(top: 10, left: 12.5, right: 12.5),
      color: Colors.white,
      child: Row(
        children: <Widget>[
          /// 输入框
          Expanded(
            child: Container(
              height: 24,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(30),
                color: HexColor.fromHex(widget?.styleModel?.headerNoReferrerInputBgColor ?? '#F7F7F7'),
              ),
              // padding: const EdgeInsets.only(top: 5, bottom: 4.5, left: 7.5, right: 7.5),
              width: double.infinity,
              child: Row(
                children: <Widget>[
                  // Container(width: 11.5, height: 11.5, color: Colors.red,),
                  /// 查询图标
                  Padding(
                      padding: const EdgeInsets.only(top: 5, bottom: 4.5, left: 7.5),
                      child: CachedNetworkImage(
                        imageUrl: widget?.styleModel?.searchBarLeftIcon,
                        width: 11.5,
                      )),

                  Expanded(
                    child: Container(
                      padding: const EdgeInsets.only(top: 5, bottom: 4.5),
                      color: Colors.transparent,
                      child: TextField(
                        controller: _controller,
                        focusNode: _focusNode,
                        onChanged: _onChange,
                        onSubmitted: (text) => _onSearchClick(),
                        style: TextStyle(fontSize: 11, color: HexColor.fromHex(widget?.styleModel?.headerNoReferrerInputColor ?? '#000000'), textBaseline: TextBaseline.alphabetic),
                        decoration: InputDecoration(
                          focusedBorder: InputBorder.none,
                          border: InputBorder.none,
                          focusedErrorBorder: InputBorder.none,
                          errorBorder: InputBorder.none,
                          disabledBorder: InputBorder.none,
                          enabledBorder: InputBorder.none,
                          filled: true,
                          isDense: true,
                          contentPadding: const EdgeInsets.only(left: 6, bottom: 0, top: 0, right: 0),
                          fillColor: Colors.transparent,
                          hintStyle:
                              TextStyle(fontSize: 11, color: HexColor.fromHex(widget?.styleModel?.searchBarHideTextColor ?? '#999999'), textBaseline: TextBaseline.alphabetic),
                          hintText: widget?.styleModel?.searchBarHideText ?? '输入需搜索的手机号/昵称',
                        ),
                      ),
                    ),
                  ),
                  // Container(width: 15, height: 15, color: Colors.red,)
                  /// 关闭按钮
                  Visibility(
                    visible: _showCancel,
                    child: GestureDetector(
                        behavior: HitTestBehavior.opaque,
                        onTap: () => _cancel(),
                        child: Padding(
                          padding: const EdgeInsets.only(top: 5, bottom: 4.5, right: 7.5),
                          child: CachedNetworkImage(
                            imageUrl: widget?.styleModel?.searchBarRightIcon,
                            width: 11.5,
                          ),
                        )),
                  ),
                ],
              ),
            ),
          ),
          const SizedBox(width: 8),

          ///  确定按钮
          GestureDetector(
            behavior: HitTestBehavior.opaque,
            onTap: () => _onSearchClick(),
            child: Container(
              decoration: BoxDecoration(borderRadius: BorderRadius.circular(30), color: HexColor.fromHex(widget?.styleModel?.searchBarBtnBgColor ?? '#FF4242')),
              padding: const EdgeInsets.only(left: 15, right: 15, bottom: 6.5, top: 6.5),
              child: Text(
                widget?.styleModel?.searchBarBtnText ?? '搜索',
                style: TextStyle(color: HexColor.fromHex(widget?.styleModel?.searchBarBtnTextColor ?? '#FFFFFF'), fontSize: 11),
              ),
            ),
          )
        ],
      ),
    );
  }
}