zhiying_base_widget/lib/widgets/search/input/search_input_widget.dart

import 'dart:convert';
import 'dart:ui';

import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:fluttertoast/fluttertoast.dart';
import 'package:provider/provider.dart';
import 'package:zhiying_base_widget/pages/search_page/notifier/search_tag_notifier.dart';
import 'package:zhiying_base_widget/pages/search_result_page/search_result_page.dart';
import 'package:zhiying_base_widget/pages/search_think_page/bloc/search_think_bloc.dart';
import 'package:zhiying_base_widget/pages/search_think_page/search_think_page.dart';
import 'package:zhiying_base_widget/widgets/search/input/model/search_input_model.dart';
import 'package:zhiying_base_widget/widgets/search/input/search_input_sk.dart';
import 'package:zhiying_comm/zhiying_comm.dart';

///
/// 搜索页的搜索框
///
class SearchInputWidget extends StatefulWidget {
  final Map<String, dynamic> data;
  SearchInputModel model;

  SearchInputWidget(this.data, {Key key}) : super(key: key) {
    try {
      model = SearchInputModel.fromJson(jsonDecode(data['data']));
    } catch (e) {
      Logger.error(e);
    }
  }

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

class _SearchInputWidgetState extends State<SearchInputWidget> {
  /// 点击搜索按钮
  void _onSearchButtomClick() async {
    String content = _editingController?.text?.toString()?.trim() ?? '';

    /// TODO 保存历史标签
    if (!EmptyUtil.isEmpty(content)) {
      await Provider.of<SearchTagNotifier>(context, listen: false)
          .addTag(content);
      Navigator.push(
          context,
          CupertinoPageRoute(
              builder: (_) => SearchResultPage(
                  {'keywords': content, 'tag': 'search_page'})));
    } else {
      Fluttertoast.showToast(msg: '输入内容不能为空!');
    }
  }

  /// 【弃用】打开搜索联想页面
  void _openSearchThinkPage() {
    Navigator.push(
        context, CupertinoPageRoute(builder: (_) => SearchThinkPage({})));
  }

  /// 搜索框值改变
  void _searchInputChange(String text) {
    if (!EmptyUtil.isEmpty(text)) {
      // 进行网络更新
      print('输入框的内容是 $text');
      BlocProvider.of<SearchThinkBloc>(context)
          .add(SearchThinkKeyWrodsChangeEvent(text));
    } else {
      /// 输入框为空的时候，隐藏联想视图，显示原本的视图
      BlocProvider.of<SearchThinkBloc>(context)
          .add(SearchThinkShowBaseViewEvent());
    }
  }

  FocusNode _focusNode;
  TextEditingController _editingController;

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

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

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

  @override
  Widget build(BuildContext context) {
    return Visibility(
      visible: !EmptyUtil.isEmpty(widget?.model),
      replacement: SearchInputSkeleton(),
      child: _getMainWidget(widget?.model),
    );
  }

  /// 获取主视图
  Widget _getMainWidget(SearchInputModel model) {
    return Container(
      color: Colors.white,
      width: double.infinity,
      margin: EdgeInsets.only(
          top: MediaQueryData.fromWindow(window).padding.top + 7.5,
          left: 12.5,
          right: 12.5),
      child: Row(
        children: <Widget>[
          /// 返回键
          _getReturnWidget(),
          const SizedBox(width: 8.5),

          /// 输入框
          Expanded(
            child: Container(
              width: double.infinity,
              height: 32,
              // margin: const EdgeInsets.only(
              //   left: 12.5,
              //   right: 12.5,
              // ),
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(25),
                color: HexColor.fromHex('#F9F9F9'),
              ),
              child: Row(
                children: <Widget>[
                  /// 搜索icon
                  _getSearchIconWidget(model),
                  const SizedBox(width: 7.5),

                  /// 搜索输入框
                  Expanded(child: _getSearchInputWidget(model)),

                  /// 搜索按钮
                  _getSearchButtomWidget(model),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }

  /// 返回键
  Widget _getReturnWidget() {
    return GestureDetector(
      onTap: () => Navigator.maybePop(context),
      child: Container(
        child: Icon(
          Icons.arrow_back_ios,
          size: 22,
          color: HexColor.fromHex('#333333'),
        ),
        // onPressed: () => Navigator.maybePop(context),
      ),
    );
  }

  /// 搜索icon
  Widget _getSearchIconWidget(SearchInputModel model) {
    return Container(
      height: double.infinity,
      width: 20,
      margin: const EdgeInsets.only(left: 12.5),
      padding: const EdgeInsets.symmetric(vertical: 6),
      child: CachedNetworkImage(
        imageUrl: model?.search_icon ?? '',
      ),
    );
  }

  /// 搜索输入框
  Widget _getSearchInputWidget(SearchInputModel model) {
    return Container(
      height: double.infinity,
      alignment: Alignment.centerLeft,
      decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(30),
          color: HexColor.fromHex('#F9F9F9')),
      // padding: const EdgeInsets.symmetric(vertical: 6),
      child: TextField(
        showCursor: true,
        // readOnly: true,
        // onTap: ()=> _openSearchThinkPage(),
        onChanged: (val) => _searchInputChange(val),
        cursorWidth: 1,
        onSubmitted: (text) => _onSearchButtomClick(),
        controller: _editingController,
        focusNode: _focusNode,
        cursorColor: Colors.transparent,
        style: TextStyle(
            fontSize: 14,
            color: HexColor.fromHex('#333333'),
            textBaseline: TextBaseline.alphabetic),
        decoration: InputDecoration(
          filled: true,
          isDense: true,
          contentPadding: EdgeInsets.zero,
          // contentPadding: const EdgeInsets.only(left: 0,  right: 0, bottom: 12, top: 0),
          // focusColor: Colors.transparent,
          fillColor: Colors.transparent,
          border: InputBorder.none,
          focusedBorder: InputBorder.none,
          focusedErrorBorder: InputBorder.none,
          errorBorder: InputBorder.none,
          disabledBorder: InputBorder.none,
          enabledBorder: InputBorder.none,
          hintText: model?.search_inpu_hint_text ?? '搜索更多优惠商品',
          hintStyle: TextStyle(
              color: HexColor.fromHex('#999999'),
              fontSize: 14,
              textBaseline: TextBaseline.alphabetic),
        ),
      ),
    );
  }

  /// 搜索按钮
  Widget _getSearchButtomWidget(SearchInputModel model) {
    return GestureDetector(
      behavior: HitTestBehavior.opaque,
      onTap: () => _onSearchButtomClick(),
      child: Container(
        padding: const EdgeInsets.symmetric(horizontal: 17.5, vertical: 6),
        decoration: BoxDecoration(
          gradient: LinearGradient(colors: [
            HexColor.fromHex(model?.search_button_color ?? '#FD5E5E'),
            HexColor.fromHex(model?.search_button_t ?? '#FF0100')
          ], begin: Alignment.centerLeft, end: Alignment.centerRight),
          borderRadius: BorderRadius.circular(30),
        ),
        child: Text(
          model?.search_button ?? '搜索',
          style: TextStyle(color: HexColor.fromHex('#FFFFFF'), fontSize: 14),
        ),
      ),
    );
  }

  /// 【弃用】搜索按钮
// Widget _getSearchButtomWidget() {
//   return Material(
//     child: Container(
//       decoration: BoxDecoration(
//         borderRadius: BorderRadius.only(topRight: Radius.circular(25), bottomRight: Radius.circular(25))
//       ),
//       height: double.infinity,
//       width: 63,
//       child: RaisedButton(
//         padding: const EdgeInsets.only(bottom: 6, top: 6, left: 17.5, right: 17.5),
//         shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular( 25)),
//         child: Text('搜索', style: TextStyle( fontSize: 14, color:  HexColor.fromHex('#FFFFFF')),),
//         onPressed: ()=> _onSearchButtomClick(),
//         color: HexColor.fromHex('#FF0100'),
//       ),
//     ),
//   );
// }
}